Protiviti / SharePoint Blog

SharePoint Blog

December 15
Create a Simple Christmas List KPI

Key performance indicators or KPIs are a great way to measure standing and evaluate success. Excel and Performance Point are both great tools to utilize when building KPIs. However, sometimes a full scale BI tool may be more than what you need. SharePoint 2013 has now made it easier than ever to create a simple KPI in a list view web part. The JSLink attribute can be overridden directly from the miscellaneous section of your web part.

With the holidays coming up, I thought we could have a little fun with KPIs and Santa’s Naughty or Nice list. Follow the instructions below to create a simple list KPI.

Part 1 – Creating the list

Navigate to Site Contents and select “Add an app”

Becca 12.15.141.PNG

Choose a custom list:

Becca 12.15.142.PNG

Give your list a name and select “Create”:

Becca 12.15.143.PNG

Navigate to your new list once it is created. On the list tab, select “List Settings”:

Becca 12.15.144.PNG
Once you have the rest of your columns configured, you are ready to add your KPI column. Click on “Create Column”:

Becca 12.15.145.PNG

Choose a name for your column and select choice for the type. 

Becca 12.15.146.PNG

Fill out your choices and select ok:

Becca 12.15.148.PNG

Once you have your list configured, it’s time to add the data:

Becca 12.15.149.PNG

You may be thinking, this seems like an ordinary list and you’re right. Currently this is all out of the box SharePoint Functionality. Here comes the fun part of creating the JavaScript.

Here is an example of what your JavaScript could look like:

Becca 12.15.1410.PNG

The main thing you need to know is the internal name of your field. In this example, my internal name is “Behavior”. Place this JavaScript where it is easily accessible, like the style library:

becca style.PNG

The hardest part is over, now on to the finishing touches. On a page of your choosing, add a list view web part for the list you just created:

Becca 12.15.1411.PNG
Becca 12.15.1412.PNG

Edit the web part and add the link to your new JavaScript file under Miscellaneous:

~sitecollection/Style Library/behaviorField.js

Becca 12.15.1413.PNG

Select ok and save your page:

Becca 12.15.1414.PNG

As you can see, it is really easy to interpret who should be expecting presents this year under their tree. Now that you have the basic idea, it would be easy to update the script to include images.

Quick Launch

© Protiviti 2020. All rights reserved.   |   Privacy Policy