Truncating a string with ellipsis(…) in Outsystems

If you are a developer, you’ve encountered issues with overflowing text in div’s or table rows with double the size because of the text wrapping.

There’s a pretty easy way to handle this with CSS. I will show you how to use it and how to do it in Outsystems.

For demonstration purposes I will use 2 containers wrapping some text. The first container has a text string that doesn’t fit the container so it will wrap the text, resulting in a higher container than anticipated. They should have the same height.

So we need to fix the text wrapping. But adding the nowrap property, the text will overflow to the next container.

element.style {
    white-space: nowrap;
}

CSS nightmare!

How to solve this?

If you apply the CSS “text-overflow: ellipsis;” it will display the overflowed content as an ellipsis. There’s other options such as clipped or display a custom string. Read more

.Overflow_Ellipsis {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

How to solve this in Outsystems?

Quite easy actually. You just need to apply the CSS to the expression.

Edit: Outsystems has a CSS class for this, just like the one showed above. You can find it at WebPatterns/Patterns_SilkUI Theme/ .Text_overflow

But let’s step up a bit and also make it a reusable webblock in Outsystems:

• Make a new Webblock that will only get a Text as an input parameter:

• Add an expression inside a container to the webblock screen and set its value to “String” (input parameter)
• Set the tooltip (title) of the expression to “String” (input parameter):

You can also add an input parameter to your webblock that sets the title or not.

• Add the CSS class to the theme, or just the screen:

• Set the CSS class “Overflow_Ellipsis” to the container where the widget is:

• Drag and drop the webblock to the desired Web Screen.

And that was it. We have now a reusable webblock that provides a tooltip with the full string and it truncates with ellipsis the text if it doesn’t fit the parent container.

Text overflowing the div and CSS “text-overflow:ellipsis” applied. Tooltip with the full text.

Conclusion

As you could see, it’s pretty easy and standard CSS to fix this issue. I’ve seen a lot, in different projects, developers adding functions in Outsystems to truncate strings with ellispis. They would get the number of characters that a string can fit in the container as an input and then truncate the string, adding then ellipsis at the end. Please don’t. It’s hard to maintain. Imagine doing that in a Web screen that has a text expression and someone changes the layout. Now instead of fitting 10 chars, it fits 20. That would look strange, to see a string being truncated with ellipsis where it clearly would fit more text right?

Maybe there is already a Widget for Outsystems that does what I’ve just explain. I did find a Server action (OutsystemsUIWeb) which I don’t like (you have to know the number of chars)

TextEllipsis server action from OutsystemsUIWeb

See you on the next story!