Replace Text With Images in SharePoint View Using jQuery

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
• Complete
• 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.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<script language='javascript'>
var defaultExpCollGroupMethod = ExpCollGroup;

ExpCollGroup = function() {
  defaultExpCollGroupMethod.apply(this, arguments);
  FindTextToReplace();
};

function FindTextToReplace() {
    $('td.ms-vb2:contains("On Track"), ' +
      'td.ms-vb2:contains("At Risk"), ' +
      'td.ms-vb2:contains("Off Track"), ' +
      'td.ms-vb2:contains("Complete"), ' +
      'td.ms-vb2:contains("Not Started")').each(
        function() {
          $(this).hide();
          $(this).html(ReplaceStatusText($(this).text()));
          $(this).show("slow");
        }
    );
}

function ReplaceStatusText(strStatusText) {
  var strReplacementChar = "";
  var strReplacementColor = "";

  switch(strStatusText) {
    case "Not Started":
      strReplacementChar = "&#8210;";
      strReplacementColor = "#000000";
      break;
    case "On Track":
      strReplacementChar = "&#11044;";
      strReplacementColor = "#84C28A";
      break;
    case "At Risk":
      strReplacementChar = "&#9650;";
      strReplacementColor = "#F9D087";
      break;
    case "Off Track":
      strReplacementChar = "&#9670;";
      strReplacementColor = "#F78272";
      break;
    case "Complete":
      strReplacementChar = "&#9675;";
      strReplacementColor = "inherit";
      break;
  }

  return "<span style='color: " + strReplacementColor + ";'>" + strReplacementChar + "</span>";
}

$(document).ready(FindTextToReplace());

</script>

Result

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.