Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility

Bernardo Cardoso
Bernardo CardosoFrontend Engineer em OutSystems
Extending OutSystems UI Framework with
Openness and Extensibility
Bernardo Cardoso
Senior Software Engineer @OutSystems
Empowering Advanced
Users
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
How we got here
From Silk to OutSystems UI
2015-2016
Silk UI/ Silk UI Mobile
● Great out-of-the-box defaults.
● Completely closed Patterns.
Extensibility
Developer Experience
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
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
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
Now & Future
The new vision
Why
Give more power to customers
Why
Give more power to customers
Improve low-code developer experience
Why
Give more power to customers
Improve low-code developer experience
Why
Improve code quality and security
How
Scalability
How
Scalability
Openness
How
Scalability
Openness
Community driven
How
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.
#scalability
#scalability
Providers
#scalability
Providers
OSFramework
#scalability
OutSystems Low-Code
Providers
OSFramework
OSUI API
#scalability
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
OutSystems Low-Code
Providers
OSFramework
OSUI API
#scalability
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
Extensibility Vision
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
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
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
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
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
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
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
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
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.
Extensibility Example
Install npm package & extend UI Pattern’s
JS Class
Github Repo
#openness #community-driven
OutSystems UI npm package
OutSystems UI Git Repository
PR’s are very much
welcomed! 👍
OutSystems UI npm package
OutSystems UI Git Repository
PR’s are very much
welcomed! 👍
#openness #community-driven
https://medium.com/@bernardocardoso
https://www.linkedin.com/in/bernardo-cardoso-0a740b95/
Thank You
Bernardo Cardoso
Senior Software Engineer @OutSystems
40
RATE THE SESSION
Go to the app > agenda > select the session > rate.
Extending OutSystems UI Framework with
Openness and Extensibility
Empowering Advanced
Users
1 de 41

Recomendados

3SKey Overview por
3SKey Overview3SKey Overview
3SKey OverviewSWIFT
1.3K visualizações8 slides
Xilinx vs Intel (Altera) FPGA performance comparison por
Xilinx vs Intel (Altera) FPGA performance comparison Xilinx vs Intel (Altera) FPGA performance comparison
Xilinx vs Intel (Altera) FPGA performance comparison Roy Messinger
3.3K visualizações13 slides
Floating point units por
Floating point unitsFloating point units
Floating point unitsdipugovind
6.1K visualizações32 slides
Smart Contracts Programming Tutorial | Solidity Programming Language | Solidi... por
Smart Contracts Programming Tutorial | Solidity Programming Language | Solidi...Smart Contracts Programming Tutorial | Solidity Programming Language | Solidi...
Smart Contracts Programming Tutorial | Solidity Programming Language | Solidi...Edureka!
2.7K visualizações15 slides
Physical Verification Design.pdf por
Physical Verification Design.pdfPhysical Verification Design.pdf
Physical Verification Design.pdfAhmed Abdelazeem
2.6K visualizações23 slides
Introduction to Solidity and Smart Contract Development (9).pptx por
Introduction to Solidity and Smart Contract Development (9).pptxIntroduction to Solidity and Smart Contract Development (9).pptx
Introduction to Solidity and Smart Contract Development (9).pptxGene Leybzon
129 visualizações26 slides

Mais conteúdo relacionado

Mais procurados

Presentation on Vowifi por
Presentation on VowifiPresentation on Vowifi
Presentation on Vowifisrishti jain
8.9K visualizações16 slides
wireless notice board using RF communication por
wireless notice board using RF communicationwireless notice board using RF communication
wireless notice board using RF communicationROHIT SAGAR
4K visualizações18 slides
Solidity Simple Tutorial EN por
Solidity Simple Tutorial ENSolidity Simple Tutorial EN
Solidity Simple Tutorial ENNicholas Lin
1.8K visualizações53 slides
Pembahasan NETCOM Beginner Level Skill Pretest por
Pembahasan NETCOM Beginner Level Skill PretestPembahasan NETCOM Beginner Level Skill Pretest
Pembahasan NETCOM Beginner Level Skill PretestI Putu Hariyadi
863 visualizações45 slides
vlan por
vlanvlan
vlanSunrise Dawn
632 visualizações20 slides
Instantly tradeable NFT contracts based on ERC-1155 standard por
Instantly tradeable NFT contracts based on ERC-1155 standardInstantly tradeable NFT contracts based on ERC-1155 standard
Instantly tradeable NFT contracts based on ERC-1155 standardGene Leybzon
479 visualizações21 slides

Mais procurados(20)

Presentation on Vowifi por srishti jain
Presentation on VowifiPresentation on Vowifi
Presentation on Vowifi
srishti jain8.9K visualizações
wireless notice board using RF communication por ROHIT SAGAR
wireless notice board using RF communicationwireless notice board using RF communication
wireless notice board using RF communication
ROHIT SAGAR4K visualizações
Solidity Simple Tutorial EN por Nicholas Lin
Solidity Simple Tutorial ENSolidity Simple Tutorial EN
Solidity Simple Tutorial EN
Nicholas Lin1.8K visualizações
Pembahasan NETCOM Beginner Level Skill Pretest por I Putu Hariyadi
Pembahasan NETCOM Beginner Level Skill PretestPembahasan NETCOM Beginner Level Skill Pretest
Pembahasan NETCOM Beginner Level Skill Pretest
I Putu Hariyadi863 visualizações
vlan por Sunrise Dawn
vlanvlan
vlan
Sunrise Dawn632 visualizações
Instantly tradeable NFT contracts based on ERC-1155 standard por Gene Leybzon
Instantly tradeable NFT contracts based on ERC-1155 standardInstantly tradeable NFT contracts based on ERC-1155 standard
Instantly tradeable NFT contracts based on ERC-1155 standard
Gene Leybzon479 visualizações
VERILOG HDL :: Blocking & NON- Blocking assignments por Dr.YNM
VERILOG HDL :: Blocking & NON- Blocking assignments VERILOG HDL :: Blocking & NON- Blocking assignments
VERILOG HDL :: Blocking & NON- Blocking assignments
Dr.YNM 788 visualizações
Arduino based electronic notice board and controlling of home appliances by u... por Nunna Swathi
Arduino based electronic notice board and controlling of home appliances by u...Arduino based electronic notice board and controlling of home appliances by u...
Arduino based electronic notice board and controlling of home appliances by u...
Nunna Swathi1.7K visualizações
Decentralised Exchanges - An Introduction por Priyab Satoshi
Decentralised Exchanges - An IntroductionDecentralised Exchanges - An Introduction
Decentralised Exchanges - An Introduction
Priyab Satoshi658 visualizações
vlsi projects using verilog code 2014-2015 por E2MATRIX
vlsi projects using verilog code 2014-2015vlsi projects using verilog code 2014-2015
vlsi projects using verilog code 2014-2015
E2MATRIX7.4K visualizações
State of Bitcoin and Blockchain 2016 por CoinDesk
State of Bitcoin and Blockchain 2016State of Bitcoin and Blockchain 2016
State of Bitcoin and Blockchain 2016
CoinDesk305.5K visualizações
FIDO Workshop-Demo Breakdown.pptx por FIDO Alliance
FIDO Workshop-Demo Breakdown.pptxFIDO Workshop-Demo Breakdown.pptx
FIDO Workshop-Demo Breakdown.pptx
FIDO Alliance653 visualizações
2Overview of Primetime.pptx por ShivangPanara
2Overview of Primetime.pptx2Overview of Primetime.pptx
2Overview of Primetime.pptx
ShivangPanara350 visualizações
An introduction to blockchain and hyperledger v ru por LennartF
An introduction to blockchain and hyperledger v ruAn introduction to blockchain and hyperledger v ru
An introduction to blockchain and hyperledger v ru
LennartF325 visualizações
CCNA Chapter1 por Mohammed Ali
CCNA Chapter1CCNA Chapter1
CCNA Chapter1
Mohammed Ali5.2K visualizações
IPLOOK Networks.pdf por IPLOOK Networks
IPLOOK Networks.pdfIPLOOK Networks.pdf
IPLOOK Networks.pdf
IPLOOK Networks119 visualizações

Similar a Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility

Introduction to UX for Mesiniaga Academy por
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga AcademyZainul Zain
387 visualizações67 slides
Play with azure functions por
Play with azure functionsPlay with azure functions
Play with azure functionsBaskar rao Dsn
105 visualizações28 slides
Azure Functions in Action #CodePaLOUsa por
Azure Functions in Action #CodePaLOUsaAzure Functions in Action #CodePaLOUsa
Azure Functions in Action #CodePaLOUsaBaskar rao Dsn
93 visualizações26 slides
Tips for Beginning Cognos Report Studio Authors: Demonstration of Techniques por
Tips for Beginning Cognos Report Studio Authors: Demonstration of TechniquesTips for Beginning Cognos Report Studio Authors: Demonstration of Techniques
Tips for Beginning Cognos Report Studio Authors: Demonstration of TechniquesSenturus
735 visualizações34 slides
Udvid din test portefølje med coded ui test og cloud load test por
Udvid din test portefølje med coded ui test og cloud load testUdvid din test portefølje med coded ui test og cloud load test
Udvid din test portefølje med coded ui test og cloud load testPeter Lindberg
1.5K visualizações39 slides
King Tut Architecture por
King Tut ArchitectureKing Tut Architecture
King Tut ArchitectureGary Pedretti
1.2K visualizações46 slides

Similar a Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility(20)

Introduction to UX for Mesiniaga Academy por Zainul Zain
Introduction to UX for Mesiniaga AcademyIntroduction to UX for Mesiniaga Academy
Introduction to UX for Mesiniaga Academy
Zainul Zain387 visualizações
Play with azure functions por Baskar rao Dsn
Play with azure functionsPlay with azure functions
Play with azure functions
Baskar rao Dsn105 visualizações
Azure Functions in Action #CodePaLOUsa por Baskar rao Dsn
Azure Functions in Action #CodePaLOUsaAzure Functions in Action #CodePaLOUsa
Azure Functions in Action #CodePaLOUsa
Baskar rao Dsn93 visualizações
Tips for Beginning Cognos Report Studio Authors: Demonstration of Techniques por Senturus
Tips for Beginning Cognos Report Studio Authors: Demonstration of TechniquesTips for Beginning Cognos Report Studio Authors: Demonstration of Techniques
Tips for Beginning Cognos Report Studio Authors: Demonstration of Techniques
Senturus735 visualizações
Udvid din test portefølje med coded ui test og cloud load test por Peter Lindberg
Udvid din test portefølje med coded ui test og cloud load testUdvid din test portefølje med coded ui test og cloud load test
Udvid din test portefølje med coded ui test og cloud load test
Peter Lindberg1.5K visualizações
King Tut Architecture por Gary Pedretti
King Tut ArchitectureKing Tut Architecture
King Tut Architecture
Gary Pedretti1.2K visualizações
Innovation Generation - The Mobile Meetup: Android Best Practices por Solstice Mobile Argentina
Innovation Generation - The Mobile Meetup: Android Best PracticesInnovation Generation - The Mobile Meetup: Android Best Practices
Innovation Generation - The Mobile Meetup: Android Best Practices
Solstice Mobile Argentina632 visualizações
BadesahebKBichu por Badesaheb Bichu
BadesahebKBichuBadesahebKBichu
BadesahebKBichu
Badesaheb Bichu357 visualizações
Supriya_Bhide por Supriya Pathak
Supriya_BhideSupriya_Bhide
Supriya_Bhide
Supriya Pathak359 visualizações
Shield UI JavaScript Chart por JStoikov
Shield UI JavaScript ChartShield UI JavaScript Chart
Shield UI JavaScript Chart
JStoikov3.2K visualizações
Transitioning to Cognos Workspace Advanced: Migrating from Query & Analysis S... por Senturus
Transitioning to Cognos Workspace Advanced: Migrating from Query & Analysis S...Transitioning to Cognos Workspace Advanced: Migrating from Query & Analysis S...
Transitioning to Cognos Workspace Advanced: Migrating from Query & Analysis S...
Senturus1.9K visualizações
prod-dev-management.pptx por Michael Ming Lei
prod-dev-management.pptxprod-dev-management.pptx
prod-dev-management.pptx
Michael Ming Lei54 visualizações
Sitecore user group mumbai sitecore commerce extension por Jitendra Soni
Sitecore user group mumbai  sitecore commerce extensionSitecore user group mumbai  sitecore commerce extension
Sitecore user group mumbai sitecore commerce extension
Jitendra Soni50 visualizações
Ahmedabad Salesforce Meetup por Shankar Sharma
Ahmedabad Salesforce MeetupAhmedabad Salesforce Meetup
Ahmedabad Salesforce Meetup
Shankar Sharma351 visualizações
Office Add-ins community call-March 2019 por Microsoft 365 Developer
Office Add-ins community call-March 2019Office Add-ins community call-March 2019
Office Add-ins community call-March 2019
Microsoft 365 Developer865 visualizações
CookpadTechConf2018-(Mobile)TestAutomation por Kazuaki Matsuo
CookpadTechConf2018-(Mobile)TestAutomationCookpadTechConf2018-(Mobile)TestAutomation
CookpadTechConf2018-(Mobile)TestAutomation
Kazuaki Matsuo3.1K visualizações
Getting Started With Coded UI testing: Building Your First Automated Test por Imaginet
Getting Started With Coded UI testing: Building Your First Automated TestGetting Started With Coded UI testing: Building Your First Automated Test
Getting Started With Coded UI testing: Building Your First Automated Test
Imaginet1.5K visualizações
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from... por Davalen LLC
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Where Does IBM Web Experience Factory Fit in your Architecture? TECH-D22 from...
Davalen LLC4.9K visualizações
TomaszPoszytek_ALM-Fundamentals_SS2023.pdf por Tomasz Poszytek
TomaszPoszytek_ALM-Fundamentals_SS2023.pdfTomaszPoszytek_ALM-Fundamentals_SS2023.pdf
TomaszPoszytek_ALM-Fundamentals_SS2023.pdf
Tomasz Poszytek16 visualizações

Último

Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated... por
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...TomHalpin9
6 visualizações29 slides
Keep por
KeepKeep
KeepGeniusee
78 visualizações10 slides
Dapr Unleashed: Accelerating Microservice Development por
Dapr Unleashed: Accelerating Microservice DevelopmentDapr Unleashed: Accelerating Microservice Development
Dapr Unleashed: Accelerating Microservice DevelopmentMiroslav Janeski
13 visualizações29 slides
ADDO_2022_CICID_Tom_Halpin.pdf por
ADDO_2022_CICID_Tom_Halpin.pdfADDO_2022_CICID_Tom_Halpin.pdf
ADDO_2022_CICID_Tom_Halpin.pdfTomHalpin9
5 visualizações33 slides
The Path to DevOps por
The Path to DevOpsThe Path to DevOps
The Path to DevOpsJohn Valentino
5 visualizações6 slides
FOSSLight Community Day 2023-11-30 por
FOSSLight Community Day 2023-11-30FOSSLight Community Day 2023-11-30
FOSSLight Community Day 2023-11-30Shane Coughlan
6 visualizações18 slides

Último(20)

Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated... por TomHalpin9
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
Dev-HRE-Ops - Addressing the _Last Mile DevOps Challenge_ in Highly Regulated...
TomHalpin96 visualizações
Keep por Geniusee
KeepKeep
Keep
Geniusee78 visualizações
Dapr Unleashed: Accelerating Microservice Development por Miroslav Janeski
Dapr Unleashed: Accelerating Microservice DevelopmentDapr Unleashed: Accelerating Microservice Development
Dapr Unleashed: Accelerating Microservice Development
Miroslav Janeski13 visualizações
ADDO_2022_CICID_Tom_Halpin.pdf por TomHalpin9
ADDO_2022_CICID_Tom_Halpin.pdfADDO_2022_CICID_Tom_Halpin.pdf
ADDO_2022_CICID_Tom_Halpin.pdf
TomHalpin95 visualizações
The Path to DevOps por John Valentino
The Path to DevOpsThe Path to DevOps
The Path to DevOps
John Valentino5 visualizações
FOSSLight Community Day 2023-11-30 por Shane Coughlan
FOSSLight Community Day 2023-11-30FOSSLight Community Day 2023-11-30
FOSSLight Community Day 2023-11-30
Shane Coughlan6 visualizações
EV Charging App Case por iCoderz Solutions
EV Charging App Case EV Charging App Case
EV Charging App Case
iCoderz Solutions9 visualizações
Airline Booking Software por SharmiMehta
Airline Booking SoftwareAirline Booking Software
Airline Booking Software
SharmiMehta9 visualizações
360 graden fabriek por info33492
360 graden fabriek360 graden fabriek
360 graden fabriek
info33492162 visualizações
Ports-and-Adapters Architecture for Embedded HMI por Burkhard Stubert
Ports-and-Adapters Architecture for Embedded HMIPorts-and-Adapters Architecture for Embedded HMI
Ports-and-Adapters Architecture for Embedded HMI
Burkhard Stubert29 visualizações
Fleet Management Software in India por Fleetable
Fleet Management Software in India Fleet Management Software in India
Fleet Management Software in India
Fleetable12 visualizações
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with... por sparkfabrik
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
20231129 - Platform @ localhost 2023 - Application-driven infrastructure with...
sparkfabrik8 visualizações
Flask-Python.pptx por Triloki Gupta
Flask-Python.pptxFlask-Python.pptx
Flask-Python.pptx
Triloki Gupta9 visualizações
Page Object Model por artembondar5
Page Object ModelPage Object Model
Page Object Model
artembondar56 visualizações
JioEngage_Presentation.pptx por admin125455
JioEngage_Presentation.pptxJioEngage_Presentation.pptx
JioEngage_Presentation.pptx
admin1254558 visualizações
The Era of Large Language Models.pptx por AbdulVahedShaik
The Era of Large Language Models.pptxThe Era of Large Language Models.pptx
The Era of Large Language Models.pptx
AbdulVahedShaik7 visualizações
Introduction to Gradle por John Valentino
Introduction to GradleIntroduction to Gradle
Introduction to Gradle
John Valentino5 visualizações
Playwright Retries por artembondar5
Playwright RetriesPlaywright Retries
Playwright Retries
artembondar55 visualizações
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium... por Lisi Hocke
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...
Team Transformation Tactics for Holistic Testing and Quality (Japan Symposium...
Lisi Hocke35 visualizações
MS PowerPoint.pptx por Litty Sylus
MS PowerPoint.pptxMS PowerPoint.pptx
MS PowerPoint.pptx
Litty Sylus7 visualizações

Empowering Advanced Users: Extending OutSystems UI Framework with Openness and Extensibility