SharePoint JSLink: Custom field view on form

With JSLink you have the ability to quickly and easily change how a list views and forms are rendered. In this example I will explain how to change a field or fields located in the view, display, new or edit forms. The advantage of only changing the look and feel of specific fields is that all the default features and functions will remain functional. For example paging will still work and you will not need to create custom paging.

Solution

In this solution I will change the look and feel of the default % complete column.

  1. Create a custom SharePoint list called Progress Example.
  2. Add the default % complete column.
  3. Save the JSLink Percentage Complete to SharePoint.
  4. Link the JSLink to the form on new, edit, display and view web parts.
  5. The view and display form will be shown as a progress bar with the exact number shown.
  6. The edit en new forms will be shown as a progress bar that you change with the exact number shown.

Explanation

  1. The JSLink overrides the default rendering of the percentage complete (% complete) column.
  2. Each column and form that needs a different rendering needs to be linked to the new render function.
    You can link multiple forms to one function.
  3. In the following code the view and display column are linked to the same function called percentCompleteViewDisplayFiledTemplate.
  4. The edit and new form are linked to the function called percentCompleteEditFiledTemplate.
    (function  ()  
        // Create object that have the context information about the field that we want to change it's output render  
       var overrideNameField  =  {};  
       overrideNameField.Templates  =<  {};  
       overrideNameField.Templates.Fields  =  {  
            // Apply the new rendering for Priority field on List View 
            "PercentComplete": {    "View": percentCompleteViewDisplayFiledTemplate,
                                    "EditForm": percentCompleteEditFiledTemplate,
                                    "NewForm": percentCompleteEditFiledTemplate,
                                    "DisplayForm": percentCompleteViewDisplayFiledTemplate
            }
         };  
         SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideNameField);
    })(); 
    
  5. In the functions you can rewrite how the column is rendered.
  6. The function percentCompleteEditFiledTemplate rewrites the rendition.
    // This function provides the rendering logic for New and Edit forms for percentage complete column
    function percentCompleteEditFiledTemplate(ctx) { 
     
      var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx); 
     
        // Register a callback just before submit. 
        formCtx.registerGetValueCallback(formCtx.fieldName, function () { 
            return document.getElementById('inpPercentComplete').value; 
        }); 
     
        return "<input type='range' id='inpPercentComplete' name='inpPercentComplete' min='0' max='100' oninput='outPercentComplete.value=inpPercentComplete.value' value='" + formCtx.fieldValue + "' /> <output name='outPercentComplete' for='inpPercentComplete' >" + formCtx.fieldValue + "</output>%"; 
    } 
    
  7. The result is an input slide bar instead of the default text box.

SharePoint JSLink: Paging

When you use JSLink not all default SharePoint list features will be generated automaticly, for example paging will not be available. When you require paging you need to code this yourself. In this example I will create an example list with no custom styling besides the custom paging.

Solution

  1. Create a custom list called Paging Example with a title field.
  2. If required changed the fields to be shown.
  3. Create a page and add the Paging Example web part to the page.
  4. Create the JSLink file called BasicPaging.js
  5. Link the JSLink to the web part to load the BasicPaging.js

Explanation

  1. The JSLink overrides the default Templates (Header, Item and Footer).
  2. The paging has been added to the Footer template.
  3. The following variables are used to get the first and last row and the previous and next hyperlinks.
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref;
    var next = ctx.ListData.NextHref;
    
  4. The following code will render the paging are required and uses the default SharePoint classes and images.
    var footerHtml = "<div class='Paging'>";
    footerHtml += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
    footerHtml += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
    footerHtml += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
    footerHtml += "</div>";
    footerHtml += "</div>";
    return footerHtml;  
    

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 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.