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 images in a list view. As an example, this script is useful for adding graphical representation of status indicators in a simple project status dashboard.

Let’s assume we have a list named Projects with a column named Status of type Choice. The Status column can contain the following text values:

  • On-Track
  • Minor Issues
  • Off-Track
  • Not Started

We have also uploaded a set of four corresponding images named green.jpg, yellow.jpg, red.jpg and blue.jpg to an image library in the Team Site. When the list view is displayed for Projects, the text values should be replaced with these corresponding images.

  • On-Track – green.jpg
  • Minor Issues – yellow.jpg
  • Off-Track – red.jpg
  • Not Started – blue.jpg

Add a Content Editor Web Part to the list’s standard view and include the following script in the source. Once the page is loaded, the values displayed in the Status column are replaced with the appropriate image.

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.

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

<script language='javascript'>
$(document).ready(
  function() {
    $('td.ms-vb2:contains("On-Track"), ' +
      'td.ms-vb2:contains("Minor Issues"), ' +
      'td.ms-vb2:contains("Off-Track"), ' +
      'td.ms-vb2:contains("Not Started")').each(
        function() {
          $(this).hide();
          $(this).html(ReplaceColorTextWithImage($(this).html()));
          $(this).show("slow");
        }
    );
  }
);

function ReplaceColorTextWithImage(strColorText) {
  var strColorImage = "";

  switch(strColorText) {
    case "On-Track":
      strColorImage = "green";
      break;
    case "Minor Issues":
      strColorImage = "yellow";
      break;
    case "Off-Track":
      strColorImage = "red";
      break;
    case "Not Started":
      strColorImage = "blue";
      break;
  }

  return "<img src='/images/" + strColorImage + ".jpg' border='0'>";
}
</script>

If the list contains groups, then the code would need to be modified slightly since the values to be replaced are not available at $(document).ready. The out-of-the-box function used by SharePoint to handle expanding or collapsing groups is called ExpCollGroup. That replacement function below overrides the out-of-the-box function, but calls the out-of-the-box function through a saved reference. The replacement function then performs the work done in $(document).ready in the original example above.

var defaultExpCollGroupMethod = ExpCollGroup;

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

function FindTextToReplace() {
  $('td.ms-vb2:contains("On-Track"), ' +
    'td.ms-vb2:contains("Minor Issues"), ' +
    'td.ms-vb2:contains("Off-Track"), ' +
    'td.ms-vb2:contains("Not Started")').each(
      function() {
        $(this).hide();
        $(this).html(ReplaceColorTextWithImage($(this).html()));
        $(this).show("slow");
      }
  );
}

If the list also includes total rows containing the text values to replace, an additional condition is needed in the FindTextToReplace function to exclude those elements, e.g. $(‘td.ms-vb2’).not(‘:contains(“Sum=”‘).

Leave a Comment