In SharePoint 2013 a JSLink property was added to several objects to use client side scripting to modify the output. In this step-by-step I will show, how the background color of a column in a list view could be modified, depending on the value of the field in this column. For the example I have an issues list and I want to have the output of the Priority column with a red background, when the value (the priority) is ‘(1) High’, but only when the Issue Status is ‘Active’.

This task could be done with the JSLink property of the web part that is used to display the content of the list. In this property, the link to a JavaScript file is added, the file itself is stored in the masterpage gallery.

In our script we need the value of the columns Issue Status and Priority to decide, whether the background should be colored or not. The first thing we need, is the internal name of these two fields. The steps to get the necessary information could be found here.

In our case we have the internal name “Status” for the field with the display name “Issue Status” and the internal name “Priority” for the field with the display name “Priority”.

The next step is, to create the file with the JavaScript code that is used to modify the output in our output.

(function () {
  var priorityFieldCtx = {};

  priorityFieldCtx.Templates = {};
  priorityFieldCtx.Templates.Fields = {
    "Priority": { // for this field we need a special handling
                  "View": PriorityFieldViewTemplate  // this function will be used to handle the output for the field
                }
  };

  // register the template for rendering
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFieldCtx);
})();

function PriorityFieldViewTemplate(ctx) {
  var _priorityValue = ctx.CurrentItem.Priority;  // get the value of the Priority field of the current item
  var _statusValue = ctx.CurrentItem.Status;  // get the value of the Status field of the current item

  if (_statusValue == "Active") {  // we need only to color, if the issue is still active
    if (_priorityValue == "(1) High") {  // we only want to color the high priority items
      // modify the returned value by adding some html (span) and some css (background-color, padding)
      return "<span style="background-color: red; padding-left: 10px; padding-right: 10px;">" + _priorityValue + "</span>";
    }
  }

  return _priorityValue;
}

The script contains some inline comments as description on what we are doing.

This script file needs to be uploaded to the masterpage gallery. To do this, go to the Site Settings page. In the Web Designer Galleries section, we have the link to the master page gallery.

Now upload the file with the JavaScript to this gallery.

Next, we have to set some properties for the file, we uploaded. Directly after the upload, the edit form opens, and the first thing we do is, to modify the content type for the new file to “JavaScript Display Template”.

This will change the available fields in the edit form.

Next the value for the Target Control Type needs to be set to “View” by selecting the value from the combobox.

Next we have to set the value for the property Standalone to “Override”

And the value of the property Target Scope” to the relative path of our site

Last we have to click the Save button to store the metadata of the file.

The last thing we need to do is, to configure the properties of the web part on the page with the view. So, we open the view of our Issues list in the browser. On the page click the settings icon to switch to the edit mode. From the context menu of the web part select Edit Web Part.

In the Miscelanious section of the web part properties, we find the property JS Link at the bottom. Fill the field with a link to the JavaScript file, like in this example:

~site/_catalogs/masterpage/Priority_Coloring_Script.js

Click the OK button in the property pane of the web part properties and then click Stop Editing in the ribbon. That will show the result.

You might see in the image with the result of our modification that there is a line break withing the output of the Priority column. To have the value of the column within one single line, we can modify the JavaScript file a little by adding “class=’ms-noWrap'” to the return string as shown in the following script sample:

(function () {
  var priorityFieldCtx = {};

  priorityFieldCtx.Templates = {};
  priorityFieldCtx.Templates.Fields = {
    "Priority": { // for this field we need a special handling
                  "View": PriorityFieldViewTemplate  // this function will be used to handle the output for the field
                }
  };

  // register the template for rendering
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFieldCtx);
})();

function PriorityFieldViewTemplate(ctx) {
  var _priorityValue = ctx.CurrentItem.Priority;  // get the value of the Priority field of the current item
  var _statusValue = ctx.CurrentItem.Status;  // get the value of the Status field of the current item

  if (_statusValue == "Active") {  // we need only to color, if the issue is still active
    if (_priorityValue == "(1) High") {  // we only want to color the high priority items
      // modify the returned value by adding some html (span) and some css (background-color, padding)
      return "<span class="ms-noWrap" style="background-color: red; padding-left: 10px; padding-right: 10px;">" + _priorityValue + "</span>";
    }
  }

  return _priorityValue;
}

This will bring the expected result.

The handling when doing the same modifications for other views is the same:

1. Get the internal names of the fields you need

2. Prepare the file with the JavaScript

3. Upload the file to the masterpage gallery and set the conent type and the properties

4. Set the value for the JS Link property of the web part

So, in theory it is a straight forward process, when we need to modify the appearance of values in a view.

 

Advertisements