Format text as bulleted or numbered lists in the ArcGIS Experience Builder Text widget

Summary

In ArcGIS Experience Builder, dynamic text can be formatted as bulleted or numbered lists in the Text widget, allowing content to be clear and structured. This is useful when displaying multiple values in a record, as it improves readability by organizing information into a well-formatted list.

This article provides the options to format text as bulleted or numbered lists in the Text widget in ArcGIS Experience Builder.

Procedure

Configure the Text format of the Text widget

1. Create a web experience in ArcGIS Experience Builder. Refer to ArcGIS Experience Builder: Create your first web experience for instructions.
2. In the Insert widget panel, on the New tab, under Page elements, drag and drop the Text widget onto the canvas.
3. In the configuration panel, on the Content tab, toggle Connect to data on and click Select data. In the Select data panel, select the feature layer from the map.
4. On the canvas, click Dynamic content on the widget’s toolbar to add the preferred content from the Dynamic content panel.
5. In the Dynamic content panel, on the Attribute tab, under Data, select Selected features from the second drop-down menu and click the preferred field. Configure the widget as required.
6. In the configuration panel, on the Content tab, under Text format, click Bullets or Numbering to apply the preferred list formatting.

7. Press Enter to continue adding bullet points or numbering in the Text widget.
8. Click Save and publish the web experience.

Note:
Alternatively, copy the preferred text and click Edit  on the widget’s toolbar before pasting it directly into the widget. Ensure the copied text is properly formatted as bulleted or numbered lists.

The experience below shows formatted texts using bulleted and numbered lists in the Text widgets.

Insert HTML tags in the text field of the layer's attribute table in ArcGIS Online

1. Log in to ArcGIS Online, navigate to Content > My content and open the item page of the hosted feature layer containing the text field.
2. On the Data tab, in the Table view, double-click the cell of the field containing the text to activate editing.
3. Insert the HTML tags provided below in the cell to apply the list formatting.

• Use the <ul> <li> tags to create a bulleted list.

<ul>
  <li>attributeText1</li>
  <li>attributeText2</li>
</ul>

• Use the <ol> <li> tags to create a numbered list.

<ol>
  <li>attributeText1</li>
  <li>attributeText2</li>
</ol>

Note:
Repeat Steps 2 and 3 to apply the list formatting for other records in the attribute table.

The attribute table below shows formatted text values in the field.

4. Repeat Steps 1 through 4 from the first workaround to add and configure a Text widget in ArcGIS Experience Builder.
5. In the Dynamic content panel, on the Attribute tab, under Data, select Selected features from the second drop-down menu and click the field containing the formatted text values. Configure the widget as required.
6. Click Save and publish the web experience.

The experience below shows formatted texts using bulleted and numbered lists in the Text widgets.

Use custom Arcade expressions for dynamic text in the List widget

Note:
This workaround is applicable when the dynamic text field added to the List widget contains multiple values formatted as inline bullet points or numbering.

1. Create a web experience in ArcGIS Experience Builder. Refer to ArcGIS Experience Builder: Create your first web experience for instructions.
2. In the Insert widget panel, on the New tab, under Data centric, drag and drop the List widget onto the canvas.
3. In the configuration panel, on the Content tab, configure the settings below.

1. Under Select a template, select the preferred template and click Continue.
2. Under Data, click Select data. In the Select data panel, select the feature layer from the map.

4. On the canvas, click the first item in the List widget and select Arcade .
5. In the Arcade script window, highlight the content and remove the existing expression. Copy and paste one of the expressions below to apply the preferred list formatting. Replace <fieldName> with the field name containing the bulleted or numbered items.

• The Arcade expression to create a bulleted list

var parts = Split(Replace($feature.<fieldName>, "\n", ""), "•");

var output = "";

for (var i = 0; i < Count(parts); i++) {
    var item = Trim(parts[i]);
    if (item != "") {
        output += "• " + item + TextFormatting.NewLine;
    }
}

return {
    value: output,
    text: {
        // size: 14,
        // color: 'rgb(0, 0, 255)',
        // bold: true,
        // italic: false,
        // underline: false,
        // strike: false
    }
};

• The Arcade expression to create a numbered list

var txt = $feature.<fieldName>;

txt = Replace(txt, "  ", " ");

for (var i = 1; i <= 50; i++) {
    var pattern = " " + i + ".";
    txt = Replace(txt, pattern, TextFormatting.NewLine + i + ".");
}

if (Left(txt, 2) == "1.") {
    txt = "1." + Mid(txt, 2);
}

return {
    value: txt,
    text: {
        // size: 14,
        // color: 'rgb(0, 0, 255)',
        // bold: true,
        // italic: false,
        // underline: false,
        // strike: false
    }
};

6. Click Insert. Configure the List widget as required.

Note:
Optionally, click Dynamic content  on the widget’s toolbar to add the preferred content from the Dynamic content panel to be displayed in the List widget. 

7. Click Save and publish the web experience.

The experience below shows formatted texts using bulleted and numbered lists in the List widgets.