The “Citizen Developer” usability of OutSystems means that most tasks on the platform are pretty straightforward and simple if you A. Know what you’re trying to do and B. Know where to look for it. But there are some things you simply can’t solve with the platform’s built-in widgets. Come and get some of the best tips and tricks you’ll find for getting OutSystems to do (just about) anything you want.

1. | Tips & Tricks for Complex UI Integrations
Tips and Tricks for
Complex UI Integrations

2. | Tips & Tricks for Complex UI Integrations| Tips & Tricks for Complex UI Integrations
Jordan
Welch
MVP |Application Developer | Highland
Solutions
@
in
jwelch@highlandsolutions.com
/jordan-h-welch
medium.com/@jhwelch

3. | Tips & Tricks for Complex UI Integrations| Tips & Tricks for Complex UI Integrations
Introduction
and a Quick Caveat.

4. | Tips & Tricks for Complex UI Integrations| Tips & Tricks for Complex UI Integrations
Using OSTagName to create
any HTML Element.

5. | Tips & Tricks for Complex UI Integrations
Add OSTagName to extended
attributes to change the HTML
element of a component
Useful for:
● Can be used on a variety of
components
■ Containers
■ Text & Expressions
■ Links
● Creating unordered lists
● Actually using Heading tags
● Breaking the rules!

6. | Tips & Tricks for Complex UI Integrations

7. | Tips & Tricks for Complex UI Integrations| Tips & Tricks for Complex UI Integrations
Interplay between OutSystems
actions and variables and
JavaScript.

8. | Tips & Tricks for Complex UI Integrations
Trigger an OutSystems Action
from JavaScript
● Create a link, assign it to the
desired action.
● Set Method to Ajax Submit
● Set a style of “display:none;”
● Click the button from
JavaScript
"document.getElementById(
""" + HBScreenAction.Id + """
).click();"

9. | Tips & Tricks for Complex UI Integrations
Transfer information from JS
variable to OS
● Create a input and set to the
desired Local Variable
● Set a style of “display:none;”
● Assign value to input from
JavaScript
● Remember to click a button!
"document.getElementById(
""" + AnInput.Id + """
).value() = JSVariable;"

10. | Tips & Tricks for Complex UI Integrations
Let's put them together!

11. | Tips & Tricks for Complex UI Integrations
All my hidden links and inputs

12. | Tips & Tricks for Complex UI Integrations| Tips & Tricks for Complex UI Integrations
Using Non-Escaped
Expressions for other UI fixes.

13. | Tips & Tricks for Complex UI Integrations
Non-escaped expressions are your
friends!
Take an expression and set “Escape Content” to “No”.
This will expand all of the content directly into the HTML of the
page, allowing you to manipulate content in ways not readily
available in the platform.

14. | Tips & Tricks for Complex UI Integrations
Non-Escaped Expressions can be used for all sorts of things
● Inject dynamic JavaScript (or CSS) into the page (as we just saw)
● Forcing a static ID for an element
■ Be able to use with specific tools
■ Update information with specific IDs
● Lazy implementation of content heavy pages (Privacy Policy)
● Programmatically add items inside of list records. At specific
points.

15. | Tips & Tricks for Complex UI Integrations

16. | Tips & Tricks for Complex UI Integrations

17. | Tips & Tricks for Complex UI Integrations| Tips & Tricks for Complex UI Integrations
For reference:
bit.ly/uitipsandtricks
@ injwelch@highlandsolutions.co
m
/jordan-h-
welch

18. | Tips & Tricks for Complex UI Integrations
Thank You!
@ injwelch@highlandsolutions.co
m
/jordan-h-welch