Thursday, April 1, 2010

Sharepoint Custom so called KPI

Hay Guys,

In general KPI most of the time we are having simple requirement.

Like if Risk is high or status is incomplete then it should show in RED.
If Low then Green and Medium then orange.

Same functionality we had done for listview webpart which show Red/green/yellow icon based on status.

Here is the example
In our list we had a column called criticality with dropdown values

High
Low
Medium

Check the screenshot below



And check another one after what we had done.



So you can see it looks like KPI
This is similar like
http://www.sharepointkings.com/2008/12/highlight-sharepoint-list-rows.html
but everyone is asking regarding this KPI so we had done this.

Now, What we had done
It’s nothing just a trick of javascript/jquery
Here is the code

$(document).ready(function() {
var strURL = window.location.href;
if ((strURL.toUpperCase().indexOf("Lists/Risk%20Management".toUpperCase()) != -1) ||
(strURL.toUpperCase().indexOf("Lists/Risk Management".toUpperCase()) != -1)) {
//alert('pp');
$(".ms-vb2:contains('High')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Red.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('Low')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Green.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('Medium')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/Amber.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
$(".ms-vb2:contains('No Criticality')").each(function() {
var tempDIV = document.createElement("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = "<img src='_LAYOUTS/SPKings/Images/NoData.gif' />"; //$(this).text();
//alert($(this).html());
$(this).text("");
$(this).append(tempDIV);

});
}

});


What we had done is we are checking URL
If it is out target list, then we apply javascript and as you can see we are finding High and replacing that with Red.gif.

Same way for other criticality also

You can use image from image library also. We had used images from layouts.

Don’t forget to include jquery.JS to make it work.

Guys, this is not recommended way for authentic KPI but for time being or for demo purpose where we are not having time and have to show a lot of thing this will act as icings on the cake. :)

No comments:




Share your SharePoint Experiences with us...
As good as the SharePointKings is, we want to make it even better. One of our most valuable sources of input for our Blog Posts comes from ever enthusiastic Visitors/Readers. We welcome every Visitor/Reader to contribute their experiences with SharePoint. It may be in the form of a code stub, snippet, any tips and trick or any crazy thing you have tried with SharePoint.
Send your Articles to sharepointkings@gmail.com with your Profile Summary. We will Post them. The idea is to act as a bridge between you Readers!!!

If anyone would like to have their advertisement posted on this blog, please send us the requirement details to sharepointkings@gmail.com