Use HTML in Arcade expressions to format table values in ArcGIS Dashboards

Summary

HTML and ArcGIS Arcade expressions can be used together in ArcGIS Dashboards to customize how the data appears in the table element. This article provides the steps to apply bold text to the education institution categories and their corresponding total number of students. An indentation of 20 pixels is also configured for all the education institution names in ArcGIS Dashboards.

The image below shows the table element without the bold and indentation text formatting.

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 Values to open the Value options menu, and click Enable.

3. Specify the following Arcade expression in the Expression window. The HTML and Arcade expression configures specific field values to be bold or indented by 20 pixels. Refer to W3Schools: HTML Styles and W3Schools: HTML Text Formatting for more text formatting examples.

// Edit the desired variable name and required field name accordingly
var <variableName1> = Concatenate('<strong>'+$datapoint.<fieldName1>+'</strong>')
var <variableName2> = Concatenate('<div style="padding-left: 20px;">'+$datapoint.<fieldName1>+'</div>')
var <variableName3> = Concatenate('<strong>'+Text($datapoint.<fieldName2>)+'</strong>')

var <variableName4> = When($datapoint.<fieldName1> == '<textValue1>', <variableName1>, $datapoint.<fieldName1> == '<textValue2>', <variableName1>, $datapoint.<fieldName1> == '<textValue3>', <variableName1>, $datapoint.<fieldName1> =='<textValue4>', <variableName1>, <variableName2>)>
var <variableName5> = When(Text($datapoint.<fieldName2>) == '<numericValue1>', <variableName3>, Text($datapoint.<fieldName2>) == '<numericValue2>', <variableName3>, Text($datapoint.<fieldName2>) == '<numericValue3>', <variableName3>, Text($datapoint.<fieldName2>) =='<numericValue4>', <variableName3>, Text($datapoint.<fieldName2>))
return {
  cells: {
    <fieldName1>: {
      displayText : <variableName4>,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    <fieldName2>: {
      displayText : <variableName5>,
      textColor: '',
      backgroundColor: '',
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

  }
}

The code block below demonstrates the full working expression. In this example, the field value categories (Elementary, Middle or junior high, High school, and College or university) of the EDUCATION field are configured to be bold, whereas all other field values are indented by 20 pixels. The corresponding numeric field values of the STUDENT field are also set to be bold.

// Edit the desired variable name and required field name accordingly
var bldE = Concatenate('<strong>'+$datapoint.EDUCATION+'</strong>')
var txaE = Concatenate('<div style="padding-left: 20px;">'+$datapoint.EDUCATION+'</div>')
var bldS = Concatenate('<strong>'+Text($datapoint.STUDENT)+'</strong>')

var educ = When($datapoint.EDUCATION == 'Elementary', bldE, $datapoint.EDUCATION == 'Middle or junior high', bldE, $datapoint.EDUCATION == 'High school', bldE, $datapoint.EDUCATION =='College or university', bldE, txaE)
var stud = When(Text($datapoint.STUDENT) == '41626', bldS, Text($datapoint.STUDENT) == '42283', bldS, Text($datapoint.STUDENT) == '47971', bldS, Text($datapoint.STUDENT) =='59081', bldS, Text($datapoint.STUDENT))

return {
  cells: {
    EDUCATION: {
      displayText : educ,
      textColor: '',
      backgroundColor: '',
      textAlign: 'left',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

    STUDENT: {
      displayText : stud,
      textColor: '',
      backgroundColor: '',
      textAlign: 'right',
      iconName: '',
      iconAlign: '',
      iconColor: '',
      iconOutlineColor: ''
    },

  }
}

4. Click Done.

Shown below is the configured table element.