topic Re: Table Widget (Wrap Text) in ArcGIS Dashboards Questions

Table Widget (Wrap Text)

MatthewThomas1 — Tue, 18 Jan 2022 22:43:44 GMT

Ops Dashboard now has the Table Widget which is great. Is there a way to use Arcade to allow the table to "Wrap Text". It seems like the table is designed to display a set amount of characters and not a field for longer comments.

see comments that has the etc.. It does not wrap the text.

Re: Table Widget (Wrap Text)

DavidNyenhuis1 — Mon, 24 Jan 2022 17:54:51 GMT

Hi @MatthewThomas1 ,

Thanks for the question. The product team will see if there are ways to improve the handling of long strings.

Just playing with it for a little bit, I wasn't able to get word wrapping working via Arcade, but I was able to introduce a horizontal scroll that allows you to read longer strings.

displayText: `<div style="overflow-x: scroll; ">${$datapoint["LongName"]}</div>`,

Re: Table Widget (Wrap Text)

Curt_H — Fri, 25 Nov 2022 18:26:51 GMT

Hi @DavidNyenhuis1 - Your scrollbar for the displayText is great and much appreciated! I see this initial post was almost a year ago. Although the scrollbar certainly helps - wrapping of text would definitely be preferred for the user. Any word or update on addressing long text in a table widgets field?

Thanks!

Re: Table Widget (Wrap Text)

DavidNyenhuis1 — Mon, 28 Nov 2022 22:22:54 GMT

Hi @Curt_H,

No near-term plans to update the table element to allow for text wrapping out-of-the box. One other trick you could try is to use hover text (introduced March 2022) to display long strings in tables. Or, there may be some CSS styles you can work with to get the word wrapping you desire within the cell.

All the best

Re: Table Widget (Wrap Text)

GFernando — Tue, 28 Feb 2023 13:58:27 GMT

Hi @MatthewThomas1, @DavidNyenhuis1 and @Curt_H

Here is an Arcade script for wrapping text.
Change the variable lineLength as per your requirements.

Cheers! - Gee Fernando

var longText = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." // Split longText into individual words var longTextarray = Split(longText, ' ') // Characters per line before line break var lineLength = 50 var wrapText = "" var words = 0 var characters = 0 while(words < Count(longTextarray)){ // Count number of characters per line characters += Count(longTextarray[words] + " ") // When number of characters exceed lineLength add a line break, otherwise add a SPACE wrapText += longTextarray[words] + When(characters >= lineLength, "<br>", " ") // When number of characters exceed lineLength, reset characters variable back to 0 characters = When(characters >= lineLength, 0, characters) words += 1 } wrapText

Re: Table Widget (Wrap Text)

KevinMayall — Mon, 27 Feb 2023 20:21:58 GMT

I was just working on this a few days ago. Great code. Thank you!

Re: Table Widget (Wrap Text)

apgis16 — Mon, 03 Apr 2023 16:32:44 GMT

Does this code still work for grouped values in a table? My code is this, but I want to word wrap for the uniqueid field.

return {

cells: {

uniqueid: {

displayText: $datapoint.uniqueid,

hoverText: $datapoint.uniqueid,

textColor: '',

backgroundColor: '',

textAlign: 'left',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

sum_1st_floor_percent_complete_: {

displayText: $datapoint.sum_1st_floor_percent_complete_,

hoverText: $datapoint.sum_1st_floor_percent_complete_,

textColor: '',

backgroundColor: '',

textAlign: 'right',

iconName: '',

iconAlign: '',

iconColor: '',

iconOutlineColor: ''

}

Re: Table Widget (Wrap Text)

Deastman — Thu, 30 Nov 2023 02:10:33 GMT

Nice one Gee!

I just used this in a link chart coming off an ArcGIS Knowledge.

For some reason the <br> didn't work... so subbed in textFormatting.newLine. Worked a treat.

Re: Table Widget (Wrap Text)

DucksInaRiver — Mon, 18 Dec 2023 20:54:25 GMT

@apgis16 Did you have any success? I'm doing the same thing and trying to apply the above expression, but no luck.

Re: Table Widget (Wrap Text)

Neal_t_k — Tue, 19 Mar 2024 16:23:21 GMT

"text-wrap" seems to work instead of using "overflow"

displayText: `<div style="text-wrap: wrap;">${$datapoint["LongName"]}</div>`,

Re: Table Widget (Wrap Text)

Cierra_Scriven — Mon, 30 Sep 2024 18:16:44 GMT

This is the correct answer, I used it and got wrapping going. Thanks Neal-Kittelson!!!!
Evidence:

Re: Table Widget (Wrap Text)

Geraldine — Thu, 15 May 2025 08:48:50 GMT

Great, thanks! But the titles don't wrap up. Is there a way of applying this to the field titles too?

Also, when advanced formatting is applied to a table, fields with coded values show the code instead of the description.

Re: Table Widget (Wrap Text)

MarcelBeckmann — Tue, 25 Nov 2025 13:47:37 GMT

It is a little late, but in case someone else is reading this.

You have to insert the code from GFernando above the configuration of your cells.--> Bevore the return.
Exchange the long string with $datapoint.YOUR_VALUE

The wraped Text is then stored in the variable "wrapText" and you can use it in the definition of your cells.

var longText =$datapoint.uniqueid

// Split longText into individual words
var longTextarray = Split(longText, ' ')

// Characters per line before line break
var lineLength = 50

var wrapText = ""

var words = 0
var characters = 0

while(words < Count(longTextarray)){

// Count number of characters per line
characters += Count(longTextarray[words] + " ")

// When number of characters exceed lineLength add a line break, otherwise add a SPACE
wrapText += longTextarray[words] + When(characters >= lineLength, "<br>", " ")

// When number of characters exceed lineLength, reset characters variable back to 0
characters = When(characters >= lineLength, 0, characters)

words += 1
}

return {
cells: {
    uniqueid: {
    displayText: wrapText,
    hoverText: $datapoint.uniqueid,
    textColor: '',
    backgroundColor: '',
    textAlign: 'left',
    iconName: '',
    iconAlign: '',
    iconColor: '',
    iconOutlineColor: ''
},
...