Add Dashboard / KPI Indicators to your PowerApp in Under 5 Minutes

Introduction

Many of our clients have expressed their interested in how their SharePoint users can be better engaged using mobile.  We've been working with PowerApps and SharePoint Online to deliver these experiences.

Our example shows how to render a simple KPI based on a value in a SharePoint data source.  

The App

This is a project status reporting app.  Users create or update an entry in a project status list using SharePoint or the PowerApp.  The PowerApp renders key project metrics in a scorecard format.

Create a New Entry

Here is a quick rundown of the app.  The user can create a new entry in SharePoint Online or using a PowerApp.  Note the Scope, Schedule and Resources fields.

PowerApps - Create a new Entry in SharePoint Online

Manager Reviews Project Status

Next a manager or other stakeholders can check on the status of their project using the PowerApp.

Depending on their permissions, users can also easily view project details, add new projects and update project details using the PowerApp.

The PowerApp renders a listing of active projects.

The PowerApp renders a listing of active projects.

Further details can be gathered by navigating into a project.

How to Render a KPI in a PowerApp

Chart and Icon controls are available within PowerApps.  However, this example shows how to use the HTML Text control to render a KPI based on the value of a SharePoint list field.

Step 1: Add a Text / HTML Text Control to Your Canvas

PowerApps - Insert HTML Text

Step 2: Add a Formula to the HTML Text control

Here is where the fun starts.  You can add a formula to the HTML Text property of your control.

PowerApps - HTML Text Formula

The formula in this example is:

If(IsBlank(Find("On Track",ThisItem.Resources.Value)), "<b style='color:red;'>&#8226;</b>", "<b style='color:green;'>&#8226;</b>")

How the Formula Works

The whole formula is based on the If function. 

  • It is evaluating the value of a field in our SharePoint list called Resources
  • HTML for a colored bulled is output based on whether or not the On Track value is captured: <b style='color:red;'>&#8226;</b>

Important Note on the Find Function

The Find function returns a blank value if the substring you are looking for can't be found.  Don't use an empty string with quotes "" to evaluate this - it won't work. 

Use the IsBlank function to evaluate whether the substring you are looking for is present.

For a complete list of functions check this out: