Pages

Monday, March 20, 2017

SharePoint Upload.aspx page freezes when page loads

Recently, I had an issue at a client site where the upload page in any document library would hang a little when opening in IE. There wasn't any issue in Chrome. This issue also wasn't occurring on all workstations, just a few. I knew it had to probably be an Office configuration, but group policy was preventing me from seeing any IE configurations. After diving into the source code of the upload.aspx page, I could see that the page was trying to load an ActiveX control, STSUpld.UploadCtl if the browser version was IE 5 and up. Upon investigation, the different workstations had different versions of this IE Add-on (from IE go to tools->Manage add-ons).

Chrome would skip the loading of the active x object. Therefore, after some head-banging, I decided to update the master page and add the following script to prevent creating the activex object. The script checks that the page is the upload.aspx and if it is, it sets browseris.ie5up to false to continue through the script. It's not a great fix, because it would have to be applied to all the master pages, however this would help appease users until the issue could be resolved by the IT team.





<script type="text/javascript"> 
//added this script because for some users, the upload page would freeze. an activex control on the upload page is loaded for IE5 and up. we set this to be false here so that active x control is not created
if( window.location.href.toLowerCase().indexOf("/_layouts/upload.aspx") >= 0 )
{
if (typeof browseris !== 'undefined') {
//browseris.ie = false;
browseris.ie5up = false;
}
}
</script>

Monday, December 19, 2016

Print SharePoint html table

It's been a while since I've posted anything, but I wanted to share a function that will take an html container or div control and print it to a new page. It will also grab the css files and output it to the head of the new page to maintain the styles when you print

This is dependent on the jquery library, found here:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>



//This function will grab the html from the container var to display in a new window.
//It also loads the css files that are on the current page and appends it to the output that is displayed in a new window to maintain the styles
//Title: Specify the title of the page that you wish to name when the print page opens
//Container: pass in the name of the container you wish to print. Ex. $("$tableName")
function PrintPage(title, container)
{
 //declare the css files with the styles you wish to grab and keep in the in the head of the new window
 var m_siteUrl = _spPageContextInfo.webServerRelativeUrl; //IE11 in sp 2013 does not recognize L_Menu_BaseUrl

 var curDate = new Date();
 var cssLink1 = m_siteUrl + "/siteassets/css/tablesorter/style.css?v=" + curDate.format("MM_dd_yyyy");
 var cssLink2 = m_siteUrl + "/siteassets/css/My_Page_Reports.css?v=" + curDate.format("MM_dd_yyyy");

 var divOutput = $(container).html();

 //append the current date/time to the output window  
 var printDateString = curDate.format("MM/dd/yyyy hh:mm tt");
 printDateString = "<div style='padding-bottom:10px;'>" + printDateString + "</div>";
 divOutput = printDateString + divOutput;
 
 var cssFile1 = $('<div></div>');
 var cssFile2 = $('<div></div>');

 //used for the callbacks
 var def1 = $.Deferred();
 var def2 = $.Deferred();      
   
 //loads the css files and grabs all of the css to input into style tags
 var cssFileText = "";
 cssFile1.load( cssLink1, function() { cssFileText += "<style>" + cssFile1.html() + "</style>"; def1.resolve()} );
 cssFile2.load( cssLink2, function() { cssFileText += "<style>" + cssFile2.html() + "</style>"; def2.resolve()} );

 //gets called asynchronously after the css files have been loaded
 $.when(def1, def2).done(function(){

 //generate the html that will be displayed in the new page.
 //set the title of the new window
 //additionally, can put the class names you wish to hide on printing  
   var html = "<HTML>\n" +
    "<HEAD>\n\n"+
    "<Title>" + title + "</Title>\n" +
    cssFileText + "\n" +
    "<style>"+
     ".hideOnPrint, .rowFilters {display:none}"+
    "</style>\n"+
   "</HEAD>\n" +
   "<BODY>\n" + divOutput + "\n" +"</BODY>\n" +
   "</HTML>";
 
 
   var printWP = window.open("","printWebPart");
   printWP.document.open();
   //insert content
   printWP.document.write(html);
     
   printWP.document.close();
   //open print dialog
   printWP.print();
  });  
}

Tuesday, September 24, 2013

Format SharePoint People Picker as Hyperlink on Infopath Display list form

I wanted to display the people picker value in a list form as a hyperlink in SharePoint. By default, it was just a text field on the display form. In a normal SharePoint list form, this field can be modified to disable output escaping so that it formats as an html. I was totally unsure how to accomplish this, and pressed for time, I decided to write a script to format it as a hyperlink. If you know how to do this in InfoPath, please share!

Place this script in a content editor webpart on the display list form:

<script type='text/javascript' src='/js/jquery-1.7.2.min.js'></script>
<script type="text/javascript">

//make sure document is loaded first
$(document).ready(function() { 
 setTimeout(formatUserField,'1000');
});

function formatUserField()
{
 $("span[ScriptClass='CustomControl']").each(function(){
  var curValue = $(this).text();
  var newhtml = "<a href='javascript:void(0)' onclick='PopUpEmail(\"" + curValue + "\");return false;'>"+ curValue +"</a>";
  $(this).html(newhtml);
 });
}

function PopUpEmail(username)
{
    var p_recipient = username;
    var p_cc = "";
    var p_subject =  "";
    var p_body =  "";
    var objO = new ActiveXObject('Outlook.Application');     
    var objNS = objO.GetNameSpace('MAPI');     
    var mItm = objO.CreateItem(0);     
    mItm.Display();     
    mItm.To = p_recipient;
    mItm.Cc = p_cc;
    mItm.Subject = p_subject;
    mItm.Body = p_body;     
    mItm.GetInspector.WindowState = 2;
}

</script>

Tuesday, September 10, 2013

Embed image in a SharePoint outgoing email using SharePoint Designer workflow activities

If you need to embed an image into a SharePoint outgoing email:


<head>
<meta name="content-disposition" content="inline; filename=Myimage.jpg">
</head>

  • Format your email, and then to insert the image, create a div tag at the bottom of the email string:
<div style="text-align: center;">
<img src="Myimage.jpg" alt="myimagelogo" />
</div>

  • Add the action: Send Email with List Item Attachments
  • Attach the image in the activity, with the same name as used above (Myimage.jpg)
    • In mine, I always want to attach the same image in every outgoing email, so I uploaded an image to a SharePoint document library and I attached the image based on the specific title it contained
  • In the email body of the action, add the workflow variable: emailBody
  • Save, publish and test it out!


Friday, May 3, 2013

Filter SharePoint list with Partial Postback to page

The other day, I wanted to filter a list view web part, triggered from a drop down list on my page. I couldn't connect to a standard out of the box filter web part because the dropdown values were populated with values retrieved from a web service. Every time I select a new value from the drop down, I wanted to automatically filter the sharepoint list with that value, without doing a full postback and refreshing the page (similar to the effect of when you filter a list from the list column options).

To start things off:
  • I created a document library and created a new column called "DocType" with a few choices:
    • Letter
    • Memo
    • Email
  • I made sure the DocType column appeared on my default view (this will be the view I use to do my filtering later)
  • I uploaded a few documents into my library, and provided the DocType for each
  • On my site page, I added the list view web part for this Document Library
  • From the AJAX Options under the list view web part settings:
    • Check off Enable Asynchronous Update
    • Show Manual Refresh Button
  • Using IE developer tools, find the element for the refresh icon with the id of ManualRefresh


Copy the outer anchor tag's onclick event (this event triggers a partial post back to the page)

  • Add a form web part to the same page
  • Grab the ID in the __doPostBack call and replace it in this script, and put the script into the form web part and save.
<div style="width:400px; height:20px; margin:0px auto; padding-bottom:20px; font-family:Verdana,Arial,Helvetica,Sans-serif;font-size:10pt;">
 Select Doc Type: 
 <select id="ddlDocType">
  <option></option>
  <option>Letter</option>
  <option>Memo</option>
 </select>
</div>


<script type='text/javascript' src='/assets/js/jquery-1.7.2.min.js'></script>
<script type="text/javascript"> 

$(document).ready(function(){
 //on the dropdown change event, call FilterMyList
 $("#ddlDocType").change(function(){
  FilterMyList();;
 });
});


function FilterMyList()
{
//get the selected value of the drop down
 var selectedDocType = $("#ddlDocType").val();
 if(selectedDocType == "" )
 { 
 //clears the filter
  __doPostBack("ctl00$m$g_95403266_84ab_485e_be73_8857b5d90f63$ctl02", "NotUTF8;__filter={DocType=" + "##dvt_all##"  + "}");
  return;
 }
 //filters the list on the selected docType
 __doPostBack("ctl00$m$g_95403266_84ab_485e_be73_8857b5d90f63$ctl02", "NotUTF8;__filter={DocType=" + selectedDocType + "}");
}  
</script>


Now, when you select a value from the dropdown, it should automatically filter the list without a full postback
 

Wednesday, May 1, 2013

SharePoint Site Actions Menu: Hide Sync to Workspace and Edit in SharePoint Designer

In my environment, I do not want to show users the Site Actions menu options that allow them to sync to workspace or click on Edit in SharePoint Designer.

I created this script that would iterate the menu options and hide the ones I didnt want available


ExecuteOrDelayUntilScriptLoaded(HideSiteActionMenuItems, "SP.Ribbon.js");


function HideSiteActionMenuItems()
{
 var menuItems = document.getElementsByTagName("ie:menuitem");
 if( menuItems != null )
 {
  for( var i = 0; i < menuItems.length; i++ )
  {
   var keyId = menuItems[i].id;
   if(keyId.endsWith("MenuItem_TakeOffline"))//Hide Sync to SharePoint Workspace
    menuItems[keyId ].hidden = true;
   else if( keyId.endsWith("MenuItem_EditSite")) //Hide Edit in SharePoint Designer
    menuItems[keyId].hidden = true;  
  }
 }
}

 



SharePoint Calendar: Expand all events on load

This is my approach to expand all calendar events on load, but if you have a better way, please share!

On the calendar page, add a reference to jQuery and also place a style tag to hide the "expand/collapse" links on load:

<style>
 .ms-cal-nav{display:none;}
</style>


Hook into the existing SharePoint calendar load function:

_spBodyOnLoadFunctionNames.push('changeCalendarEventLinkIntercept');

function changeCalendarEventLinkIntercept()
{
  var OldCalendarNotify4a = SP.UI.ApplicationPages.CalendarNotify.$4b;
  SP.UI.ApplicationPages.CalendarNotify.$4b = function () 
    {
      OldCalendarNotify4a();
      changeCalendarEventLinks();
    }
}


In the function call, find all anchor tags with the attribute evtid marked as 'expand_collapse' and click on the hyperlink:

function changeCalendarEventLinks()
{
//expand all
 $("a[evtid='expand_collapse']").each(function(){
  $(this)[0].click();
 });
}