Advanced formatting

You can use Arcade expressions for advanced formatting of the list and indicator elements to customize how your data points render. A data point can represent either a feature or summary statistic (count, average, minimum, maximum, sum, or standard deviation) based on how the element is configured. When using features, a single data point represents a single feature. When using a statistic, each data point represents the result of that statistic. The list element renders your feature data points as line items, with each line representing one data point. The indicator element renders one data point at a time.

Unlike attribute expressions (used in a layer's pop-up, styles, and labels), a single expression is authored for each element. The expression is executed for each data point and returns system-defined and user-defined properties for that element. System-defined properties are the settings you would otherwise configure in an element, such as text and background color. User-defined properties are defined by the user in the expression and can be referenced while configuring the element.

Note:

Attribute expressions authored in web maps don't carry over for use in dashboard elements.

The following table summarizes what data from your layer will be passed into the expression:

Variable nameTypeDescription

$datapoint

Feature or Dictionary

Applies to indicator and list

$reference

Dictionary

Applies to indicator

Note:
Keep the following in mind when writing Arcade expressions:
  • Include a comma after each property in a dictionary, except for the last property.
  • Attribute names must not contain spaces or special characters.

Advanced formatting in a list

For the list element, you can use Arcade expressions by enabling the Advanced formatting option. Once you choose to use advanced formatting, color inputs become unavailable, along with any other system-defined properties.

The expression, which is executed for each line item, is used to define how each line on your list renders. Additionally, an expression can be used to create new attributes that can be referenced in the line item template.

Data point attributes can be referenced using the $datapoint global variable in the Arcade editor. The following table provides the list of properties that can be returned from the expression in the form of a dictionary:

PropertyValue typeDescription

textColor

String

Base text color of the line item

backgroundColor

String

Background color of the line item

separatorColor

String

Bottom border color of the line item

selectionTextColor

String

Color used for line item text when the item is selected

selectionColor

String

Base text color used when item is selected

attributes

Dictionary

A dictionary of attribute-value pairs

yourAttributeName

String, Number, Date, Boolean

Attribute that can be referenced in the Line Item Template using the {expression/yourAttributeName} syntax

Note:

Geometry functions are not supported.

For example, if you want the background color of your list to turn red when the value is above a certain threshold, you can create a variable that looks like the following:

var color = IIF($datapoint.[field]>[threshold], '#F3DED7','')

In this variable, [field] is the field for your values, and [threshold] is the value at which you want the background color to change. The variable can be used as a property value, such as in the following example:

backgroundColor: color,

Using this variable in the background color property gives you an expression that looks like the following, where the background color of the list item will turn red when the value for speed is above 40:

Sample Arcade expression

Use advanced formatting in a list

To use formatting expressions in a list element, do the following:

  1. In the configuration of the element, click the List tab.
  2. In the Advanced formatting section, click Enable.

    Note:
    Once advanced formatting is enabled, color inputs become unavailable and are instead set in the expression. If you set colors before enabling advanced formatting, they are automatically added to your expression.

  3. Create your formatting expression in the editor.
  4. Tip:
    If you need help with any of the Arcade functions, click the Information button next to the function to see additional details.
  5. If you want your expression to execute at a specified interval, for example, if your expression uses the Now() function, turn on the Refresh script toggle button and set a refresh interval.
  6. In Line item template, enter any new attributes using the syntax {expression/yourAttributeName}.

Advanced formatting in an indicator

For the indicator element, you can use Arcade expressions by enabling the Advanced formatting option. Once you choose to enable advanced formatting, the system-defined properties, such as color options and value formatting, become unavailable, and conditional formatting turns off. The expression is used to define these rendering properties and conditional logic. Additionally, an expression can pass out user-defined attributes to be referenced in the Title and Description fields on the General tab.

When including a reference value to your indicator, only a statistic-based reference type is available on the Data tab once advanced formatting is enabled. If you previously defined a fixed value reference type, it is automatically added to the expression, along with any conversion factors, text, and color formatting. Value formatting done before enabling advanced formatting is removed and needs to be defined in the expression using value patterns.

Note:

Previous value is not supported in Arcade. If you set a previous value reference type before enabling advanced formatting, it will be converted to the current value.

Data point attributes can be referenced using the $datapoint global variable in the Arcade editor. Depending on whether the value type is Feature or Statistic, $datapoint is of type feature or dictionary, respectively. If a reference statistic has been configured on the Data tab, the $reference global variable will also be available in the editor.

The following table provides the list of properties that can be returned from the expression in the form of a dictionary:

PropertyValue typeDescription

textColor

String

Base text color of indicator element

backgroundColor

String

Background color of indicator element

topText

String

Displays as the top text

topTextColor

String

Color of top text

topTextOutlineColor

String

Color of top text outline

topTextMaxSize

String

Maximum top text size (xx-small | x-small | small | medium | large | x-large | xx-large)

middleText

String

Displays as the middle text

middleTextColor

String

Color of middle text

middleTextOutlineColor

String

Color of middle text outline

middleTextMaxSize

String

Maximum top text size (xx-small | x-small | small | medium | large | x-large | xx-large)

bottomText

String

Displays as bottom text

bottomTextColor

String

Color of bottom text

bottomTextOutlineColor

String

Color of bottom text outline

bottomTextMaxSize

String

Maximum top text size (xx-small | x-small | small | medium | large | x-large | xx-large)

iconName

String

Name of icon defined for indicator

iconAlign

String

Icon placement adjacent to the middle text (left | right)

iconColor

String

Fill color of icon

iconOutlineColor

String

Outline color of icon

noValue

Boolean

Flag to display no value text instead of indicator (true | false)

attributes

Dictionary

A dictionary of attribute-value pairs

yourAttributeName

String, Number, Date, Boolean

Attribute that can be referenced in the Title and Description fields using the {expression/yourAttributeName} syntax

For example, if you have an indicator that shows a value in one unit of measurement, but you also want to show the same value in another unit below it, you can create a variable to convert your existing values. With an indicator showing average temperature in Celsius, you can create a Fahrenheit variable to use in your expression to also display your values in Fahrenheit.

var fahrenheit = Floor(($datapoint["avg_Temperature"]/5*9)+32)

You can then include the variable as a property value, such as the following:

bottomText: fahrenheit,

Using this variable in the bottom text property gives you an expression that looks like the following, where the average temperature (in Celsius) is displayed in the middle text of the indicator and the Fahrenheit value is displayed in the bottom text:

Sample Arcade expression

Use advanced formatting in an indicator

To use formatting expressions in an indicator element, do the following:

  1. In the configuration menu of the element, click the Indicator tab.
  2. In the Advanced formatting section, click Enable.
    Note:
    Once advanced formatting is enabled, the top, middle, and bottom text fields become unavailable. These configurations are made in your expression. If you entered values before enabling advanced formatting, they are automatically added to your expression.
  3. Create your formatting expression in the editor.
  4. Tip:
    If you need help with any of the Arcade functions, click the Information button next to the function to see additional details.
  5. If you want your expression to execute at a specified interval, for example, if your expression uses the Now() function, enable the Refresh script toggle button and set a refresh interval.
  6. If you have created a new attribute with your expression, you can reference it in the Title and Description fields using the syntax {expression/yourAttributeName}.

Color values

When including color values in an expression, they must be returned as strings (surrounded by quotation marks). Color values that are left undefined or are invalid will automatically use defaults. Accepted color value types include hex values, RGB, RGBA, HSL, and HSLA. The following are some examples along with the supported syntaxes:

Hex colors

  • #090
  • #009900
  • #090a
  • #009900aa

RGB and RGBA

  • rgb(34, 12, 64)
  • rgba(34, 12, 64, 0.6)

HSL and HSLA

  • hsl(50, 33%, 25%)
  • hsla(50, 33%, 25%, 0.75)