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

3. How we got here
From Silk to OutSystems UI

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

8. Now & Future
The new vision

9. Why

10. Give more power to customers
Why

11. Give more power to customers
Improve low-code developer experience
Why

12. Give more power to customers
Improve low-code developer experience
Why
Improve code quality and security

13. How

14. Scalability
How

15. Scalability
Openness
How

16. Scalability
Openness
Community driven
How

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.

18. #scalability

19. #scalability

20. Providers
#scalability

21. Providers
OSFramework
#scalability

22. OutSystems Low-Code
Providers
OSFramework
OSUI API
#scalability

23. OutSystems Low-Code
Providers
OSFramework
OSUI API
#scalability
OnInitialize
OnReady
ParametersChange
Destroy
OutSystems.OSUI.<PatternsName>API.Create
OutSystems.OSUI.<PatternsName>API.Initialize
OutSystems.OSUI.<PatternsName>API.ChangeProperty
OutSystems.OSUI.<PatternsName>API.Destroy

24. OutSystems Low-Code
Providers
OSFramework
OSUI API
#scalability

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

26. Extensibility Vision

27. Block’s Input Parameters
OutSystems UI Providers Client Actions
OutSystems UI JS API
Custom Code
OutSystems UI Client Actions
Blocks Input Parameters
● Root level
● OptionalConfigs
structures
#openness #scalability

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

34. 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
Configurability
(OutSystems Low-Code)
More extensibility solutions
abstracted to low-code.
#openness #scalability

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.

36. Extensibility Example
Install npm package & extend UI Pattern’s
JS Class

37. Github Repo

38. #openness #community-driven
OutSystems UI npm package
OutSystems UI Git Repository
PR’s are very much
welcomed! 👍

39. OutSystems UI npm package
OutSystems UI Git Repository
PR’s are very much
welcomed! 👍
#openness #community-driven

40. https://medium.com/@bernardocardoso
https://www.linkedin.com/in/bernardo-cardoso-0a740b95/
Thank You
Bernardo Cardoso
Senior Software Engineer @OutSystems
40

41. RATE THE SESSION
Go to the app > agenda > select the session > rate.
Extending OutSystems UI Framework with
Openness and Extensibility
Empowering Advanced
Users