Table Widget (Wrap Text)

[MatthewThomas1]

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.

[DavidNyenhuis1]

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

[Curt_H]

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]

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

[GFernando]

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

[KevinMayall]

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