Status Indicator 4.3.2

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the Status Indicator, see Status Indicator.

Overview

The Status Indicator displays different icons depending on whether set thresholds are reached. It is typically used for presenting KPI data in an easy to digest format.

The following diagram shows a Status Indicator configured to display different icons depending on threshold and target values of an Accounting Financial KPIs dataset:

 
Source Data: The dataset from which the values are obtained.
Bad Threshold Column: The column in the dataset that provides the value below which the indicator will show a bad value. The icon displays as a red triangle with an exclamation mark when the value in the Actual Column is equal to or falls below that in the Bad Threshold Column.
Average Threshold Column: The column in the dataset that provides the value at which the indicator will show an average value. The icon displays as an orange square when the value in the Actual Column falls between the values in the Bad Threshold Column and Average Threshold Column.
Good Threshold Column: The column in the dataset that provides the value at which the indicator will show a good value. The icon displays as a green circle with a tick when the value in the Actual Column is equal to or greater than that in the Average Threshold Column.
Target Column: The column in the dataset that provides the value that we are aspiring to reach. For example, a sales target. This field is not used unless the threshold values are expressed as a percentage. The component will use this field to calculate the actual percentage value for comparison with the thresholds. If the thresholds are expressed as actual values, Target Value is not required.
Actual Column: The column in the dataset that provides the actual value of a data point.
Filter Column: The column of the dataset that provides the values that will be assessed. This is used in conjunction with the Filter Value.
Filter Value: The row of the dataset that provides the values that will be assessed.
Percentage: Select this check box if the threshold values are expressed as percentages.
Invert: Select this check box to invert the good and bad thresholds, so that lower is good and higher is bad.

You can use this control in 2 ways:

  • Specify only the Bad Threshold. When the value in the Actual Column is equal to or below that in the Bad Threshold Column, the red icon will appear, otherwise no icon will appear.
  • Specify all three thresholds to display the red, orange and green icons accordingly.

Tutorial

In this tutorial, we’ll look at adding a Status Indicator that changes depending on the KPI type that is selected from a combo box. This combo box will get a list of KPI types from a dataset.

statuslive

Let’s go through this process, step-by-step.


Step by Step: Creating an Event Controlled Status Indicator

Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout – you can adjust the rows and columns if you like but it’s not important for this exercise.

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.

Step 1. Add the Source Data

statusdataset

Normally we add the data later in a tutorial, however this time we're going to add it first, as things will make more sense this way.

  • Add the AccountingFinancialKPIs dataset, and configure it as follows:
    • amountType: (Text) Net
    • currencyCode: (Text) CAD
    • periodEndedMonth: (Number) 11
    • periodEndedYear: (Number) 2013
    • periodType: (Text) Accounting

You will also need to publish a List event from this dataset, to populate the combo box. Configure the event as follows:

  • Event: optionValues
  • Column: FINANCIAL
  • Distinct: (unselected)

Step 2. Add a Combo Box

This Combo Box will provide the list of values from the FINANCIAL column of the dataset, reading from the event published in the previous step. This allows the user to select an item from the list, and the Status Indicator will change accordingly.

  • Drag and drop a Combo Box onto a cell on the page.
  • Configure it as follows:
    • Option Values: (Event) optionValues
    • Option Names: (leave this blank)
    • Selected Option: selectedOption

Step 3. Add the Status Indicator to the page

Drag and drop the Status Indicator component onto a grid cell.

Step 4.  Configure the Status Indicator

statusconfig

In this example, we want the Status Indicator to change according to the event generated from the combo box. The advantage in doing this is that other controls on the page can also subscribe to the same events, thus your charts and tables (for example) can also be linked. Configure the Status Indicator as follows:

  • Source Data:  AccountingFinancialKPIs1
  • Actual Column: (Text) VALUE
  • Target Column: (Text) TARGET
  • Bad Threshold Column: (Text) TARGET_BAD_VALUE
  • Average Threshold Column: (Text) TARGET_OK_VALUE
  • Good Threshold Column: (Text) TARGET_GOOD_VALUE
  • Filter Column: (Text) FINANCIAL
  • Filter Value: (Event) selectedOption
  • Percentage: (unselected)
  • Reverse: (unselected)

Step 5.  Create the event defaults

You can create an event at any time. Here we want to set a default value for the combo box so that some data is displayed when the page is first loaded.

  • Click the Event Defaults button on the far right side of the Studio toolbar.
  • Create an event called “selectedOption” with a text value of Sales.

Step 6. All done!  

statuslive

Congratulations! You now have a fully functioning Status Indicator that displays a different image depending on what has been selected from the combo box. When the page first loads, the combo box displays "Sales" and the status indicator displays the KPI for Sales.

save Don’t forget to save your page!

Leave a Reply

Your email address will not be published. Required fields are marked *