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.

14 thoughts on “Replace Text With Images in SharePoint View Using jQuery”

  1. This is great and works on my list. However when i use it in a webpart page using a list view it does not work. Any ideas

  2. Just one more thing. How can I get this to work when I apply grouping to the list. Sorry for all of the questions

  3. The code would need to be modified slightly to accommodate grouping since the values to be replaced will not be available at $(document).ready. I think the out-of-the-box function used by SharePoint to handle expanding or collapsing groups is called ExpCollGroup. Essentially, you need to override that function. The new function will call the out-of-the-box function through a saved reference and then perform the work done in $(document).ready in my original example.

  4. Sorry the code is fine it was me…..However if I add totals to the columns it displays an empty box with an X in the middle.. Any idea?

    Thanks

  5. You need to add a condition to the ReplaceColorTextWithImage function that excludes anything where strColorText begins with Sum. You could also modify the FindTextToReplace function to exclude anything that contains Sum with something like $(‘td.ms-vb2’).not(‘:contains(“Sum=”‘).

  6. Hi John,

    I have a question about this thread, but I cannot paste code into the comments. Is it possible for you to email me?

    Thanks

  7. Amazing article John. Thanks a lot.

    This is by far the BEST technique I’ve found to replace the existing list-view values :). Almost all other articles talk about the edit form and not the display form.

    Guess what, I am gonna go through all of your other posts (SharePoint jQuery related only, of course :)) in a day or two. I’ve already added https://www.dalesandro.net/author/john/ in my fav ;).

  8. Greetings John – I’ve been scouring the web for just such a solution! Is there a way to display text when hovering over the image? Hopefully you’re still monitoring this string, and thanks in advance!

  9. Yeah…I can make an image tag appear, but I can’t figure out how to make the tag dynamic so that it displays the strColorImage.

  10. Modify the string returned by the procedure to include a title tag.

Leave a Comment