KPI and Metrics dashboard for SharePoint modern (with targeting)

How-Tos & Manuals
1

KPI and Metrics dashboard web part helps your employees see the company and individual performance at a glance.

if you do not require audience targeting for KPIs, consider using simplified version of this web part: KPI and Metrics web part (without targeting)

An example of how the web part can look like:

image
image1232×151 14.4 KB

Or this:

image
image992×157 36.1 KB

Setting up the web part

Look for this icon to find this app in SharePoint Online:
image

To configure the List from which the data will be loaded from, follow these steps:

On the site where you need to show the web part, create a new SharePoint list with the title [KPI] with the following fields:

  1. Title [default / no need to create]
  2. Value [single line of text]
  3. UpFromBefore [Yes/No]
  4. Details [single line of text]
  5. DisplayOrder [Number]
  6. Color [single line of text]

NOTE: If you need to show several KPI web parts, you can create as many lists as needed. Simply give each list a new name and connect the web part to the right list using web part properties.
image

Adding/Updating KPI content

To create a new KPI metric, add a new item in the KPI list:

  1. Title - this will be displayed at the top of the metric (Sales, Gift Card Redemption, Cancellations etc)
  2. Value - this is the metric displayed in large font. It can support text or number format
  3. UpFromBefore - when ticked (Yes), the [up] arrow will show next to the metric. Otherwise, the [down] arrow will show
  4. Details - optional text below the metric (this week, this month, this quarter, or any other qualifier)
  5. DisplayOrder - order in which you want the KPI to appear
  6. Color - HEX color for each KPI item. This can be set to a default value and hidden.

Here is how our KPI list looks like for the example at the top:

image
image1104×232 6.85 KB

Updating KPI colors and style
  • You can change the color used by each of the sequence steps. Simply enter the color HEX in the [Color] field for the item. For example you might want to show green color when the metric means “good”. Here is where you can pick any HEX color: https://htmlcolorcodes.com/
  • You can also hardcode a default color when setting up the list so that less advanced users don’t have to fiddle around with the HEX when adding or updating the sequence.
  • Finally, you can automatically set the color depending on your criteria using PowerAutomate workflow
Advanced: Targeting metrics to group or users

You can make it so metrics display specific information to groups of users or particular users.

Since each metric is a list item, you can group list items into folders and set permissions for each folder to be only see by a relevant user group.

To enable folders in your KPI list:

  1. While in the KPI list, go to List settings → Advanced settings
  2. Set Folders to Yes as shown below:
    image

Now you can create a metric item within the folder and set security on the folder such that only a group or a user can see it.

You can also set each metric to a specific group. Here are the steps on how to do that with Quick Links (the steps are identical). Scroll to a section titled Targeting select Quick Links to show only to specific groups or users