I received a question about the built in KPI in SP 2010. The user added the KPI to a list view that was filtered with a Query String Filter, but the KPI didn’t respect the filter and kept calculating based on the unfiltered view.

I don’t know if you can do anything about the built in KPI, but It’s a good opportunity to write some JavaScript!

Here is a solution you can drop in any list view to create a KPI that respects both Query String Filters and filters applied by the end user to the columns. The solution requires SP 2010 or 2013 (foundation or server), as it uses the JavaScript Client Object Model. It does NOT require jQuery.

Get the code for the file “SPJS-KPI.js” from here

Upload it to a document library where all users have read access, and add a HTML Form Web Part with this code in the list view or the web part page:

<table cellpadding="3" cellspacing="0">
	<tr style="font-size:24px;">
		<td valign="middle">KPI attached to list view:</td>
		<td valign="middle" id="kpi_1" style="height:55px;"><img style="margin:12px;" src="/_layouts/images/hig_progcircle_loading24.gif"></td>	
	</tr>

</table>
<script type="text/javascript" src="/SPJS/SimpleKPI/SPJS-KPI.js"></script>
<script type="text/javascript">

ExecuteOrDelayUntilScriptLoaded(function(){
	// KPI example 1
	var args = {
		// Placeholder for the KPI must be an existing HTML element in the page with this ID
		"placeholderID":"kpi_1",
		// Target list and base URL
		"listGUID":_spPageContextInfo.pageListId,
		"listBaseUrl":_spPageContextInfo.webServerRelativeUrl,
		// Target view - must be filled in to use "consumeFiltersFromList"
		"consumeFiltersFromViewGUID":"23233f84-531c-4096-b23b-d6711f117a2d",
		// URL Filter
		"URLfilterKey":"",
		"URLfilterTargetField":"",
		// KPI Indicator field and value
		"kpiIndicatorField":"Reviewed",		
		"kpiIndicatorFieldValue":true,
		// Text
		"noFilterMessage":"The URL filter \"{0}\" is missing.",
		"noItemsFoundMessage":"No items match the filter",
		// Threshold
		"greenThreshold":98,
		"yellowThreshold":80,
		// Icons
		"greenIcon":"/_layouts/images/kpidefaultlarge-0.gif",
		"yellowIcon":"/_layouts/images/kpidefaultlarge-1.gif",
		"redIcon":"/_layouts/images/kpidefaultlarge-2.gif"		
	};	
	spjs.kpi.init(args);	
}, "sp.js");
</script>

Update the link to the file “SPJS-KPI.js” in the code example.

• placeholderID: This is the ID of a HTML element in the page where you want the KPI to appear.
• listGUID: This is the list GUID of the list you want to attach the KPI to. If you are using a list view from the list itself (not a web part page), you can use the variable from the example. If not, add the GUID to the list here. To find the GUID, go to a list view, right click and view source. Look for “pageListId”.
• listBaseUrl: If the KPI list is in the same site, use the variable from the example. If not, add the path like this: “/Sites/NameOfTheSite”
• consumeFiltersFromViewGUID: To have the filter consume the filters from a list view, add the GUID of the view you are applying the filter to here. Find the list GUID by filtering the view and look at the URL. In SP 2010 you see “View=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx”, in SP 2013 you see it like this: InplviewHashxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx. The GUID is where the x’es are.
• URLfilterKey: If you are using an URL filter, this is the key from the URL like this: …/AllItems.aspx?key=value
• URLfilterTargetField: This is the FieldInternalName of the field in the list where the filter is applied.
• kpiIndicatorField: This is the FieldInternalName of the field you calculate the KPI from.
• kpiIndicatorFieldValue: This is the value found in the field you calculate the KPI from. If it is a Yes/No column, use boolean value true or false.
• greenThreshold: The percentage needed to show the green icon.
• yellowThreshold: The percentage needed to show the yellow icon (the rest is red).
• greenIcon, yellowIcon and redIcon: URL to the images.

Ask if you need help or you find a bug.

Alexander