Posted: 7 Nov 2018 9:31 EST Last activity: 7 Jan 2021 9:58 EST
Best practices - Using design templates to deliver a consistent user interface
This best practice document focuses on using design templates to deliver a more consistent UI across your applications. It covers some of the out of box templates provided in Pega 8.1 and how to create and use a design template.
Note that in Pega 8.4, it is possible to automatically convert a regular section into a section using design template. The newly created section will put all the properties and components into a 1-column template. As such you will still need to set the correct design template but you no longer need to copy and paste every single property / component.
couple of more design templates were added in 8.2, 8.3 and 8.4 - switching design template renders a dropdown that lists all the OTB design templates with a description of how to use the template. Most of the new templates are present only when using Cosmos Rules (Theme-Cosmos built-on app) instead of UI-Kit
As part of that process we are adopting to Cosmos Design System Converting our Sections to Design Templates.
We observed for our existing UI if we use OOTB design templates we end up creating multiple sections for our need.
We are trying to understand is there any challenge or risk in creating our own tempalte which uses pega OOTB styling from cosmos skin? Will it work seemlesly with future upgrades and react based features in 8.5 or 8.6 and beyond?
Design template are not as flexible as sections where you can nest dynamic layouts but the benefits is that the section that you convert to use design template are simpler and easier to maintain - it is OK to group logical field into the same section and then create a wrap up section that will display all these inner sections using a 1-column 100 width template.
Creating your own template is also a good practice - if you only use this template in one or 2 sections, then the benefits of creating this design template might not be worth it and re-using existing OTB templates might be a better approach from a maintenance perspective. If you intend to create your design template, you need to identify several places in the app where it will be used. When moving to Cosmos React, your design template will need to be built as a React component.