If you have limited developer access to a SharePoint Team Site or no access to SharePoint Designer, this client-side workaround allows you to replace a set of standard text values with Unicode characters or images in a list view. As an example, this script is useful for adding graphical representations of status indicators in a simple project status dashboard.
Let’s assume we have a list named Projects with a column named Overall Status of type Choice. The Overall Status column contains the following text values:
- On Track
- At Risk
- Off Track
- Not Started
Step 1 – Add Content Editor Web Part
Add a Content Editor Web Part to the list’s standard view.
Step 2 – Add the Script to the Content Editor Web Part
Include the following script in the source. You may need to load the jQuery script earlier or adjust the timing of the function calls. I’ve noticed that sometimes the replacement doesn’t work as expected if there is a lot of data displayed in the grid. If I set a delay before the function is called, then the replacement happens as expected.
As a warning, if the list view displays a large amount of data, then this script may cause a noticeable delay as it cycles through the HTML to perform the search and replace.
This code also accommodates lists with groupings since the values to be replaced are not available at
$(document).ready. The code overrides the out-of-the-box function called
ExpCollGroup for expanding or collapsing groups. The code retains a reference to the out-of-the-box function which is called by the override function. The override function then performs the replacements.
Once the page is loaded, the values displayed in the Overall Status column are replaced with the appropriate Unicode character and associated color. The return value from the
ReplaceStatusText function can be easily modified to return other HTML strings such as IMG tags.