Discussion
Pegasystems Inc.
US
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.
For more details on design template, I highly recommend to go through the new Infinity front-end foundation mission and especially the module related to design templates: https://academy.pega.com/module/using-design-templates/v1
If you have any questions / feedback, do not hesitate to reply to this post.
Richard Marsot
Director Front End UI - Pega platform
WellsFargo
IN
Hi Richard,
Do you have latest best practices artifact related to design templates? The pdf looks but wanted to know if there any latest artifact.
Thanks,
Suman
Pegasystems Inc.
US
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
Pegasystems Inc.
US
For more details on design template, I highly recommend to go through the new Infinity front-end foundation mission and especially the module related to design templates: https://academy.pega.com/module/using-design-templates/v1
the topic about the OTB design templates was updated to reflect some of the new design templates added in Cosmos Rules.
Cisco Systems Inc
US
We are upgrading our apps from 8.1.1 to 8.4.1.
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?
Pegasystems Inc.
US
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.