SharePoint JSLink: Multiple web parts on a page

With JSLink you have the ability to quickly and easily change how a list views and forms are rendered. Together with jQuery, CSS and even JavaScript you can present a SharePoint list in endless ways. JSLink works very well when you only one web part with a custom JSLink located on a page. The default behavior with multiple web parts on a page is that all web parts will use the JSLink. This is counter intuitive since we set the JSLink on one web part. With the solution below we can make sure that only the correct web part use the custom JSLink code. The solution is created in cooperation with Peter van Koesveld.

Solution

This solution works for a page where one web part needs to be modified by the JSLink.

  1. Create a JavaScript file with the following code: JSLinkMultipleWebParts.
  2. Change the if statements to match the name of the list.
    if (ctx.ListTitle == "ListTitle")
    
  3. Change the headerHtml, ItemHtml and footerHtml to show the list as required.
  4. In the example the Title field will be displayed, make sure this field is available.
  5. Save the JavaScript file to SharePoint.
  6. Set the JSLink property.

Explanation

  1. The JSLink overrides the default Templates (Header, Item and Footer).
  2. Then if the ListTitle equals the provided ListTitle the custom code is run for the header, Item and Footer.
  3. If the ListTitle does not match the default RenderTemplate will be used.
    function renderItem() {
        if (ctx.ListTitle == "ListTitle") {
            //CustomItemRender
        } else {
            //Return the default Item Template
        	return RenderItemTemplate(ctx);
        }
    }
    
    • RenderHeaderTemplate
      return RenderHeaderTemplate(ctx);
      
    • RenderItemTemplate
      return RenderItemTemplate(ctx);
      
    • RenderFooterTemplate
      return RenderFooterTemplate(ctx);
      

SharePoint JSLink: Accordion

With JSLink you have the ability to quickly and easily change how a list views and forms are rendered. Together with jQuery, CSS and even JavaScript you can present a SharePoint list in endless ways. In this example I will create a FAQ list with a accordion display style.

Solution

  1. Create a custom list called FAQ with a title and description field (Multiple Lines of Text).
  2. If required changed the fields to be shown.
  3. Create a page and add the FAQ web part to the page.
  4. Create the JSLink file called AccordionView.js
  5. Create the JavaScript file called accordion.js
  6. Create the CSS file called accordion.css
  7. Save the background image to SharePoint.
  8. Change the background-image URLs if needed.
  9. Link the JSLink to the web part to load the AccordionView.js.
  10. Add the accordion.js and accordion.css to the page, for example by using a Content Editor web part.
  11. Add jQuery to the page.
  12. Make sure that jQuery is loaded before the other JavaScript. Errors might otherwise be generated.

SharePoint 2013 Workflow: Copy files with REST API

For a meeting solution on SharePoint Online (Office 365) we needed to copy files from one location to another. The solution we decided on was a workflow that asks the user for feedback and then copies the file to the desired library. This was done by creating a workflow with a web service using the CopyTo methode. Be aware that the CopyTo methode can only copy files within the same site. The methode cannot copy files between sites or site collections.

On the MSDN page you can find the details of the CopyTo methode.

Solution

  1. Create a SharePoint 2013 workflow
  2. Create a dictionary variable called JSONRequestHeader
  3. Create a string variable called regURL
  4. Add the action Build Directory, select JSONRequestHeader as the variable.
  5. Add Accept and content-type to the directory with the following code:
    application/json;odata=verbose
    

  6. Then store the following URL to the variable regURL:
    [%Workflow Context:Current Site URL%]_api/web/folders/GetByUrl('Original Document Location')/Files/getbyurl('Test.pdf')/CopyTo(strNewUrl='/sites/Meetingsite/DocumentNewLocation/Test.pdf',bOverWrite=true)
    
  7. You can change file names to variable to the workflow can run on every item within the library
  8. Create a string variable called currentItemName
  9. Add the action Set variable, set the following code for the currentItemName variable
  10. Change the regURL to:
    [%Workflow Context:Current Site URL%]_api/web/folders/GetByUrl('Original Document Location')/Files/getbyurl('[%Variable:currentItemName%]')/CopyTo(strNewUrl='/sites/Meetingsite/DocumentNewLocation/[%Variable:currentItemName%]',bOverWrite=true)
  11. Add the Call HTTP web service action to the workflow and set the “this” to the regURL
  12. Set RequestHeaders to Variable: JSONRequestHeader
  13. Set RequestType to HTTP Post

SharePoint Teams: Link web part

A new Link web part has been added to the Team sites. With this web part you can add a link (website) to  a page to create a link that displays information about the linked page.
The web part will create a clickabe tile that contains a title, description and a picture if possible of the linked page. The look and feel is the same as linking a web page in Slack or WhatsApp.

Solution

  1. Open the home page of a teamsite
  2. Set the page in the edit mode
  3. Click on the plus icon and click on the Link web part
  4. Provide the web part with a hyperlink and press enter. The web part will resolve the hyperlink and show some information of the website.
  5. Click on the X next to the hyperlink to hide the hyperlink and save the changes

SharePoint 2013 Workflow: Check if list item exists

For a customer we are building a complex approval process on Office 365 with SharePoint 2013 workflows. During the process we need to check if an list item (in an other list) existed. There is no default action that lets you do this. You can however us the set variable and if statement action to figure out if the item you are looking for exists or not. This is a useful trick to know when working with SharePoint 2013 workflows.

Solution

  1. Create a SharePoint 2013 workflow.
  2. Create a  variable called ContractItemID, here we will try to store the ID of the list item we are trying to find.
  3. Set the variable to 0 (zero).
  4. Then we need to try and set the ContractItemID variable with the ContractID of the item we are searching. This can be from the same list or a different list.
  5. I am trying to find the ID of a list item with a specific Contract Number.
  6. If the workflow finds an ID the ID will be stored in the variable, if no item is found then the ContractItemID value will remain 0 (zero)
  7. Use an if statement to determine if the list item exists.

 

JavaScript / jQuery: Hide/show fields

With SharePoint we use a lot of lists and libraries to store and share information, we add and change this information with the help of forms. In most cases we create one form with all the information required for the content. Even if not all the information is required for all types of content or if it depends on a phase or status. With the help of jQuery and JavaScript we can create a more dynamic form that will hide/show fields based on selected values of fields. Make sure to disable the quick option, otherwise user will be able to edit the field outside of the provided solution.

SharePoint 2013/Online: Disable Quick edit

  1. Open the list or library settings
  2. Open the Advanced settings
  3. Set Quick Edit to No

SharePoint 2010: Disable Datasheet editing

  1. Open the list or library settings
  2. Open the Advanced settings
  3. Set Datasheet to No

JavaScript: New Form

  1. Open your favorite JavaScript Editor.
  2. Create a new JavaScript file called NewFormHideShow.js
  3. Add the following base code to the JavaScript file.

    $( document ).ready(function() {
       
    }
    );
  4. The first step is to hide the columns. Find the display names of the field that need to be hidden. Note that you need the name located in the HTML nobr tag.
  5. You can use a DOM explorer to find the correct names.
  6. For each field add the following code.
    $('nobr:contains("[Field Name]")').closest('tr').hide(); 
    
  7. In my example I hide two fields, Finalized Date and Finalized By. My example code for the document ready function is shown below.
    $(document).ready(function()
       {
          $('nobr:contains("Finalized Date")').closest('tr').hide(); 
          $('nobr:contains("Finalized By")').closest('tr').hide();
       });
    
  8. The second step is to make the function that hides or shows the fields depended on the selected value.
  9. Add the following code to the JavaScript.
    (function($){
       function showHideRegionLocation() 
       {
          var FeedbackMatchingValue = 'Final';
    
          var thisDiv = $("select[title='Status']"); 
          var mmFieldValue = thisDiv.find("option:selected").text();
    		
          $('nobr:contains("Finalized Date")').closest('tr').hide(); 
          $('nobr:contains("Finalized By")').closest('tr').hide();
    			
          if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
          {
             $('nobr:contains("Finalized Date")').closest('tr').show(); 
             $('nobr:contains("Finalized By")').closest('tr').show();
          } 					
       }
    
  10. Set the var FeedbackMatchingValue to the value which will show the hidden fields.
  11. Set the var thisDiv to the name of the Field that is used to show/hide the fields. Note that different types are just for different columns example Select or Input.
  12. Add the hide and Show codes. The code hides or show the table row (tr).
  13. Add the final function to the code. This part makes sure the functions runs when a users selects and/or reselects the option.
    $(document).ready(function() {
       $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
       });
    })(window.jQuery);
  14. Change the value after id^ to the field that contains the value on which field are being shown/hidden.
  15. The final code looks like this.
    $(document).ready(function()
       {
          $('nobr:contains("Finalized Date")').closest('tr').hide(); 
          $('nobr:contains("Finalized By")').closest('tr').hide();
    });
    
    (function($){
       function showHideRegionLocation() 
       {
       var FeedbackMatchingValue = 'Final';
       
       var thisDiv = $("select[title='Status']"); 
       var mmFieldValue = thisDiv.find("option:selected").text();
    		
       $('nobr:contains("Finalized Date")').closest('tr').hide(); 
       $('nobr:contains("Finalized By")').closest('tr').hide();
    			
       if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
       {
          $('nobr:contains("Finalized Date")').closest('tr').show(); 
          $('nobr:contains("Finalized By")').closest('tr').show();
       } 	
    }
    
    $(document).ready(function() {
       $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
       });	
    })(window.jQuery);
    

JavaScript: Edit Form

  1. The edit form is almost completely the same, only the last function is different.
  2. Open your favorite JavaScript Editor.
  3. Create a new JavaScript file called EditFormHideShow.js
  4. Follow the steps 3 – 12 from the chapter JavaScript: New Form.
  5. Add the final function to the code. This part makes sure the functions runs when a users selects and/or reselects the option.
    $(document).ready(function() {
       setTimeout(function() {
          showHideRegionLocation();
       }, 1000);
       $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
       });	
    })(window.jQuery);
    
  6. Change the value after id^ to the field that contains the value on which field are being shown/hidden.
  7. The final code looks like this.
    $(document).ready(function()
       {
          $('nobr:contains("Finalized Date")').closest('tr').hide(); 
          $('nobr:contains("Finalized By")').closest('tr').hide();
    });
    
    (function($){
       function showHideRegionLocation() 
       {
       var FeedbackMatchingValue = 'Final';
       
       var thisDiv = $("select[title='Status']"); 
       var mmFieldValue = thisDiv.find("option:selected").text();
    		
       $('nobr:contains("Finalized Date")').closest('tr').hide(); 
       $('nobr:contains("Finalized By")').closest('tr').hide();
    			
       if (mmFieldValue.indexOf(FeedbackMatchingValue) > -1) 
       {
          $('nobr:contains("Finalized Date")').closest('tr').show(); 
          $('nobr:contains("Finalized By")').closest('tr').show();
       } 	
    }
    $(document).ready(function() {
       setTimeout(function() {
          showHideRegionLocation();
       }, 1000);
       $("select[id^='Status'").on('blur', showHideRegionLocation).on('change', showHideRegionLocation);
       });	
    })(window.jQuery);

Adding JavaScript to a form

  1. Open the edit and/or new form of the list.
  2. Set the form in edit mode
  3. Add the Script Editor Web Part to the page
  4. Edit the SNIPPET and add the following code.

    <script src="../../SiteAssets/System/jquery-3.1.1.min.js" type="text/javascript"></script> 
    <script src="../../SiteAssets/System/EditFormHideShow.js" type="text/javascript"></script>
    
  5. Insert the code en Stop editing the form.
  6. Save the custom JavaScript HideColumns and the jQuery script in the correct location.
  7. The JavaScript will now run and hide or shows the field based on the selected value of the field Status.