Table Widget (Wrap Text)

2035
9
01-18-2022 02:43 PM
MatthewThomas1
New Contributor

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.see comments that has the etc.. It does not wrap the text.

9 Replies
DavidNyenhuis1
Esri Contributor

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>`,

 

DavidNyenhuis1_0-1643046815169.png

 

Curt_H
by
New Contributor III

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!

DavidNyenhuis1
Esri Contributor

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

Neal-Kittelson
New Contributor

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

displayText: `<div style="text-wrap: wrap;">${$datapoint["LongName"]}</div>`,
 
 
0 Kudos
GFernando
New Contributor III

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

 

 

Screenshot 2023-02-27 at 9.47.59 am.png

AvaPatterson
New Contributor III

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: ''
    }
  }
}
0 Kudos
DucksInaRiver
New Contributor III

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

0 Kudos
Deastman
New Contributor II

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.

Deastman_0-1701309833279.png

 

0 Kudos
KevinMayall
Occasional Contributor III

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

Kevin