OutSystems UI framework is a powerful tool that enables rapid development of UI for applications. However, for more advanced users, extending the framework has posed challenges, often leading to technical debt due to cloning modules and difficulties in keeping up with monthly releases. In this talk, we will explore the new points of extensibility in the OutSystems UI framework, including blocks, events and client-side actions for external providers. We will also discuss how the OutSystems UI repository in Git is open to contributions and how the npm package enables advanced developers to extend patterns (components) without having to clone OutSystems UI, or even the pattern. Join us to learn how to empower yourself (as an advanced user of the OutSystems UI framework), by leveraging the openness and the latest extensibility mechanisms of our ever present framework.
Workshop: Enabling GenAI Breakthroughs with Knowledge Graphs - GraphSummit Milan
Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility
1. Extending OutSystems UI Framework with
Openness and Extensibility
Bernardo Cardoso
Senior Software Engineer @OutSystems
Empowering Advanced
Users
2. What you’ll
learn here
1. How we got here
2. Now & Future
• The new vision
• Why
• How
3. Extensibility Vision
4. Demo
5. Public GitHub Repo
6. See you later
4. 2015-2016
Silk UI/ Silk UI Mobile
● Great out-of-the-box defaults.
● Completely closed Patterns.
Extensibility
Developer Experience
5. 2018
OutSystems UI Web
● Increased extensibility & customization with
ExtendedClass and CSS Variables.
● Atomic Design.
● Less emphasis on defaults, as increased
modularity was expected to be used by
developers.
Extensibility
Developer Experience
2015-2016
6. 2019
OutSystems UI
● Continuity of OutSystems UI Web CSS
improvements.
● Loss on the JavasScript extensibility, as
this was a continuation of the old Silk UI
Mobile.
2015-2016
2018
Extensibility
Developer Experience
7. 2019
2022
OutSystems UI (New JS Framework)
● Great increase on extensibility.
● Improvement of the out-of-the-box
defaults and developer experience.
2015-2016
2018
Extensibility
Developer Experience
17. The tools
A new JavaScript Framework, that holds all Patterns Classes and API’s
used on the low-code side.
Implementation of TypeScript and SCSS.
All done on Visual Studio Code and stored on GitHub.
25. For more information about the architecture
behind it, check the amazing talk by Ruben
Gonçalves: Building Frameworks: from concept to
completion.
You can also check the public OutSystems UI JS
TypeDocs’s Documentation, with UML Diagrams
with detailed information about properties,
methods, interfaces, inheritance, etc., for each
Pattern’s JS Class.
#openness
28. Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
UI Patterns’s Client Actions
● Low-code wrappers for the
API calls on OutSystems UI
JS.
● Covers basic use-cases like
Open/Close/Disabled/etc or
it can be used to offer other
non-essential use-cases,
that wouldn’t fit as Input
Parameters.
#openness #scalability
29. Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
“The new AdvancedFormat”
● Set[ProviderName]Configs
● Set[ProviderName]Event
● Unset[ProviderName]Event
#openness #scalability
30. Check a full detailed example on this article:
OutSystems UI Extensibility Part I
https://medium.com/@bernardocardoso/outsystems-ui-extensibility-part-i-f0d5304896ee
Amazing Author
31. Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
Direct usage of API’s from
OutSystems UI, that are not
covered by Client Actions.
Better to use them on the
Initialized event of each
Pattern.
#openness #scalability
32. Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
● Extend Pattern’s JS
Classes
● Install OutSystems UI
npm package
● Create new Patterns
using our TypeScript
architecture
● Generate your own scss
theme.
#openness #scalability
33. Check a full detailed example on this article:
OutSystems UI Extensibility Part II
https://medium.com/@bernardocardoso/outsystems-ui-extensibility-part-ii-dd35da19de4e
Amazing Author
35. Approachability
C
o
m
p
l
e
x
i
t
y
Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
High Code
(JavaScript/TypeScript)
More freedom for advanced
developers, that know and
want to have control of the
code behind the UI Patterns.
#openness #scalability
Configurability
(OutSystems Low-Code)
More extensibility solutions
abstracted to low-code.
41. RATE THE SESSION
Go to the app > agenda > select the session > rate.
Extending OutSystems UI Framework with
Openness and Extensibility
Empowering Advanced
Users