OutSystems is a powerful low-code development platform that gives programmers a huge variety of tools to quickly and simply build robust web applications.
However, every now and then you can run into problems you simply can’t solve with the platform’s built-in widgets. But there’s almost always a way to get what you want. Even if it takes some movin’ and shakin’.
Here are some of my favorite OutSystems workarounds and tricks.
Warning: when it comes to best practices, some of these methods can make your pages harder to understand for another OutSystems developer. Like custom SQL queries or extensions, these tricks should be used sparingly and when you cannot solve a problem with the platform’s built-in tools.
Turn a Container into any HTML Element
If you’ve ever looked at the code generated by the OutSystems platform, you will see that a container is simply a “div” HTML element. Makes sense, you are using them to separate content.
Did you know, however, that a container can be changed into any other HTML element by using the extended property “OSTagName” and setting it to the desired element type? This can be used for example to create a Unordered list by using a outer Container with OSTagName= “ul” and inner containers with OSTagName= “li”. In fact, if you open a clone of the WebPatterns eSpace and take a look at the “Bullets” component, that is exactly how it works.
Senior UI Developer Jorge Carrillo developing a unique UI for an OutSystems app | Photo by Bridgett Colling
The OSTagName can be used for any other HTML element (maybe you want some spans?), as well as be used on several other OutSystems basic widgets. Try it out!
This time we’ll be using an input widget. Like in the previous example, we will give the input a “display:none” style. Next set the input widget equal to the OS variable.
let x = document.getElementById(""" + HiddenInput.Id + """).value;
Using Non-Escaped Expressions for other UI fixes
Using non-escaped expressions also helped me solve a problem I’d been having updating a value located on a web block inside of a ListRecords. I passed in the ListRecords1.LineCount to the web block and used it to create a predictable Id for a Span tag.
"<span id=""ValueToUpdate""" + LineCount + """></span>"
With these different tricks, we can achieve a great deal in OutSystems that might seem impossible at first. From simple fixes of that little behavior you can’t figure out, to implementing an entirely different front end library from Silk UI. (This forge component is a good jumping-off point for implementing Bootstrap inside of OutSystems.)
So next time you run into something in OutSystems that you think the platform just can’t do, try to think outside the box. When you get creative, all sorts of solutions can present themselves.
Looking for an OutSystems team to help your organization build beautiful, customer-facing digital products? Highland can help. Learn more about our approach to low-code development.