How to Configure Key Performance Indicators (KPIs) Using #qWebParts for #SharePoint

Key Performance Indicators are valuable for teams, managers, and businesses to evaluate quickly the progress made against measurable goals. By using SharePoint KPIs, you can easily visualize where or how far you are ahead or behind your goals.


Say your organization elected to start tracking help desk tickets using SharePoint and you, as a technician lead, were assigned to implement this change.


As a technician lead, in addition to creating the help desk ticket list and configuring the appropriate metadata, workflows, groups and permissions for users and technicians who will interact with the list, you also realize that a technician’s best utilized time would eventually involve addressing the tickets based on their Service Level Agreements (SLAs). In most organizations, SLAs are typically represented by the severity level of the ticket. Therefore, you realize that a list view with a visual representation (KPI) to quickly identify the severity of the tickets would ultimately improve the technicians’ time utilization.


Let’s walk through the four step process you’d have to go through to configure such a KPI using Quest Web Parts for SharePoint. Or, if you’re more of a visual learner, check out this five-minute tutorial video.


  1. Choose your visual cues and upload them to a SharePoint document library
  • Sample Severity column values: Work Slowed Down, Question, Work Halted, Annoyance
  • Sample Severity column visual cues:                       
  • Compose your JavaScript and upload it to a SharePoint document library
  • Please find sample script attached (DisplaySeverity.js, right click and save it to disk)
  • Save your JavaScript as “.js” file before you upload it
  • Configure a content editor web part on a SharePoint page to call the script
  • Switch to the SharePoint page where you want to display the tickets
  • Insert a SharePoint Content Editor Web Part to the page
  • Enter the address to the JavaScript.Js in the Content link parameter
  • Example: /sites/site/SiteAssets/DisplaySeverity.js
  • Apply your changes and exit the web part
  • Configure the Quest Web Part to consume the visual cues:
  • Ensure you are on the same page as the step above
  • Insert a Quest qListView Web Part
  • Select EzEdit and switch to the Display tab
  • Next to Viewed Lists click on Edit and navigate to and select your help desk tickets list
  • Click Ok and Save
  • Next to Display Fields click on Edit and select the columns you want to display on the view
  • Scroll towards the bottom and click on Edit next to the <custom1> column
  • This will be the placeholder for the visual cues
  • Provide a Field Name, enter ‘ ’ for title, enter ‘10px’ for the width, and enter ‘<script>DisplaySeverity('<%Severity%>');</script>’ for Calculated Value
  • The calculated value example above references the script and column it effects and it ensures that the script is being called
  • Click Ok, Save, and OK to save your changes


The outcome of the above should look something like:

In addition to better customer service, employee satisfaction, increased user adoption and ultimate well-being, the procedure we went through exemplifies the benefits of Quest Web Parts for SharePoint. With Quest Web Parts for SharePoint, you can unleash the power of SharePoint quickly and easily without relying on expensive development resources.


Happy KPIing!


Ghazwan Khairi - Quest SharePoint Solutions Expert

Personal SharePoint Quester video blog can be followed @SPQuester

<script type="text/JavaScript">
function DisplaySeverity(severity)
	var imgSrc = '';
	if (severity == '(1) Work Halted')
		imgSrc = '';
	else if (severity == '(2) Work Slowed Down')
		imgSrc = '';
	else if (severity == '(3) Annoyance')
		imgSrc = '';
	else if (severity == '(4) Question')
		imgSrc = '';

	return '<img alt="' + severity + '" src="' + imgSrc + '">';