SharePoint 2013 Client Side Rendering (CSR)

4.50 avg. rating (91% score) - 2 votes

In SharePoint 2013 client-side rendering has been introduced, as the name implies it has to do with rendering. Client side rendering also known as CSR has a complete framework. Using CSR rendering can be performed on list views, display, new & edit forms. So in order to perform and pre or post rendering action is quite simple and possible using CSR. The following diagram shows how CSR works:

CSR

The above shows that we can make use of two events OnPreRender and OnPostRender. We can change header, body or footer using the CSR templates.  The overall template block available in SharePoint is as follows:

var options = {
  OnPreRender: "Method name to override this event",
  Templates: {
    View: "",
    Body: "",
    Header: "",
    Footer: "",
    Group: "",
    Item: "",
    Fields: {
      'Field Internal Name': {
          View: "",
          EditForm: "",
          DisplayForm: "",
          NewForm: ""
      },
      'Field Internal Name': {
          View: "",
          EditForm: "",
          DisplayForm: "",
          NewForm: ""
      },
    }
  },
  OnPostRender: "Method name to override this event"
};

Let’s take a simple example that we have to change the background color of a cell on AllItems.aspx according to the value it contains. Here are the steps:

Override Template

In our example, we will override a cell background in AllItems.aspx page. The below code will override the field template:

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'FieldtoOverride': {
            'View': MyTemplate
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function MyTemplate(ctx) {

    var FieldtoOverride = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    if (FieldtoOverride <= 5)
    {
        return "<div style='background-color: lightGreen;border: 2px solid green;width: 50px; text-align: center;'><strong>"
            + FieldtoOverride + "</strong></div>";
    }

    if (FieldtoOverride >= 5)
    {
        return "<div style='background-color: lightCoral;border: 2px solid red;width: 50px; text-align: center;'><strong>"
            + FieldtoOverride + "</strong></div>";
    }
}

The above code only overrides one field in the fields template and the view which is AllItems.aspx will take effect. The above code should be written in a JS file.

Save the Template

The best place to save it is in master page gallery, see below for the options to set in this:

JSUpload

Selected content type should be ‘JavaScript display template’. At the same time as we are targeting a view, so we should select View in target control type. Target scope to select depends on your selection, in this case by ‘/’ it means the complete site. The list template ID we have to tell in this case it’s a custom list for which the template ID is 100.

Associate JS to View

The last step is to associate the AllItems.aspx view to the overridden template in the JavaScript file we uploaded. One way to do this is to use JSLink and associate the JS file. JSLink is available with web part properties, however as we are targeting a default view, we do not want to open the file and edit it. So let’s use PowerShell script to do it:

$web = Get-SPWeb "http://site:port" 
$myview = $web.GetViewFromUrl("http://Site:Port/Lists/SomeList/AllItems.aspx")
$myview.JSLink = "~site/_catalogs/masterpage/MyTemplate.js"
$myview.Update()

The above PowerShell script will get the view and update the JSLink property in the view itself. This is how simple it is. There is another way too to get the file check-out and check-in. Once that is done this is show the cell in your view will look like:

View

As you may see the background of the column has been changed according to the value of the column itself. If the JSLink has not to be used, the same JavaScript code can be uploaded using Content Editor or Content Script web part on the same page as well.

Happy CSRing …

4.50 avg. rating (91% score) - 2 votes

W@rfi

Owner of this blog site. Have expertise on Microsoft technologies.

You may also like...

1 Response

  1. Mumtaz says:

    good job 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *