Conditional formatting of lists in SharePoint 2013 using client-side scripts
A step-by-step guide
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.
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.
At least basic knowledge of the following technologies is required in order to understand and maintain the scripts:
- 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)
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.
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:
This is the jQuery library that will be referenced.
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.
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.
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.
Finally, the following statement allows us to preserve conditional formatting after list filters are applied or cleared:
We could have used the following equivalent syntax instead of the above statement:
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:
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
After implementing our solution, the task list is formatted according to requirements, which is illustrated in the screenshot below: