Format lists

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

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.fieldName>[threshold], '#F3DED7','')

In this variable, fieldName 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:

var color = IIF($datapoint.Speed > 40, '#F3DED7', '');

return {
	backgroundColor: color
}

Format indicators

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.

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:

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:

var farenheit = Floor(($datapoint.avg_Temperature/5*9)+32)

return {
	topText: 'Average Temperature',
	middleText: Floor($datapoint.avg_Temperature),
	bottomText: farenheit,
}

Format tables

For the table element, you can use an Arcade expression by enabling the Advanced formatting option. Once you choose to use advanced formatting, color inputs, text alignment options, and other system-defined properties become unavailable and are instead set in the expression.

The expression, which is executed for each row in the table, is used to define the content and formatting for each cell in the column. Data point attributes can be referenced using the $datapoint global variable in the Arcade editor.

The cells dictionary must have a property for each field defined on the Data tab of the table's configuration. For example, in a grouped value table that has a category field for Zone, and a value field of Transaction Amounts, the cells dictionary contains two properties: zone and sum_transaction_amounts.

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

You can also use advanced formatting to create conditional formatting for your table. For example, if you have a table displaying recent repair requests, you may want to apply conditional formatting to distinguish the status of requests. You can create a variable that changes the color of the cell based on the status using a variable that looks like the following:

var statusColor = When($datapoint.status== 'new', 'yellow', $datapoint.status== 'closed', 'lightgray', 'white')

You can then assign the variable to the backgroundColor property so the cells are highlighted for new incidents and de-emphasized for closed incidents.

var statusColor = When(
	$datapoint.status == 'new', 'yellow',
	$datapoint.status == 'closed', lightgray', 'white')

return {
	cells:{
		requests:{
			displayText: <span>${$datapoint.requests}</span>, 
			backgroundColor: statusColor,
			}
		}
	}

Define icon names

The indicator and table elements allow you to include SVG icons in your element's configuration. When using advanced formatting, icons are added in your Arcade expression.

To add an icon to your Arcade expression, do the following:

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
  • #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)