nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Experience Builder Text Widget - Advance Formatting

SaraWazir

Hi,

I am trying to figure out how to format my text in an experience builder text widget. This text is fed via a database with related tables and information gets dynamically updated based on a feature selection in the web map.

The text that is coming in from the database has been entered as a numbered list and bullet points. See example below:

"Reducing Impact of Rural Boardwalk Barriers: This project will: • Inventory boardroads in Alaska, providing an internet-based map for public use. • Establish construction standards for boardroads. • Provide a condition assessment that can be done by local communities. • Provide data collection of condition assessments, to aid in competing for future grant opportunities."

In the web map, I was able to use an arcade expression to format this properly into a bulleted list. However, in experience builder, I cannot find a way to do the same.

Any ideas on what is a best possible solution for formatting text into lists and bullet points in Experience Builder using the text widget?

Thank you!

Find more posts tagged with

Accepted answers

ShengdiZhang

Hi @SaraWazir ,

You can insert Arcade expressions into the text widget. Click the Arcade button on the text toolbar to open the Arcade editor.

Please note that Experience Builder supports only some HTML tags, such as <ul> and <li>.

You can find more details at: https://doc.arcgis.com/en/experience-builder/latest/configure-widgets/advanced-formatting.htm#ESRI_SECTION1_573128B984C64FBA9FEC507C66383145

Please let me know if you have other questions.

Thanks,

Shengdi

All comments

JenniferAcunto

Try $dataset instead of $feature

HannahWilson3

Your example and the documentation show the use of $feature to access the data, but I'm trying to write a dynamic text expression and the builder doesn't seem to recognize that as a valid way to get the data.

JenniferAcunto

The easiest way to do this would be to simply create faux bullet points in your Arcade using the replace() function.

// Documentation: https://arcg.is/18ejKn3

// field with the bullet formatting
var start = $feature.issue_type_other

var end = Replace(start, '• ', '<br>  • ')


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

Numbered list items make it a bit trickier, you will need to chain a series of replace statement together and account for each possible number used.

// Documentation: https://arcg.is/18ejKn3

// field with the bullet formatting
var start = $feature.issue_type_other

var bull = Replace(start, '• ', '<br>  • ')

// chain replacement statements until all possible numbers are accounted for
var num1 = Replace(bull, '1. ', '<br> 1. ')
var num2 = Replace(num1, '2. ', '<br> 2. ')
var num3 = Replace(num2, '3. ', '<br> 3. ')
var num4 = Replace(num3, '4. ', '<br> 4. ')
var end = Replace(num4, '5. ', '<br> 5. ')


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

ShengdiZhang

Hi @SaraWazir ,

You can insert Arcade expressions into the text widget. Click the Arcade button on the text toolbar to open the Arcade editor.

Please note that Experience Builder supports only some HTML tags, such as <ul> and <li>.

You can find more details at: https://doc.arcgis.com/en/experience-builder/latest/configure-widgets/advanced-formatting.htm#ESRI_SECTION1_573128B984C64FBA9FEC507C66383145

Please let me know if you have other questions.

Thanks,

Shengdi

SaraWazir

Hi @Ke_Xu,

Dynamic styling is misleading as dynamic styling only controls background color & text properties like size, bold, italic. However, it does not change the text content itself as it can’t take a long string with • characters and magically convert them into HTML <ul><li> bullets.

Unless you have an example where this has been done that you can share with us so we can learn how its done. All the examples out there that I have come across are only changing text color and size with dynamic styling.

Thank you.

Ke_Xu

Hi @SaraWazir,

Select data in the Text widget, and then you can see "Dynamic style". You can use Acade Editor.

dynamic style.png

Thanks,

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.