Status Indicator

This article applies to versions 4.5.4 and later of IFS OI Explorer. For more, see Release History.

Overview

The Status Indicator uses different icons to indicate the state of a represented numerical value (Actual), in relation to configured numerical limits.

• Actual is compared to the limits from smallest to largest, or from largest to smallest, depending on the selected Direction.
• If configured to use the Percentage option, Actual as a percentage of Target is compared against percentage limits.
• Define a single limit for a 2 States status indicator (default), or define two limits for a 3 States status indicator.
• Each state uses an icon, selected from a list, and assigned a colour (or left as black & white).

Actual is 30, Limit is 20 Actual is 40, Limit is 60

Example of two different states for a Status Indicator

The Status Indicator can be placed in a prominent position on a page to show high-level KPIs, but it also works well in a Table Layout, where each row contains a small icon (the Status Indicator), showing an immediate overview of the status for that row. If the Table Layout has been configured to update with child entities as you click an entity, you can work through the different levels guided by the status indicators. (See Tutorials - Hierarchy Attributes for more on setting up an interactive Table Layout using child entities.)

Related: Using the Status Displays, Status Indicator Styles

---

Quick Start

You can configure a Status Indicator in just two steps.

In this example, we want to configure a status indicator with fixed values, where the Actual value is greater than the Limit value.

1. Set the Actual property to a fixed value of 30.

2. Set the Limit property to a fixed value of 20.

All done!

You now have a Status Indicator that shows the icon for Actual above Limit.

• Click the preview button on the Studio toolbar to see what your page will look like in display mode.

Note: See what happens when you change the Actual value to less than or equal to the Limit value (go back to Design mode to do this). Likewise, see what happens when you change the Direction to Descending.

---

Configuration

You can configure the Status Indicator to compare the Actual number to one or two Limits, or you can configure it to compare Actual as a percentage of Target, against percentage limits.

The following diagram shows a configured Status Indicator that does not use the Percentage option (the Percentage check box is unselected):

Actual: The number represented by the Status Indicator, that is compared to either one or two limits (depending on State Count), to determine state. You can assign data from any of the following Data Categories: Dataset, Ad hoc Calculation, Attribute, Tag, or Value. Percentage: Select this check box to use the percentage option. Target: (Not shown here.) If Percentage is selected, then type in a target number. Actual is then calculated as a percentage of Target, before being compared to limit percentages (Limit %). You can assign data from any of the following Data Categories: Dataset, Ad hoc Calculation, Attribute, Tag, or Value. State Count: Select 2 States or 3 States for the Status Indicator. The default is 2 States. If you select 3 States, an extra Limit or Limit % is introduced, as well as a third state icon, which can be configured. Direction: The default direction is Ascending (whereby actual and limits are compared from smallest to largest). To compare actual and limits from largest to smallest, select Descending. Note how the arrows change direction in the component editor, to visually clarify this. State icon (1): If the value of Actual is positioned here (i.e. greater than the limit in ascending direction, or less than or equal to the limit in descending direction), then this is the icon that displays on the page. Limit (1st): The number that Actual is compared to, to determine State. If Percentage is selected, then Limit changes to Limit %. Type in a percentage limit here. You can assign data from any of the following Data Categories: Dataset, Ad hoc Calculation, Attribute, Tag, or Value. State icon (2): If the value of Actual is positioned here (i.e. less than or equal to the limit in ascending direction, or greater than the limit in descending direction), then this is the icon that displays on the page. Limit (2nd): (Not shown here.) The number that Actual is compared to, to determine State. If Percentage is selected, then Limit changes to Limit %. Type in a percentage limit here. This limit is available if you select a State Count of 3 State. You can assign data from any of the following Data Categories: Dataset, Ad hoc Calculation, Attribute, Tag, or Value. State icon (3): (Not shown here.) If the value of Actual is positioned here (i.e. less than or equal to the limit in ascending direction, or greater than the limit in descending direction), then this is the icon that displays on the page. This icon is available if you select a State Count of 3 State. Style: The style to apply to the status indicator component. If you are a Style Administrator, you can add a new Status Indicator style. Alignment: Click on one of the boxes to override the selected style's alignment. Size: Type in a positive integer to override the selected style's size. Position: Defines the component's position in the grid layout/precision layout.

Demonstrating which Icons are Displayed

The following examples demonstrate which icons are displayed, based on the position of Actual in relation to limits. Note the Direction used in each case.

In the component editor On the page In the component editor On the page     In the component editor On the page In the component editor On the page     In the component editor On the page In the component editor On the page

The Icon Picker

When configuring a state icon, select from any of the icons available in the drop-down, and then colour the icon using the colour picker.

Examples of some of the icons that can be configured for the status indicator

---

Tutorial: Daily Production vs Target

If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.

In this tutorial, we'll build a Status Indicator that changes icon depending on whether actual THP is greater than 75% of planned THP, for the selected date.

At the end of the tutorial, your page should look something like this:

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

Note: This configuration uses the Sample Data table and datasets that can be optionally made available during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.

 

Step 1. Prepare a Studio Page

Before you start, click the New Page button on the Home tab of the ribbon. Choose the Grid layout.

Configure the page's Grid Layout

• Add two rows.
• Assign a Column Spacing of 25.
• Change the Height for the different rows: 10* for the first three rows, and 70* for the fourth row.
• Apply a grid layout Style, if there is one available. (The one used here has a cell margin and padding, as well as a contrasting cell background color.)

Related: Grid Layout tutorial

Step 2. Add Text Labels

We will be using the right column of the grid layout, for the tutorial.

• Drag and drop a Text Label into each of the top two grid cells (on the right side of the page).
• For the first Text Label, type Tutorial into the Content property.
• For the second Text Label, type Actual as Percentage of Planned into the Content property.
• Apply a Style to both text labels, if there is one available. (The one used here has a larger font size than that of the default text style.)

Related: Text Label tutorial

Step 3. Add a Date Picker

Drag and drop a Data Picker onto the right cell, second from the bottom, of the page's grid layout (no further configuration is required here, although you can right-align the component, as we have done here).

Related: Date Picker tutorial

Step 4. Add a Status Indicator

Drag and drop a Status Indicator onto the bottom right cell of the page's grid layout. The Status Indicator is in the Display group.

Step 5. Configure the Status Indicator

We're going to configure the Status Indicator to compare Actual (using an entity's attribute) as a percentage of Target (using another attribute of the same entity) against a percentage limit of 75. To work with percentages, we need to first select the percentage mode. Next, we'll configure the appearance of the status indicator and its icons.

Setting to Percentage Mode:

To work with percentages, we need to first select the percentage mode.

Select the Percentage check box. This causes a Target property to appear, and sets Limit to Limit %.

Adding Actual and Target Data:

1. Click the Hierarchy button on the Studio ribbon.

2. In the hierarchy panel, select the P2 Corporate hierarchy, locate entity Beardy, then click to open the Attributes panel.

3. Drag and drop the THP!Actual attribute into the Actual property box on the Status Indicator.

4. Drag and drop the THP!Planned attribute into the Target property box on the Status Indicator.

Note: Keep the default data settings for the Actual and Target data. Settings include a Time property of endTime. This means the data will refresh to the selected endTime every time a user selects a new date from the Date Picker.

Related: Tag Search and Hierarchy Navigation

Setting the Limit Percent:

We're going to assign a fixed value of 75, for Limit %.

• Open the Limit % Data Selector by clicking on the field. Stay on the Value tab.
• Type 75 into the Value field.

Configuring the Icons and Appearance:

• For the icon above the limit, keep the default icon, but select green from the colour picker.
• For the icon below the limit, keep the default icon, but select red from the colour picker.
• Centre-align the Status Indicator, by clicking on the center block in the alignment section.
• Resize the Status Indicator to 80 pixels, by typing 80 in the Size box.

---

Step 6. All done!

Congratulations! You now have a Status Indicator that changes icon depending on whether actual THP is greater than 75% of planned THP, for the selected date.

• Click the preview button on the Studio toolbar to see what your page will look like in display mode.
• Select different dates and observe the changes in the status indicator's icon. Where actual THP is more than 75% of its target, the status indicator has an icon showing a white tick against a green background. Where actual THP is 75% or less of its target, the status indicator has an icon showing a white exclamation mark against a red background.

Don’t forget to save your page!

---

Release History

• Status Indicator 4.5.4 (this release). The Status Indicator component has had extensive changes in the editor. Subjective and potentially ambiguous terms such as ‘Good’, ‘Bad’, ‘Reversed’, and so on, have been replaced by clear and unambiguous labels and graphical representations.
  • The labels Good, Average and Bad have been replaced by state configuration options (symbols and colours), with arrows indicating progression from one state to the next.
  • Instead of a Reversed option, you can now pick a Direction: ‘Ascending’ or ‘Descending’.
  • Selecting Percentage changes the Limit label/s from ‘Limit’ to ‘Limit %’; this makes it clear that the Actual value is calculated as a percentage of the Target and then evaluated against the Limit %
  • Colours for the different ‘States’ are now set in the editor, rather than in the Styles. You are now also able to select an icon for each of the different states.
  • When a new component editor is dragged onto a page, the default State Count is 2 States. For a more complex Status Indicator, you can choose 3 States. (Status Indicators from earlier versions will have 3 States selected.)
• Status Indicator 4.4.1
• Status Indicator 4.3.2