How To: Use Arcade Expressions and HTML Tags to Configure the Text Formatting for Pop-Ups

Summary

In ArcGIS Pro, Arcade expressions and HTML tags can be used to format the text displayed in a pop-up according to the specifications applied. This article provides an example and instructions using the Arcade expressions and HTML tags to configure the text formatting for pop-ups in ArcGIS Pro.

Procedure

The workflow below utilizes the Arcade functions and HTML tags listed in the following table to configure the text formatting for pop-ups in ArcGIS Pro.

Arcade Function or HTML Tag	Attribute Result
Proper(inputText, applyToText)	Transforms a text value to title case.
Left(value, charCount)	Returns the specified number of characters from the start of a text value.
IIf(condition, trueValue, falseValue)	Returns a given value if a conditional expression evaluates as true, and returns an alternate value if that condition evaluates as false.
Concatenate(inputText, value)	Concatenates values and returns a text value.
if(fieldValue condition numberValue) return "colorCodeNumber"	Assigns a color code number based on the criteria.
<font color='#{expression}' style=''>{fieldValue}</font>	Applies color to the text.
<b>"text"</b>	Bolds the text.
<em>"text"</em>	Italicizes the text.
<u>"text"</u>	Underlines the text.

Start ArcGIS Pro and open the project.
In the Contents pane, right-click the feature class and click Configure Pop-ups to open the Configure Pop-ups pane.

Opening the Configure Pop-ups tool of the feature class from the Contents pane

Click Expressions, and click New.
In the Expression Builder tool dialog box, configure the following parameters for each of the Arcade expression:
1. For Name, rename the new expression.
2. For Title, specify a title for the new expression.
3. Specify the following Arcade expression in the Expression section:

The Arcade expression to capitalize the beginning of every word.

Proper($feature.<fieldName>, 'everyword')

The Arcade expression to replace a blank field value with 'Unknown'.

var t = Left($feature.<fieldName>, <characterNumber>)
var u = $feature.<fieldName>

IIf(t == " ", "Unknown", u)

The Arcade expression to assign colors based on three conditions.

if($feature.<fieldName> < <numericValue>){
    return "<colorCode>"
}
if($feature.<fieldName> >= <numericValue> && $feature.<fieldName> < <numericValue2>){
    return "<colorCode2>"
}
if($feature.<fieldName> >= <numericValue2> && $feature.<fieldName> <= <numericValue3>){
    return "<colorCode3>"
}

The Arcade expression to concatenate two texts when a condition is met.

var <variableName> = $feature.<fieldName>
var <variableName2> = Concatenate($feature.<fieldName2>, " <fieldValue>")
var <variableName3> = Concatenate($feature.<fieldName2>, " <fieldValue2>")

When(
ST == '<variableName2>', <variableName2>,
ST == '<variableName3>', <variableName3>)