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:

  1. 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.

  2. In the Toolbox panel, click the Other tab.

  3. 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.

You can configure the KPI card through the following KPI Card settings:

Value

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.

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.

Background Color

Top

These settings apply to the top part of the KPI card when no conditions are created or true.

Middle

These settings apply to the middle part of the KPI card when no conditions are created or true.

Bottom

These settings apply to the bottom part of the KPI card when no conditions are created or true.

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:

  1. In the Components panel, select KPI Card.

  2. In the KPI Card panel, click +Add Condition.

    A window appears that lets you create a condition.

  3. In the Expression box, type a conditional Arcade expression. Do not enclose the Arcade expression within curly braces. For example, value + reference > 0.

  4. 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 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 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 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.

    • 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.

  5. Click Submit.

To edit a condition:

  1. In the Components panel, select KPI Card.

  2. In the KPI Card panel, click the name of the menu item.

  3. Change the condition settings you want.

To reorder a menu item:

  1. In the Components panel, select KPI Card.

  2. In the KPI Card panel, click Edit Items.

  3. Drag the condition up or down to the position you want.

  4. Click Done.

To delete a menu item:

  1. In the Components panel, select KPI Card.

  2. In the KPI Card panel, click Edit Items.

  3. Click the Delete icon .

  4. Click Done.

Main Settings

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:

  1. In the menu on the right, select Users.

  2. 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:

  1. In the menu on the right, select Groups.

  2. 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:

  1. 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:

  1. In the menu on the right, select Users.

  2. 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:

  1. In the menu on the right, select Groups.

  2. 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:

  1. Click the X beside the name of the user or group.

Layout