Best practices - Using design templates to deliver a consistent user interfacePega Support community – best practices

It’s about design patterns…

• Identify components / widgets that have a common design pattern and use a design template to promote reuse and consistency

7 November 2018 2

• Codify design patterns in your application– Ensures consistency of layouts– Easy to reuse these patterns elsewhere– Provides common language between designers

and developers

• Updates to templates will be reflected immediately in any instance that uses them

• Make template instances editable in App Studio

Benefits of using design templates

7 November 2018 3

• 22 design templates provided out of the box in Pega 8.1:– Layout

– All purpose / generic templates (1 col, 2 col, 3 col, 4 col)– Page

– Used to organize sections on a page– Header

– Used to arrange metadata for the current item in the form of a page or section header– Card

– Used to arrange data for a single atomic item– List item

– Used to arrange data for items in a repeating list

Each template follows specific naming conventions to easily convey purpose and usage:– [Type] with [Components]

Design templates types

7 November 2018 4

– 1,2,3 and 4 Column– 1,2,3 and 4 Column (Inline wrapping)– 30/70 and 70/30– Inline wrapping

• Additional CSS helper classes– flex-col-4, – flex-col-5, – flex-col-6, – flex-col-8– flex-col-12

Layout type (11 templates)

7 November 2018 5

– Mobile page (used in review harness)– Page with secondary column (desktop)

Page type (2 templates)

7 November 2018 6

– Header with assignment– Header with breadcrumbs, image– Mobile page header

Header type (3 templates)

7 November 2018 7

– Card with image– Card for empty state– Card with image and metadata

Card type (3 templates)

7 November 2018 8

List items type (3 templates)

7 November 2018 9

– List item with breadcumbs and meta– List item with status– List item with actions and meta

• A design template is a regular section marked as a ‘design template’ under the Settings tab

• Templates need to have the following:– Purpose: Each template should have a specific purpose, while still being

general enough to allow for reuse elsewhere– Name: The name of a template should describe the purpose (e.g. “List item

with image and status”)– Icon: A template needs to have an icon that shows the user how the

template lays out its contents (your designers should be able to provide these)

– Regions: Regions need to be identified in your template to place content, and should also have descriptive, but general names (e.g. “List item with image and status” has regions for “Image”, “Title”, and “Status”).

• It’s a delicate balance!– Don’t create a million templates for each individual scenario– Don’t create a few generic templates that could be used for multiple

purposes– Find the happy medium

Creating a new design template

7 November 2018 10

• When creating a section, check the checkbox highlighted below

• You cannot automatically convert a regular section to a section using a design template. To convert a section you need to follow these steps:– Use Create->User interface->Section to create a new section– Enter the same name as the section you want to upgrade and the same

class / ruleset– Use copy from the regular section and paste into the new section

Creating a section based on a design template

7 November 2018 11

• Open the landing page Configure->User Interface->Skins, interfaces and templates

• Go to the ‘Templates’ tab to see all the sections.

• You can filter by ruleset, template name

Finding sections using design templates

7 November 2018 12

Sections using design templates can be easily edited in App Studio if the checkbox ‘Allow section to be edited at runtime ’ is checked

Editing sections using design templates in App Studio

7 November 2018 13