KPI Card Settings 
You can configure Key Performance Indicator (KPI) cards to display data from layer fields when the user performs an identify, search or workflow operation. KPI cards are divided vertically in three parts: top, middle and bottom, each of which can be configured separately.
KPI cards only appear when the user performs an identify, search or workflow operation on visible layers, as a set of results (VertiGIS Studio Features) is required to display KPI cards.
To add a KPI card:
-
While editing your app in Designer, in the Components panel, click + Add Component.
If the + Add Component button is not visible, you are likely viewing your app's Services; click Components to view the components of your layout.
The Toolbox panel appears.
-
In the Toolbox panel, click the Other tab.
-
In the Toolbox panel, drag
beside theKPI Cardcomponent to where you want to place it in the Components panel.
When adding this component for the first time, there may be a slight delay before it appears in the layout while the component loads.
The KPI card component is added to your layout.
-
Source: Select the layer or workflow from which to source the data for the KPI card.
If the app contains more than one map, layers appear with a (Map Title) suffix. For example, MyLayer (MyMap1), MyLayer (MyMap2).
Workflows are indicated with a (Workflow) suffix. If you select a workflow, you must be aware of the field names and types of the workflow's output.
If the workflow executes the
kpi.display
command with results from a layer on your map, set the KPI card's Source to that layer instead of the workflow.
You can configure the KPI card through the following KPI Card settings:
Value
-
Statistic: The function to apply to the field values of selected features that determines the value to display in the KPI card.
-
Average: Returns the average of the field values.
-
Count: Returns the total number of field values.
-
Maximum: Returns the highest field value.
-
Minimum: Returns the lowest field value.
-
Sum: Returns the total of the field values added together.
-
Standard Deviation: Returns the standard deviation of the field values.
-
-
Field: The layer field to use as the values for the Statistic function.
Advanced Mode
The advanced mode allows you to edit the code for the Arcade script that generates the value for the KPI card.
When you enter Advanced Mode, you will lose access to Designer's UI to easily configure the KPI card settings.
-
Value Expression: To edit the raw Arcade Script used to transform the results into the value for the KPI card, click Open Editor. For more information, see ArcGIS Arcade.
If changes are made to the script such that it no longer matches a Designer value expression template, you will not be able to exit advanced mode.
Reference
The settings used to calculate a reference
token, which can be used in the Text settings, and the Expression setting used to create conditional formatting.
If you use an Arcade expression that divides by the reference
token when its value is zero, the result will be Infinity
. You can use the IIf operator to account for this possibility.
-
Reference Type: There are a number of ways the
reference
token can be calculated:-
None: No
reference
token is required. -
Previous Value: Use the previous value of the
value
token.When Previous Value is selected, the value of the
reference
token is only updated by thekpi.display
command, that is, when the KPI card is displayed; it is not affected by filtering, adding or removing results with thekpi.add-features
andkpi.remove-features
commands. -
Fixed: Assign a static number to the
reference
token.-
Reference: The fixed number to assign the
reference
token.
-
-
Statistic: Apply a function to the field values of selected features as the value for the
reference
token.-
Statistic: The function to apply to the field values of selected features that determines the value for the
reference
token.-
Average: Returns the average of the field values.
-
Count: Returns the total number of field values.
-
Maximum: Returns the highest field value.
-
Minimum: Returns the lowest field value.
-
Sum: Returns the total of the field values added together.
-
Standard Deviation: Returns the standard deviation of the field values.
-
-
Field: The layer field to use as the values for the Statistic function.
Advanced Mode
The advanced mode allows you to edit the code for the Arcade script that generates the value for the
reference
token.When you enter Advanced Mode, you will lose access to Designer's UI to easily configure the KPI card settings.
-
Value Expression: To edit the raw Arcade Script used to transform the results into the value for the
reference
token, click Open Editor. For more information, see ArcGIS Arcade.If changes are made to the script such that it no longer matches a Designer value expression template, you will not be able to exit advanced mode.
-
-
Background Color
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Background Color: Specify a background color for the KPI card. This option only appears when Use App Colors is disabled.
To select a color, click the color picker to select a color from the palette, using the sliders to adjust the hue and opacity, or the predefined color swatches at the bottom.
Alternatively, there are two ways in which you can manually specify a color:
-
Hex (Hexadecimal): Type a hexadecimal value for the color. The first pair of characters represent the amount of red, the second pair the amount of green, and the third pair the amount of blue. Each character must be between 0 and F. You cannot specify the opacity in the hexadecimal value, however, you can use the opacity slider or the Alpha value in the RGBA value. For more information, see Web colors.
-
RGBA (Red, Green, Blue, Alpha): Type an RGBA value for the color, which consists of four numbers. The first three numbers represent the amount of red, green and blue, respectively, and each value must be an integer between 0 and 255. The final number represents the color's opacity and must be an integer between 0 (fully transparent) and 100 (fully opaque).
-
Top
These settings apply to the top part of the KPI card when no conditions are created or true.
-
Text: The text to display at the top of the KPI card.
You can use Arcade expressions within curly braces
{}
, including thevalue
andreference
tokens. For example, Value * Reference is: {value * reference}. For more information, see ArcGIS Arcade. -
Icon: The icon to display at the top of the KPI card.To select an icon, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
-
Size: The size of the text and icon at the top of the KPI card.
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Color: The color of the text and icon at the top of the KPI card.This option only appears when Use App Colors is disabled.
-
Inherit Formatting: Whether to use the formatting settings configured in the Region Settings for numbers produced by an Arcade expression.
-
Number Format: The format of any numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
Decimal Places: The number of decimal places for numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
Middle
These settings apply to the middle part of the KPI card when no conditions are created or true.
-
Text: The text to display in the middle of the KPI card.
You can use Arcade expressions within curly braces
{}
, including thevalue
andreference
tokens. For example, Value * Reference is: {value * reference}. For more information, see ArcGIS Arcade. -
Icon: The icon to display in the middle of the KPI card.To select an icon, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
-
Size: The size of the text and icon in the middle of the KPI card.
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Color: The color of the text and icon in the middle of the KPI card.This option only appears when Use App Colors is disabled.
-
Inherit Formatting: Whether to use the formatting settings configured in the Region Settings for numbers produced by an Arcade expression.
-
Number Format: The format of any numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
Decimal Places: The number of decimal places for numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
Bottom
These settings apply to the bottom part of the KPI card when no conditions are created or true.
-
Text: The text to display at the bottom of the KPI card.
You can use Arcade expressions within curly braces
{}
, including thevalue
andreference
tokens. For example, Value * Reference is: {value * reference}. For more information, see ArcGIS Arcade. -
Icon: The icon to display at the bottom of the KPI card.To select an icon, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
-
Size: The size of the text and icon at the bottom of the KPI card.
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Color: The color of the text and icon at the bottom of the KPI card.This option only appears when Use App Colors is disabled.
-
Inherit Formatting: Whether to use the formatting settings configured in the Region Settings for numbers produced by an Arcade expression.
-
Number Format: The format of any numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
Decimal Places: The number of decimal places for numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
Conditional Formatting
You can add conditions to apply formatting under certain circumstances. For example, you could change the colors of the various parts of the KPI card depending on the size of the value.
VertiGIS Studio Web applies conditional formatting based on the first condition that is true. If no conditions are true, the default formatting above is applied.
To add a condition:
-
In the Components panel, select KPI Card.
-
In the KPI Card panel, click +Add Condition.
A window appears that lets you create a condition.
-
In the Expression box, type a conditional Arcade expression. Do not enclose the Arcade expression within curly braces. For example, value + reference > 0.
-
Set the conditional formatting you want to apply when this condition's Expression is the first to be true:
Background Color
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Background Color: Specify a background color for the KPI card. This option only appears when Use App Colors is disabled.
To select a color, click the color picker to select a color from the palette, using the sliders to adjust the hue and opacity, or the predefined color swatches at the bottom.
Alternatively, there are two ways in which you can manually specify a color:
-
Hex (Hexadecimal): Type a hexadecimal value for the color. The first pair of characters represent the amount of red, the second pair the amount of green, and the third pair the amount of blue. Each character must be between 0 and F. You cannot specify the opacity in the hexadecimal value, however, you can use the opacity slider or the Alpha value in the RGBA value. For more information, see Web colors.
-
RGBA (Red, Green, Blue, Alpha): Type an RGBA value for the color, which consists of four numbers. The first three numbers represent the amount of red, green and blue, respectively, and each value must be an integer between 0 and 255. The final number represents the color's opacity and must be an integer between 0 (fully transparent) and 100 (fully opaque).
-
Top
These settings apply to the top part of the KPI card when this condition's Expression is the first to be true.
-
Text: The text to display at the top of the KPI card.
You can use Arcade expressions within curly braces
{}
, including thevalue
andreference
tokens. For example, Value * Reference is: {value * reference}. For more information, see ArcGIS Arcade. -
Icon: The icon to display at the top of the KPI card.To select an icon, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
-
Size: The size of the text and icon at the top of the KPI card.
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Color: The color of the text and icon at the top of the KPI card.This option only appears when Use App Colors is disabled.
-
Inherit Formatting: Whether to use the formatting settings configured in the Region Settings for numbers produced by an Arcade expression.
-
Number Format: The format of any numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
Decimal Places: The number of decimal places for numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
Middle
These settings apply to the middle part of the KPI card when this condition's Expression is the first to be true.
-
Text: The text to display in the middle of the KPI card.
You can use Arcade expressions within curly braces
{}
, including thevalue
andreference
tokens. For example, Value * Reference is: {value * reference}. For more information, see ArcGIS Arcade. -
Icon: The icon to display in the middle of the KPI card.To select an icon, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
-
Size: The size of the text and icon in the middle of the KPI card.
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Color: The color of the text and icon in the middle of the KPI card.This option only appears when Use App Colors is disabled.
-
Inherit Formatting: Whether to use the formatting settings configured in the Region Settings for numbers produced by an Arcade expression.
-
Number Format: The format of any numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
Decimal Places: The number of decimal places for numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
Bottom
These settings apply to the bottom part of the KPI card when this condition's Expression is the first to be true.
-
Text: The text to display at the bottom of the KPI card.
You can use Arcade expressions within curly braces
{}
, including thevalue
andreference
tokens. For example, Value * Reference is: {value * reference}. For more information, see ArcGIS Arcade. -
Icon: The icon to display at the bottom of the KPI card.To select an icon, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
-
Size: The size of the text and icon at the bottom of the KPI card.
-
Use App Colors: Whether to use the colors configured in the Branding Settings.
-
Custom Color: The color of the text and icon at the bottom of the KPI card.This option only appears when Use App Colors is disabled.
-
Inherit Formatting: Whether to use the formatting settings configured in the Region Settings for numbers produced by an Arcade expression.
-
Number Format: The format of any numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
Decimal Places: The number of decimal places for numbers produced by an Arcade expression. This option only appears when Inherit Formatting is disabled.
-
-
Click Submit.
To edit a condition:
-
In the Components panel, select KPI Card.
-
In the KPI Card panel, click the name of the menu item.
-
Change the condition settings you want.
To reorder a menu item:
-
In the Components panel, select KPI Card.
-
In the KPI Card panel, click Edit Items.
-
Drag the condition up or down to the position you want.
-
Click Done.
To delete a menu item:
-
In the Components panel, select KPI Card.
-
In the KPI Card panel, click Edit Items.
-
Click the Delete icon
.
-
Click Done.
Main Settings
-
Title: Type a title to display for the component. This title is used both in Web and Designer.
-
Icon: To select an icon to represent the component, click Select Icon, click the desired icon and click OK. To remove the icon, click Clear Icon.
Visibility Filters
Visible To
The Visible To settings determine which users and groups can access this component. If no users or groups are specified, all users can access this component by default.
The Hidden From setting overrides this setting.
To add a user:
-
In the menu on the right, select Users.
-
In the menu on the left, select the name of the user you want to add.
To quickly find a user, click the menu on the left and start typing the name of the user.
To add a group:
-
In the menu on the right, select Groups.
-
In the menu on the left, select the name of the group you want to add.
To quickly find a group, click the menu on the left and start typing the name of the group.
There are three special groups that are always available even if no Esri groups have been configured:
-
All Users: Any user regardless of whether they are signed in or not.
-
Anonymous Users: Users who are not signed in.
-
Authenticated Users: Users who are signed in.
-
To remove a user or group:
-
Click the X beside the name of the user or group.
Hidden From
The Hidden From setting determines which users and groups are explicitly forbidden to access this component.
This setting overrides the Visible To setting.
To add a user:
-
In the menu on the right, select Users.
-
In the menu on the left, select the name of the user you want to add.
To quickly find a user, click the menu on the left and start typing the name of the user.
To add a group:
-
In the menu on the right, select Groups.
-
In the menu on the left, select the name of the group you want to add.
To quickly find a group, click the menu on the left and start typing the name of the group.
There are three special groups that are always available even if no Esri groups have been configured:
-
All Users: Any user regardless of whether they are signed in or not.
-
Anonymous Users: Users who are not signed in.
-
Authenticated Users: Users who are signed in.
-
To remove a user or group:
-
Click the X beside the name of the user or group.
Layout
-
Slot: Select the slot to position the component within the Map component. In addition to the various positions on the map such as Top Left and Bottom Center, you can position the component within the map context menu, which appears when the user right-clicks the map. You can also position the component within the Popup slot, which appears at the mouse cursor.
This setting only appears when the component is within the Map component.
-
Margin (px): The margin space around the component in pixels.
-
Initially Hidden: Specifies whether or not the component is initially hidden when the app loads. If selected, the component remains hidden unless activated, for example, by the
Show
command.