Frontend & OutSystems Use-Cases
Hands-on examples and small demos — custom UI patterns, CSS, and JavaScript techniques for OutSystems and beyond.
-
Container queries
For a long time CSS has media queries. Using them, we can determine how our components and layouts respond to the window width. But CSS has evolved and we can now use Container queries. The content inside of it reacts to the parent container width, instead of the window.
-
Shared menu between different applications/technologies
A side menu being used on a Traditional Web App, a Reactive App and an ODC App. In a real project implementation, any update would be received immediately by the 3 apps. Both the REST endpoint and the JavaScript code are simulated by using a CDN.
-
Communication between multiple iframes
Multiple iframes emitting events with pure JavaScript and reacting to them. The shell application and the inner iframes are all built using OutSystems. Open the console!
-
Web Component with dynamic content from an OutSystems Application
The JavaScript code was written for an article in January 2022 implementing a Web Component. It demonstrates how we can use dynamic content from an OutSystems Application and use it inside a fully custom Web Component.