OutSystems Tricks & Tips for Complex UI Integrations
Download as PPTX, PDF1 like1,002 views
This document provides tips and tricks for complex UI integrations using OutSystems. It includes techniques for manipulating HTML elements, triggering OutSystems actions from JavaScript, and using non-escaped expressions for enhanced content management. Key methods discussed involve creating invisible inputs and links to facilitate dynamic interactions within the UI.
OutSystems Tricks & Tips for Complex UI Integrations
- 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
Editor's Notes
- #3: intro
- #4: Introduction Outsystems is great, but sometimes you want to do something that isn’t immediately apparent Here are tips to think outside the box to achieve anything This also lets you work with a more traditional front end developer, and implementing CSS Frameworks like Bootstrap Anything from a small component you want to implement or an entirely new frontend Caveat This should be treated like advanced queries Makes less readable. harder for any OS developers
- #10: Use “RunJavaScript” to transfer the other way
- #11: Explain we’re about to see how to do this part.