These Tricks and Tips are for the OutSystems Traditional Web Application. If you are looking for the Reactive Web, Check it out here!
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.
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!
Trigger an OutSystems Action from JavaScript
One of the most useful ways to extend OutSystems’ base actions is by implementing additional JavaScript libraries and actions. If you open up most of the different widget components available on the OutSystems Forge (Custom Masks for example), you will see that they are just JavaScript libraries wrapped in a way that makes them easy to use in OS. This is great, and following the example of this component and others JavaScript/jQuery can easily be used to extend OS.
Sometimes, you end up with a JavaScript function that you would like to end by calling a standard OS Screen Action. Unfortunately, there is not currently a built-in way to do this.
So here’s where the trick comes in. You first create a Link widget with style “display:none”. I usually add these at the very bottom of the screen, sometimes outside of the main layout web block, to completely differentiate it. Set that link to the desired screen action and its method to “Ajax Submit”. Then from your JavaScript get the element by its Id and call .click() on it.
An example of both triggering an OutSystems action from JavaScript and Transferring information from JavaScript to OutSystems
Transfer information from JavaScript variable to OutSystems and Vice Versa
Another way to use JavaScript functions and OutSystems built-in Actions together is to pass data between OutSystems variables and JavaScript variables. This is achieved through the use of another hidden element!
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.
To move a value from JavaScript to OutSystems, in your JavaScript, set the value of the Input widget to your JavaScript variable. Then at the end of the function use the method above to trigger an OutSystems action from JavaScript and use the value in your screen action by referencing the OS variable (See example above.)
To move the value from OutSystems to JavaScript, trigger a screen action which sets the OS variable to whatever value you are transferring and then Ajax Refresh the input widget. You can then access this from JS by including a reference to that input’s value in your code.
let x = document.getElementById(" + HiddenInput.Id + ").value;
Using Non-Escaped Expressions for other UI fixes
The catch-all for most other UI problems you run into is writing HTML/JavaScript or CSS in expressions. Expressions that have “Escape Content” set to No.
Once you turn off “Escape content,” your expression is included in the HTML. This allows you to do anything you could do with straight HTML, including JavaScript sections. As seen in the last example, you can create JavaScript sections that reference specific id attributes of components. You can inject entire pages of copy that has basic HTML formatting, which can be very useful for Terms and Conditions or Privacy Policy.
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.
"
I can then update the value via JavaScript from the page it is on without refreshing the entire we block. There are many other possibilities using non-escaped expressions to solve any problem you run into that you just can’t solve with the built-in utilities.
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.
