Dec 23, 2019 6 min read
OutSystems Tricks & Tips for Complex UI Integrations: Reactive Web Edition
It is Thursday morning of NextStep 2019 in Denver. I am doing some last-minute preparations for my Lightning Talk “OutSystems Tricks & Tips for Complex UI Integrations”, based on my article of the same name.
The day before, OutSystems had publicly released their new Reactive Web Applications — the new and improved version of Web Applications which is built on ReactJS. On a whim, I decided to open up a new Reactive Web App in my personal environment to see how much of my talk would still be relevant with this new Web App framework. To my horror, I realized that essentially none of my tips worked in this new version!
I go ahead and give my talk, knowing there are plenty of OutSystems Web Apps that will be maintained for years to come that could use the advice. I also focused on the idea of thinking outside the box, there is almost always a way to achieve your UI goals inside of OutSystems if you are creative enough.
That all said, I think it's time for the sequel. Let's talk about getting the new Reactive Web to do whatever you want it to.
Creating HTML Elements
Goodbye OSTagName and hellooooooo “HTML Element”.
With the move to Reactive web, OutSystems has removed the ability to convert the element type of Containers and other widgets in exchange for adding an “HTML Element” widget.
With “HTML Element” you are able to add (almost) any valid HTML tag into your code. Simply add the widget and set the “tag” parameter to the needed tag.
This has some limitations that OSTagName did not have. You MUST use a valid HTML tag, and the tag is not dynamic, it must be specified at build time. Most of the time this should be fine, and still allow you to build out a more correct HTML structure where needed. This lets you better follow accessibility standards for page structure, as well as use CSS frameworks designed around traditional HTML.
Let's take a look at some of the ways you can take advantage of this.
Well, they implemented it baybeeeeee! I will take full credit for this addition because of my idea (with its whopping 10 likes), I’m sure it was not simply in the roadmap.
If you have a Screen action with input variables, simply pass them to the action like any other function, in the order the Input Variables are listed.
var integrationReturnValue = integrationCall(); $actions.SetImportantVariable(integrationReturnValue);
Other UI Fixes
This is where I have to give a moment of silence to Non-Escaped Expressions. Goodnight, sweet prince. You will be missed.
In the new Reactive Web, the page structure is much more tightly controlled through ReactJS, meaning some concessions had to be made in how much the code of a page can be altered. However, we still have some flexibility here, we just have to be more creative.
I created a Forge Component that demonstrates this concept, and will definitely be using it when I need some extra flexibility in the future.
I hope you take this article as a charge to keep thinking outside the box. OutSystems is a powerful platform, but every now and then when you run into something that doesn’t quite work the way you want it to. I can assure you that with enough ingenuity, you can find a solution.