My client had a list of projects in SharePoint 2010. He wanted to show their statues in a more clear way, and asked me to replace project status names with images(icons).

This is the list of projects, with names of project statuses:

Status Text 2

“Project status” column is a lookup column and can contain the following values:

  • Good
  • Attention
  • Critical

I decided to use jQuery to do this. This is what I’ve come up with:

$('table[summary="Projects "] tbody tr td:nth-child(5)').each(function () {
if ($(this).find(">:first-child").text() == "Attention") {
$(this).html('<img alt="" src="/Images1/Cloud.png" width="24px" height="24px" />');
$(this).css("text-align", "center");
}
});

$('table[summary="Projects "] tbody tr td:nth-child(5)').each(function () {
if ($(this).find(">:first-child").text() == "Good") {
$(this).html('<img alt="" src="/Images1/Cloud-Sun.png" width="24px" height="24px" />');
$(this).css("text-align", "center");
}
});

$('table[summary="Projects "] tbody tr td:nth-child(5)').each(function () {
if ($(this).find(">:first-child").text() == "Critical") {
$(this).html('<img alt="" src="/Images1/Cloud-Thunder.png" width="24px" height="24px" />');
$(this).css("text-align", "center");
}
});

The script has three parts, since there are three possible values; here is a template for each part:

$('table[summary="{list_name} "] tbody tr td:nth-child({column_index})').each(function () {
        if ($(this).find(">:first-child").text() == "{text_to_replace}") {
            $(this).html('<img alt="" src="{image_url}" width="24px" height="24px" />');
            $(this).css("text-align", "center");
        }
    });

The first variable ({list_name}) is the list name (in my case: “Projects”) but if you look more closely, you will notice that there is an additional space just behind it (before the closing quotation marks). I am not sure why this is the case, but the html code of a list view contains this space, so the script would not work without it.

Next variable ({column_index}) is the column index. You have to take care you counted in the check box column (or any other columns like “Attachments”) which could appear before named columns.

Next variable ({text_to_replace}) is the string to replace in the specified columns (in my case, particular status name).

The last variable ({image_url}) is the source for the image we want to insert. (I used an image library so the path is relative.)

This is how it looks with icons:

Status Icons

To deploy the jQuery code I used a custom web part, which is added to the page containing the projects view. Just above the projects view you can see its title: “Project Statuses Visualization”. The jQuery code runs on this page after the project list is rendered.

Of course, this use case makes sense only for the lookup columns referencing lists which are static and cannot be altered by end users.

4 Comments

  1. Adnan Says

    Hi,
    Just one clarification. By custom web part, do you mean you have inserted this script in the content editor web part and placed the web part on the list page?

    What i need to understand is, we dont need anything to be installed on client machines to write / execute jquery do we?

    regards,
    Adnan

  2. Toni Frankola Says

    Hi Adnan,

    You don’t need to install anything on client machines.

    You just need to make sure that the jQuery code loads on your list page. I have done this programmatically but, sure, you can also add it manually as you suggested.

    If you get stuck, take a look at the “Recipe 3”:
    http://www.threewill.com/2012/01/adding-jquery-to-sharepoint/

  3. Sandeep Says

    Hi,
    Alternatively, I guess you can create a calculated column that displays indicators/images based on the status field value with a simple formula. This is the OOB feature.

    …Sandeep

  4. Toni Frankola Says

    Hi Sandeep,

    I just tried to do what you suggested but calculated field can not return an image, so I guess the way to go is to return HTML code referencing the image. Anyway, so far I haven’t found a way to resolve it without embedded code which requires a web part containing an additional JavaScript (check out this article: http://sharepointpratik.blogspot.com/2011/06/add-image-to-custom-list-with_30.html). If there is a simpler solution you know about, please feel free to share it.

Leave a Reply