Say you have a situation where you need do have some kind of KPI for a list view web part, but you can't use SharePoint Designer (SPD) or you just don't have time to make a custom template in XSL. Time to think outside of the Microsoft box. Having web design skills at the core of what I'm good at in development, I look at the SharePoint Web Part after it's rendered to the page, which is where jQuery takes over.
Enter jQuery
It actually isn't too bad to do. Below is a code snippet example that calls the jQuery library from Google's CDN on the fly, and then has three commands. Each command is looking in the SharePoint CSS class of "ms-vb2" to see if it contains a color. The color could be any term or phrase that you would be looking for (e.g. "House", "On Target", etc.) When the term is found within that class, it will remove the text in the TD, and replace it with a color box.
How to put into the page:
The easiest and most portable way to put this kind of code on a page (assuming you have no elevated privelages to place code on a server or in a page layout / master page), is within a Content Editor Web Part -- a SharePoint Admin's worst nightmare (with developers like me on the other side).
Steps:
1) Add Content Editor Web Part (CEWP) to the page
2) Go to the HTML Viewer for the CEWP
3) Paste the code below
4) Modify the Web Part properties of the CEWP and put the Chrome to "None" (to hide the title bar as it's not necessary).
5) Add other web parts that have the terms in which you are looking
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('.ms-vb2:contains("Green")').html("<div style='margin: 2px; background-color: green; border: 1px solid #999; width:50px; height: 15px;'></div>");
jQuery('.ms-vb2:contains("Yellow")').html("<div style='margin: 2px; background-color: yellow; border: 1px solid #999; width:50px; height: 15px;'></div>");
jQuery('.ms-vb2:contains("Red")').html("<div style='margin: 2px; background-color: red; border: 1px solid #999; width:50px; height: 15px;'></div>");
});
</script>
The Summary
This should get you going on using jQuery to "enhance" your pages in SharePoint 2010 as it doesn't require any programming tool like Visual Studio, etc., plus will work just fine in Office 365. Also, I'm calling jQuery like "jQuery." instead of just using the dollar sign "$" because I noticed that SharePoint 2010 is doing some additional things with the "$" for jQuery and will break our jQuery code when the dollar sign is used.
Cheers!
