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!

[Ke_Xu]

Hi @SaraWazir,

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

Thanks,

Ke

[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. 

[ShengdiZhang · Accepted solution]

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_S... 

Please let me know if you have other questions.

Thanks,

Shengdi

[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
  },
};