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.
Value
Field |
Description |
|---|---|
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. •Sum: Returns the total number of the 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: The table below captures the ways the reference token can be calculated.
Field |
Description |
|---|---|
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 the kpi.display command, that is, when the KPI card is displayed; it is not affected by filtering, adding or removing results with the kpi.add-features and kpi.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
Field |
Description |
|---|---|
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.
Field |
Description |
|---|---|
Text |
The text to display at the top of the KPI card. You can use Arcade expressions within curly braces {}, including the value and reference 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.
Field |
Description |
|---|---|
Text |
The text to display in the middle of the KPI card. You can use Arcade expressions within curly braces {}, including the value and reference 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.
Field |
Description |
|---|---|
Text |
The text to display at the bottom of the KPI card. You can use Arcade expressions within curly braces {}, including the value and reference 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.
Background Color
Field |
Description |
|---|---|
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.
Field |
Description |
|---|---|
Text |
The text to display at the top of the KPI card. You can use Arcade expressions within curly braces {}, including the value and reference 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 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 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.
Field |
Description |
|---|---|
Text |
The text to display in the middle of the KPI card. You can use Arcade expressions within curly braces {}, including the value and reference 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.
Field |
Description |
|---|---|
Text |
The text to display at the bottom of the KPI card. You can use Arcade expressions within curly braces {}, including the value and reference 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. |
Main Settings
Field |
Description |
|---|---|
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
Field |
Description |
|---|---|
Visible To |
Determines 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. |
Hidden From |
Determines which users and groups are explicitly forbidden to access this component. This setting overrides the Visible To setting. |
Layout
Field |
Description |
|---|---|
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. |
