Theme Cosmos - Design templates: customization and optimization with helper classes

Theme Cosmos - Design templates: customization and optimization with helper classes

Description	Customization guidelines for design templates with the use of CSS helper classes
Version as of	8.5
Application	Pega Platform
Capability/Industry Area	User Experience

Design templates

A design template is a reusable asset that defines a set of layouts for an application. When you create a new section, you can specify a design template for the section and place your controls or other content based on the design. It is a way of separating data from its presentation. Design templates can be used for individual sections or for entire pages.

Design templates offer many benefits:

• Codify design patterns in your application
• Ensure the consistency of layouts
• Allow patterns to be easily reused elsewhere

• Provide a common language between designers and developers

Helper classes

Applying helper classes

Helper classes are readily available CSS code snippets, which can be added to sections and controls to style and customize your UI. Pega provides a wide variety of helper classes for styling layouts, spacing, fonts, colors, and so on. Additionally, you can reuse helper classes in multiple UI components. This is an improvement over component style formats which are tied to specific controls or layouts.

For example, in a scenario where you need to remove extra padding from a design template with a default container format, instead of creating a new format with adjusted padding, use the padding-b-0 helper class, which removes bottom padding (see the Applying helper classes image).

Note: Usage of helper classes is a highly recommended approach for styling an application. For more information, see CSS Helper classes

Customization of design templates

Customizing design templates with helper classes

Helper classes provide a wide variety of customization options of design templates. By using helper classes you can add extra spacing and margins, or modify the layouts according to your company's UI mockups or custom requirements.

Use case examples

The following examples are helper classes suitable for customizing layouts:

• flex-col-5, flex-col-6, flex-col-8, flex-col-12 – used to convert a single column inline-layout to 5, 6, 8 or 12 column layouts, respectively.

• padding-1x, padding-2x, padding-3x – used to add padding to layouts. Helper classes support padding for the top (t), left (l), bottom (b), and right (r) side of the layout. For example, to add padding to the left side of a layout, use the padding-l-2x helper class, and to add padding to the bottom, use padding-b-3x. Helper classes support margins in a similar way, for example, margin-1x, margin-2x, and so on.

We can further customize complex design templates at individual row level, for example, a different column in each row.

An example user form with helper classes (flex-space-1 & flex-cell-3) added to controls

The following helper classes have been introduced in Theme-Cosmos:02-01-01 (from Pega 8.5), Theme UI Kit, and Theme-Clarity (from Pega 8.6) to achieve more flexible 2-column and 3-column forms:

• flex-cell-half – used to size the field to 50% of the column.
• flex-cell-2 – used to occupy a 2-column width. For example, in a 3-column-inline wrapping template, this helper class makes a field occupy two out of three available columns.
• flex-cell-3 – used to occupy 3-column width in any number of columns.
• flex-space-1 – used to give a 1 column-wide right margin to a field.
• flex-space-2 – used to give a 2 column-wide right margin to a field.

Optimization of design templates

• Always try to organize your UI into reusable design templates to simplify maintenance and customization.
• Use helper classes as much as possible and try to avoid nested design templates if the same look and feel can be achieved by using helper classes.
• Use helper classes to generate empty space, for example, flex-space-1.
• Create a design template for a specific purpose and try to make it generic enough to be reused wherever applicable.
• Give a specific name and icon to each new design template to represent its usage and purpose.
• Properly identify regions inside design templates and name them clearly enough to support the design and its use case.

Reference links

https://collaborate.pega.com/discussion/helper-classes-achieve-complex-forms-using-2-column-3-column-inline-wrapping-templates

https://community.pega.com/knowledgebase/articles/user-experience/85/design-templates

A business solution that automates workflows in your organization. Multiple, unrelated applications can be hosted in the same system. You create an application by running the New Application wizard.

(Deprecated) A configuration of panels (areas) in a harness that support a composite portal. Existing panel sets continue to function. As a best practice, upgrade panel sets to screen layouts.

A business solution that automates workflows in your organization. Multiple, unrelated applications can be hosted in the same system. You create an application by running the New Application wizard.

The building blocks of your user interface, sections can use design templates for their structure and contain such interactive UI elements as fields, buttons, lists, and so on. A section creates a functional chunk of a user interface, and can be reused throughout your application for improved consistency and efficient development.

For example, your application may need to display user data as a list of ID cards. You can create a section for the contents of a card, and then reuse that section so that the design of every card is consistent.

The rules that define the behavior of your application. You can create classes to gather rules related to a specific object in your application. For example, in a recruitment application, you can create a class that contains rules that define the flow of the recruitment process. Classes can contain other classes, hence a class that contains another class is called a parent class, while a class that is contained by another class is called a child class. A child class can reuse, or inherit, any of the rules that are defined for its parent class, which helps to build your application faster and more efficiently.

A view of your data that displays information or collects input from users as they create, update, and resolve cases in your application. Open your case type from the Application Explorer to access the options for configuring a form.

Actual work that is performed by application users and automations that consists of a sequence of tasks and leads to an intended business goal. An example of a case is a process of hiring a particular job candidate, where an HR worker collects necessary documents, a hiring manager conducts a job interview, and an application sends an automated email with onboarding information after the candidate is approved. To create a case, you first build a template of your business process that is a case type, and then apply the template in multiple cases, for example, to review applications from many candidates.