Conditional formatting of lists in SharePoint 2013 using client-side scripts

A step-by-step guide

Introduction

When your site is hosted on SharePoint 2010, you can use an out-of-the-box feature of Microsoft SharePoint Designer 2010 to apply conditional formatting rules to SharePoint lists. However, after you upgrade to SharePoint 2013 this method is no longer available, because Microsoft retired the functionality in SharePoint Designer 2013. Therefore, we need to employ a completely different method to achieve the same effect: conditional formatting is applied by writing client-side scripts and linking to them from a Web Part added to the SharePoint page with the list.

Requirements

Before implementing our solution, we have a task list with no formatting, which is illustrated in the screenshot below:

Our objective is to apply the following conditional formatting rules that will dynamically apply font and background styles to table cells and rows depending on the current values in the “Status” column:

  • Format for ‘Informational’ tasks: blue heading across the whole row
  • Format for ‘Not Started’ tasks: red font in Status column
  • Format for ‘In Progress’ tasks: yellow highlight in Status column
  • Format for ‘Complete’ tasks: green font in Status column
  • Format for ‘Cancelled’ tasks: strikethrough across the whole row

In addition, the code should preserve/reapply conditional formatting after list filters are applied or cleared.

Prerequisites

At least basic knowledge of the following technologies is required in order to understand and maintain the scripts:

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • SharePoint lists and Web Parts

You must prepare the following before you begin implementing the solution:

  • SharePoint list to be formatted
  • Permission to edit the page containing the list
  • A local copy of the jQuery library (it can be downloaded from this page)

Note:

If the list is expected to be used only on computers with Internet access, you can reference a jQuery library hosted on a content delivery network (CDN), such as Google Hosted Libraries. However, in our case the solution should not require an Internet connection, because it is expected to be used on PCs in meeting rooms, which don’t have Internet access. For this reason, we will reference a jQuery library saved on our own SharePoint site.

Implementation

All files with our code, as well as a local copy of the jQuery library, are saved in the “Scripts” folder located in the “Site Assets” library on our SharePoint site. The required files are as follows:

  • “jquery-3.1.0.min.js”
    This is the jQuery library that will be referenced.
  • “HxH_formatting_script.js”
    This file contains the JavaScript code for conditional formatting.
  • “HxH_formatting_links.html”
    This file contains references to the above two files. We will link to it from each SharePoint page containing a list that we want to format according to the rules described above.

How the script works

In this section, we will go through the code and explain how it works.

First, we define a JavaScript function named “listFormat”. It implements the formatting rules according to the requirements specified earlier on this page. For each rule, we perform the following two steps:

Step 1:

Select the HTML DOM (Document Object Model) nodes that meet the specified criteria, for example:

This statement uses the jQuery “:contains()” selector to select all <td> HTML elements (table cells) that have the “ms-vb2” CSS class and contain the word “Informational”. Please note that the text must have matching case to be selected.

Step 2:

Apply the desired format to the selected elements, for example:

This statement uses the jQuery “.css()” method to set the specified CSS property for all elements selected in the first step. Please note that in this example the requirement is a “blue heading across the whole row”, which means that we need to modify the style property of the table cell’s parent element. For this reason, we use the jQuery “parent()” method to select the table row (the corresponding <tr> element). The CSS property name in this example is “background-color” and the value to set for the property is “SkyBlue”.

The remaining rules are implemented in a similar way, but use different CSS property names (such as “color” and “text-decoration”). Please note that the “parent()” method is not used in cases where a single table cell needs to be formatted.

The following code snippet invokes the “listFormat” function defined above once the page Document Object Model (DOM) is ready for JavaScript code to execute:

Finally, the following statement allows us to preserve conditional formatting after list filters are applied or cleared:

Note:

We could have used the following equivalent syntax instead of the above statement:

The statement invokes the “listFormat” function every time the “hashchange” event fires. It happens when the fragment identifier of the URL has changed (the part of the URL that follows the # symbol). In the context of SharePoint lists, this is useful because applying or clearing a filter causes a hash change. Therefore, we can meet the “persistent formatting” requirement by using the JavaScript “addEventListener()” method to register the “listFormat” function as a listener for “hashchange” events on the “window” object.

Referencing the script on the SharePoint page with the list

Now we are ready to link to the script from the SharePoint page that needs to be formatted. We will do it by creating an HTML file containing the following two <script> elements:

The first line loads the jQuery library and the second line references the JavaScript code discussed above. The “src” attributes specify the paths and names of our JavaScript files saved in the “Scripts” folder. Please note that this file doesn’t need to be a full HTML document — elements such as <html>, <head> and <body> are redundant.

Finally, we need to include a reference to this HTML file in the SharePoint page with the task list. Please follow these steps:

  • Open the page in question
  • Click the “Settings” (gear) icon in the top right corner
  • Click “Edit page”
  • Click “Add a Web Part”
  • Select the “Content Editor” part from the “Media and Content” category
  • Click the “Add” button
  • In the Content Editor Web Part Menu, select “Edit Web Part”
  • In the “Content Link” field, paste the URL of the “HxH_formatting_links.html” file
  • Click the “Apply” button
  • Click the “Stop Editing” button on the PAGE ribbon tab in the top left corner

Result

After implementing our solution, the task list is formatted according to requirements, which is illustrated in the screenshot below: