Apply commas between two or more values in a list with Arcade in ArcGIS Dashboards

Summary

ArcGIS Arcade expressions can be used in ArcGIS Dashboards to customize how the data points appear in the list element.

This article provides the steps to apply commas between two referenced field values, CITY and DISTRICT, with Arcade in ArcGIS Dashboards. 

Shown below is the list element without the Arcade expression.

Procedure

1. Open the ArcGIS Dashboards item. Click View on the dashboard toolbar and click Options , found next to the element. Click Configure.

2. Click List to open the List options menu, and click Enable.

3. Specify the following Arcade expression in the Expression window.

// Edit the desired variable name and required field name accordingly
var <variableName1> = IIF(IsEmpty($datapoint.<fieldName1>), '', $datapoint.<fieldName1>)
var <variableName2> = IIF(IsEmpty($datapoint.<fieldName2>), '', $datapoint.<fieldName2>)
var <variableName3> = IIF((IsEmpty($datapoint.<fieldName1>)) ||(IsEmpty($datapoint.<fieldName2>)), '', ',')
var <variableName4> = <variableName1> + <variableName3> + ' ' + <variableName2>

return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
   <variableName4>: <variableName4>
    }
}

The code block below demonstrates the full working expression.

// Edit the desired variable name and required field name accordingly
var city = IIF(IsEmpty($datapoint.CITY), '', $datapoint.CITY)
var district = IIF(IsEmpty($datapoint.DISTRICT), '', $datapoint.DISTRICT)
var comma = IIF((IsEmpty($datapoint.CITY)) ||(IsEmpty($datapoint.DISTRICT)), '', ',')
var location = city + comma + ' ' + district

return {
  textColor: '',
  backgroundColor: '',
  separatorColor:'',
  selectionColor: '',
  selectionTextColor: '',
  attributes: {
   location: location
    }
}

4. Scroll down to the Line item template editor dialog box and type the attribute expression syntax into the desired position. In this example, the {expression/location} syntax is used.
5. Click Done.

Shown below is the list element with the Arcade expression.