SlideShare a Scribd company logo
| Templates: Where should its elements be? In the template or on another module?
Templates: Where should
its elements be? In the
template or on another
module?
| Templates: Where should its elements be? In the template or on another module?| Templates: Where should its elements be? In the template or on another module?
José
Costa
OutSystems MVP, Senior Trainer | ITUp
@
in
jose.costa@itup.pt
/josecccosta
| Templates: Where should its elements be? In the template or on another module?
Where have you seen a Template?
| Templates: Where should its elements be? In the template or on another module?
What is an Application Template?
● Module (Application) from which you start building your own modules
● Makes development more efficient
○ Already contains many predefined elements
○ E.g., Theme, CSS, Layout Blocks and Placeholders, logic, etc.
| Templates: Where should its elements be? In the template or on another module?
Types of Templates
● Built-in Application Templates
○ Web: Side Menu, Top Menu
○ Mobile: Phone, Tablet, Universal
● Custom Application Templates
○ Created by you
○ Installed from the Forge
| Templates: Where should its elements be? In the template or on another module?
How to create one?
● Create new application (web or mobile)
● Create module and name it Template_<module_name>
○ <module_name> is the name of the new template
● Insert a description and an icon in the properties of the module
● Publish it
| Templates: Where should its elements be? In the template or on another module?
How does it
work?
When you create your first*
module
● Clone of the template is
made
● Clone is renamed to the
name of your module
| Templates: Where should its elements be? In the template or on another module?
Bottom line
Your first Web Responsive or Mobile module of your application will be a clone
of your template module.
| Templates: Where should its elements be? In the template or on another module?
Analysing a Template module
| Templates: Where should its elements be? In the template or on another module?
TopMenu
● Common with Login (and
Menu)
■ Every app that uses this template
will have it's own login screen
● Theme
■ Based on some other theme
■ Organization's or department's
theme
■ I can change the CSS and other
properties of the theme directly
on the module
| Templates: Where should its elements be? In the template or on another module?
Theme on Another Module
● Common (with login)
● No theme in here
■ just a reference to a theme on
another module
● Theme related web blocks
also not in here
■ E.g., Menu
● Apps built with this template
will all have the same look
and feel
| Templates: Where should its elements be? In the template or on another module?
"Everything" on another module
● No Common in here
■ just a reference to the other
module
■ Login is common to all apps
● No theme in here
■ just a reference to a theme on
another module
● Apps built with this template
will all have the same look
and feel and same login
entry point
| Templates: Where should its elements be? In the template or on another module?
Other Scenarios in Template
● Centralized Login logic
■ UI can be different
■ Login logic is the same
■ can be some external system
● Sample screens
■ To showcase your Style Guide
| Templates: Where should its elements be? In the template or on another module?
Changed Element in the Template
● If Element is in Template module
■ Other modules based on that template will not be affected
■ Remember: it's a clone
● If Element is a reference
■ May have to refresh dependencies to see change reflected in module
■ Normal dependency "rules" apply
| Templates: Where should its elements be? In the template or on another module?
Templates...
Where should its elements be?
In the template or on another module?
It depends!
| Tenants: A Look Behind The Scenes
Thank You!
@ injose.costa@itup.pt /josecccosta
| NextStep Denver - Final walk-through
Stay for our NEO party
4:30pm - 6:30pm

More Related Content

What's hot (16)

PDF
GraphQL vs BFF: A critical perspective
Pronovix
 
PPTX
Accessibility in Low-Code: Applications with no Limits
OutSystems
 
PDF
Design patterns in PHP - PHP TEAM
Nishant Shrivastava
 
PPTX
“One man” development process model
Silicon Straits
 
PPTX
Implementing Scrum for large scale projects (@DCB14)
Biser Simeonov
 
PPTX
Top front-end techniques for OutSystems
Ruben Goncalves
 
PPTX
Neo in Wonderland: Essential Tools for an Outsystems Architect
OutSystems
 
PDF
Your first 5 PHP design patterns - ThatConference 2012
Aaron Saray
 
PPSX
Outsystems user group 2021 03 04 - cm app
Providit
 
PPTX
Extending OutSystems with Javascript
RitaDias72
 
PDF
Android Development Slovenia Meetup #4 - How to have a working designer deve...
Infinum
 
PDF
MuleSoft London Community September 2020 - Project Vita
Pace Integration
 
PDF
Frontend Development vs Backend Development | Detailed Comparison
Mariya James
 
PDF
Mobile First with Angular.JS - Đ’Đ»Đ°ĐŽĐžĐŒĐžŃ€ ĐŠĐČДтĐșĐŸĐČ, Obecto
beITconference
 
PPTX
Annotation processing
Benjamin Cheng
 
PDF
[2015.07.04] NodeJS & Golang
Alexander Kaloshin
 
GraphQL vs BFF: A critical perspective
Pronovix
 
Accessibility in Low-Code: Applications with no Limits
OutSystems
 
Design patterns in PHP - PHP TEAM
Nishant Shrivastava
 
“One man” development process model
Silicon Straits
 
Implementing Scrum for large scale projects (@DCB14)
Biser Simeonov
 
Top front-end techniques for OutSystems
Ruben Goncalves
 
Neo in Wonderland: Essential Tools for an Outsystems Architect
OutSystems
 
Your first 5 PHP design patterns - ThatConference 2012
Aaron Saray
 
Outsystems user group 2021 03 04 - cm app
Providit
 
Extending OutSystems with Javascript
RitaDias72
 
Android Development Slovenia Meetup #4 - How to have a working designer deve...
Infinum
 
MuleSoft London Community September 2020 - Project Vita
Pace Integration
 
Frontend Development vs Backend Development | Detailed Comparison
Mariya James
 
Mobile First with Angular.JS - Đ’Đ»Đ°ĐŽĐžĐŒĐžŃ€ ĐŠĐČДтĐșĐŸĐČ, Obecto
beITconference
 
Annotation processing
Benjamin Cheng
 
[2015.07.04] NodeJS & Golang
Alexander Kaloshin
 

Similar to Templates: Where Should Its Elements Be? In the Template or on Another Module? (20)

PPTX
Face/Off: APEX Templates & Themes
crokitta
 
PDF
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
 
PDF
Designing for Interactive User Interfaces
Kieran Wallis
 
PDF
Designing for Interactive User Interfaces
Freerange Future
 
PDF
Designing for Interactive User Interfaces
Kieran Wallis
 
PPTX
presentaion.pptx
mehulmaheshwari3
 
PDF
Accessibility in pattern libraries
Russ Weakley
 
PPTX
Day 3 Compose Camp Material Design.pptx
ShayantaniKar
 
PDF
Accessibility in Pattern Libraries
Russ Weakley
 
PDF
NUX October 6th 2014 - UX in a traditional enterprise
pjhauser
 
PPTX
Internship Presentation 1 Web Developer
Hemant Sarthak
 
KEY
Titanium appcelerator kickstart
Alessio Ricco
 
PPTX
Revolutionize Your Mobile App with Our Modern Templates
MG Technologies
 
PDF
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Anna Dahlström
 
PPT
Widening your JavaScript Application
Alex McPherson
 
PDF
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
shesmer
 
PPTX
Modern ux-workflow-presentation
Brian Akpa
 
PDF
Design systems - Razvan Rosu
Razvan Rosu
 
PDF
Maintainable theming
Wunderkraut
 
PDF
The Living Style Guide: How CustomInk created a their new ux lead style guide
Dara Pressley
 
Face/Off: APEX Templates & Themes
crokitta
 
Creating Style Guides with Modularity in Mind
Nadya Rodionenko
 
Designing for Interactive User Interfaces
Kieran Wallis
 
Designing for Interactive User Interfaces
Freerange Future
 
Designing for Interactive User Interfaces
Kieran Wallis
 
presentaion.pptx
mehulmaheshwari3
 
Accessibility in pattern libraries
Russ Weakley
 
Day 3 Compose Camp Material Design.pptx
ShayantaniKar
 
Accessibility in Pattern Libraries
Russ Weakley
 
NUX October 6th 2014 - UX in a traditional enterprise
pjhauser
 
Internship Presentation 1 Web Developer
Hemant Sarthak
 
Titanium appcelerator kickstart
Alessio Ricco
 
Revolutionize Your Mobile App with Our Modern Templates
MG Technologies
 
Bulding Device Agnostic UX Systems - Generate London, 23 Sep 2016
Anna Dahlström
 
Widening your JavaScript Application
Alex McPherson
 
Develop Engaging and High Performance Portal Themes That Power Exceptional Di...
shesmer
 
Modern ux-workflow-presentation
Brian Akpa
 
Design systems - Razvan Rosu
Razvan Rosu
 
Maintainable theming
Wunderkraut
 
The Living Style Guide: How CustomInk created a their new ux lead style guide
Dara Pressley
 
Ad

More from OutSystems (20)

PPTX
Innovating at the Speed of Business in the High-Bandwidth World of Digital Media
OutSystems
 
PPTX
Beyond “Location”: Informing Real-Estate Decisions Through Innovative Technology
OutSystems
 
PPTX
Beyond Digital Transformation: A Mandate for Disruptive Innovation in the Age...
OutSystems
 
PPTX
From Core Systems to Mobile Apps: Digital Transformation from the Inside-Out
OutSystems
 
PPTX
Orchestrating the Art of the Impossible Using Low-Code to Automate Manual Wor...
OutSystems
 
PPTX
Fast and Furious: Modernizing Clinical Application
OutSystems
 
PPTX
What Is Light BPT and How Can You Use it for Parallel Processing?
OutSystems
 
PPTX
Enrich Visually Google Map Information With Layers
OutSystems
 
PPTX
Using Processes and Timers for Long-Running Asynchronous Tasks
OutSystems
 
PPTX
Unattended OutSystems Installation
OutSystems
 
PPTX
The 4-Layer Architecture in Practice
OutSystems
 
PPTX
Speed up Development by Turning Web Blocks Into First-Class Citizens
OutSystems
 
PPTX
Service Actions
OutSystems
 
PPTX
Responsive Ui with Realtime Database
OutSystems
 
PPTX
Reactive Web Best Practices
OutSystems
 
PPTX
Pragmatic Innovation
OutSystems
 
PPTX
Troubleshooting Dashboard Performance
OutSystems
 
PPTX
OutSystems Tips and Tricks
OutSystems
 
PPTX
No API? No Problem! Let the Robot Do Your Work! Web Scraping and Automation W...
OutSystems
 
PPTX
Measure Customer Experience of Your OutSystems Web and Mobile Applications
OutSystems
 
Innovating at the Speed of Business in the High-Bandwidth World of Digital Media
OutSystems
 
Beyond “Location”: Informing Real-Estate Decisions Through Innovative Technology
OutSystems
 
Beyond Digital Transformation: A Mandate for Disruptive Innovation in the Age...
OutSystems
 
From Core Systems to Mobile Apps: Digital Transformation from the Inside-Out
OutSystems
 
Orchestrating the Art of the Impossible Using Low-Code to Automate Manual Wor...
OutSystems
 
Fast and Furious: Modernizing Clinical Application
OutSystems
 
What Is Light BPT and How Can You Use it for Parallel Processing?
OutSystems
 
Enrich Visually Google Map Information With Layers
OutSystems
 
Using Processes and Timers for Long-Running Asynchronous Tasks
OutSystems
 
Unattended OutSystems Installation
OutSystems
 
The 4-Layer Architecture in Practice
OutSystems
 
Speed up Development by Turning Web Blocks Into First-Class Citizens
OutSystems
 
Service Actions
OutSystems
 
Responsive Ui with Realtime Database
OutSystems
 
Reactive Web Best Practices
OutSystems
 
Pragmatic Innovation
OutSystems
 
Troubleshooting Dashboard Performance
OutSystems
 
OutSystems Tips and Tricks
OutSystems
 
No API? No Problem! Let the Robot Do Your Work! Web Scraping and Automation W...
OutSystems
 
Measure Customer Experience of Your OutSystems Web and Mobile Applications
OutSystems
 
Ad

Recently uploaded (20)

PPTX
Writing Better Code - Helping Developers make Decisions.pptx
Lorraine Steyn
 
PPTX
Perfecting XM Cloud for Multisite Setup.pptx
Ahmed Okour
 
PPTX
MiniTool Power Data Recovery Full Crack Latest 2025
muhammadgurbazkhan
 
PPTX
An Introduction to ZAP by Checkmarx - Official Version
Simon Bennetts
 
PPTX
Java Native Memory Leaks: The Hidden Villain Behind JVM Performance Issues
Tier1 app
 
PDF
Dealing with JSON in the relational world
Andres Almiray
 
PDF
Continouous failure - Why do we make our lives hard?
Papp KrisztiĂĄn
 
PDF
Alarm in Android-Scheduling Timed Tasks Using AlarmManager in Android.pdf
Nabin Dhakal
 
PPTX
Cubase Pro Crack 2025 – Free Download Full Version with Activation Key
HyperPc soft
 
PPTX
NeuroStrata: Harnessing Neuro-Symbolic Paradigms for Improved Testability and...
Ivan Ruchkin
 
PPTX
Comprehensive Guide: Shoviv Exchange to Office 365 Migration Tool 2025
Shoviv Software
 
PPTX
Automatic_Iperf_Log_Result_Excel_visual_v2.pptx
Chen-Chih Lee
 
PPTX
Revolutionizing Code Modernization with AI
KrzysztofKkol1
 
PPTX
WYSIWYG Web Builder Crack 2025 – Free Download Full Version with License Key
HyperPc soft
 
PDF
From Chaos to Clarity: Mastering Analytics Governance in the Modern Enterprise
Wiiisdom
 
PPTX
computer forensics encase emager app exp6 1.pptx
ssuser343e92
 
PPTX
3uTools Full Crack Free Version Download [Latest] 2025
muhammadgurbazkhan
 
PDF
Salesforce CRM Services.VALiNTRY360
VALiNTRY360
 
PDF
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
PPTX
Human Resources Information System (HRIS)
Amity University, Patna
 
Writing Better Code - Helping Developers make Decisions.pptx
Lorraine Steyn
 
Perfecting XM Cloud for Multisite Setup.pptx
Ahmed Okour
 
MiniTool Power Data Recovery Full Crack Latest 2025
muhammadgurbazkhan
 
An Introduction to ZAP by Checkmarx - Official Version
Simon Bennetts
 
Java Native Memory Leaks: The Hidden Villain Behind JVM Performance Issues
Tier1 app
 
Dealing with JSON in the relational world
Andres Almiray
 
Continouous failure - Why do we make our lives hard?
Papp KrisztiĂĄn
 
Alarm in Android-Scheduling Timed Tasks Using AlarmManager in Android.pdf
Nabin Dhakal
 
Cubase Pro Crack 2025 – Free Download Full Version with Activation Key
HyperPc soft
 
NeuroStrata: Harnessing Neuro-Symbolic Paradigms for Improved Testability and...
Ivan Ruchkin
 
Comprehensive Guide: Shoviv Exchange to Office 365 Migration Tool 2025
Shoviv Software
 
Automatic_Iperf_Log_Result_Excel_visual_v2.pptx
Chen-Chih Lee
 
Revolutionizing Code Modernization with AI
KrzysztofKkol1
 
WYSIWYG Web Builder Crack 2025 – Free Download Full Version with License Key
HyperPc soft
 
From Chaos to Clarity: Mastering Analytics Governance in the Modern Enterprise
Wiiisdom
 
computer forensics encase emager app exp6 1.pptx
ssuser343e92
 
3uTools Full Crack Free Version Download [Latest] 2025
muhammadgurbazkhan
 
Salesforce CRM Services.VALiNTRY360
VALiNTRY360
 
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
Human Resources Information System (HRIS)
Amity University, Patna
 

Templates: Where Should Its Elements Be? In the Template or on Another Module?

  • 1. | Templates: Where should its elements be? In the template or on another module? Templates: Where should its elements be? In the template or on another module?
  • 2. | Templates: Where should its elements be? In the template or on another module?| Templates: Where should its elements be? In the template or on another module? JosĂ© Costa OutSystems MVP, Senior Trainer | ITUp @ in [email protected] /josecccosta
  • 3. | Templates: Where should its elements be? In the template or on another module? Where have you seen a Template?
  • 4. | Templates: Where should its elements be? In the template or on another module? What is an Application Template? ● Module (Application) from which you start building your own modules ● Makes development more efficient ○ Already contains many predefined elements ○ E.g., Theme, CSS, Layout Blocks and Placeholders, logic, etc.
  • 5. | Templates: Where should its elements be? In the template or on another module? Types of Templates ● Built-in Application Templates ○ Web: Side Menu, Top Menu ○ Mobile: Phone, Tablet, Universal ● Custom Application Templates ○ Created by you ○ Installed from the Forge
  • 6. | Templates: Where should its elements be? In the template or on another module? How to create one? ● Create new application (web or mobile) ● Create module and name it Template_<module_name> ○ <module_name> is the name of the new template ● Insert a description and an icon in the properties of the module ● Publish it
  • 7. | Templates: Where should its elements be? In the template or on another module? How does it work? When you create your first* module ● Clone of the template is made ● Clone is renamed to the name of your module
  • 8. | Templates: Where should its elements be? In the template or on another module? Bottom line Your first Web Responsive or Mobile module of your application will be a clone of your template module.
  • 9. | Templates: Where should its elements be? In the template or on another module? Analysing a Template module
  • 10. | Templates: Where should its elements be? In the template or on another module? TopMenu ● Common with Login (and Menu) ■ Every app that uses this template will have it's own login screen ● Theme ■ Based on some other theme ■ Organization's or department's theme ■ I can change the CSS and other properties of the theme directly on the module
  • 11. | Templates: Where should its elements be? In the template or on another module? Theme on Another Module ● Common (with login) ● No theme in here ■ just a reference to a theme on another module ● Theme related web blocks also not in here ■ E.g., Menu ● Apps built with this template will all have the same look and feel
  • 12. | Templates: Where should its elements be? In the template or on another module? "Everything" on another module ● No Common in here ■ just a reference to the other module ■ Login is common to all apps ● No theme in here ■ just a reference to a theme on another module ● Apps built with this template will all have the same look and feel and same login entry point
  • 13. | Templates: Where should its elements be? In the template or on another module? Other Scenarios in Template ● Centralized Login logic ■ UI can be different ■ Login logic is the same ■ can be some external system ● Sample screens ■ To showcase your Style Guide
  • 14. | Templates: Where should its elements be? In the template or on another module? Changed Element in the Template ● If Element is in Template module ■ Other modules based on that template will not be affected ■ Remember: it's a clone ● If Element is a reference ■ May have to refresh dependencies to see change reflected in module ■ Normal dependency "rules" apply
  • 15. | Templates: Where should its elements be? In the template or on another module? Templates... Where should its elements be? In the template or on another module? It depends!
  • 16. | Tenants: A Look Behind The Scenes Thank You! @ [email protected] /josecccosta
  • 17. | NextStep Denver - Final walk-through Stay for our NEO party 4:30pm - 6:30pm

Editor's Notes

  • #10: Normal one with: Common (with login) Theme (based on some other theme)
  • #11: Most common scenario: a good pattern is each application having a theme based on an organization's or department's theme
  • #15: https://success.outsystems.com/Documentation/11/Developing_an_Application/Reuse_and_Refactor/Understand_Strong_and_Weak_Dependencies