RYG Indicators in Any SharePoint List
You guys know me. When I say “this is the heat,” you know it is really the heat.
Our new best friend, Christope, at PathToSharePoint.com is bringing the heat.
What he has here is a web part that lets you poke a SharePoint status indicator into any SharePoint list. And he does it the way this robot has always liked to do things, by making SharePoint do what you want it to.
First create a list with a “status” column. Make it a choice and make your choices:
(1) Red (2) Yellow (3) Green
Now, we’re going to use the numbers in a calculated column so be sure to use the (x) format. The rest of the verbiage is irrelevant.
We’ve talked about composing HTML in calculated columns before. I’ve always just used a datasheet view to to click and drag over the column and pasted it into a CEWP in source mode and called it done. So add a calculated column and call it whatever you want but use this for the formula:
=”<DIV><IMG src=’/_layouts/images/KPIDefault-”&(3-RIGHT (LEFT(Status,2),1))&”.gif’ /></DIV>”
Note how the right\left string magic sheds everything but our status color index number.
Now, it just so happens that SharePoint’s silly little Red, Yellow, Green indicators are found at the URL embedded in the resulting img tag. They are numbered 0, 1 and 2 so the formula just subtracts our index number from 3 to get the necessary text and mashes is all together.
Add some items to your list and look at the view and you’ll see that the HTML appears flawlessly.
Then, Christophe seals the deal by giving us the JavaScript (here) that converts this gobbledygook into pretty little indicators at run time. Drop the JavaScript in a second CEWP and put it on the page and your calculated HTML is converted into a rainbow of colors.
Ouch, that’s hot.
-robot
Tags: