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:
“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:
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.
7 Responses
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
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/
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
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.
this is a great tip, however if the list is grouped then this concept does not work, i wonder if anyone has any guidance on what to do in a grouped list
i have figured it out , you have to prefix the row that has the content (not the group title) and then work with that prefixed row to find the column
I found this article that explains in “SharePoint 2013” how to do html from a calculated column: http://stackoverflow.com/questions/27636293/sharepoint-list-how-to-add-hyperlinks-to-texts-in-a-column.
So for a list I just created, I created an Icon choice field and a user could select either Document or Film. My calculated column then had the following formula to display the appropriate image:
=IF(Icon=”Document”,””,””)
Whether it works in SP2010 I don’t know, but at least it does in 2013.
Comments are closed.