Table of Contents

Article

Section preview shows changes in real time for templated sections

In Designer Studio, you can create a section by using a design template on the Design tab of the Section form. As you build the templated section, the section preview shows the effects of your changes as you add, move, or delete elements, resize the section, switch to a different design template, or modify the application skin. By previewing the runtime appearance of your section as you create it, you save rework and development time.

[brightcove:5717586554001]

Regions in templated sections

A design template contains one or more regions, which are marked with the letters A, B, C, and so on, or with names that you give them to indicate their purpose. The section preview on the left of the Design tab and the corresponding template element list on the right use the same names or letters, to help you see the relationship to the regions in the design template. In the following example of a section based on the 2 Column design template, region A is highlighted:

regions-on-templated-section.png

Regions on the section preview, design template, and template element list

Changes are reflected as you make them

As you add or remove elements—fields, controls, and embedded sections—the section preview and the template element list both reflect your additions and deletions. For example, you can add fields and options for collecting expense report information in regions A and B, as shown in the following figure. The Eye icon beside the Phone number field in the template element list indicates that a visibility condition has been set. The field is always visible in the section preview.

eye-icon-indicates-a-visibility-condition.png

Visibility icon in the template element list

If you switch to a different design template or resize the display area, elements are automatically rearranged in the section preview. Working in the section preview, you can add or remove elements, move elements within a region or across regions, or modify the properties of any element. Modifications to the application skin are also reflected in the section preview. In the following example, the design template has been changed, the Employee Organization field has been dragged to a new location, the Client Company field has been resized and dragged to region B, more elements have been added, and the screen has been resized by dragging the divider between the section preview and the template element list.

section-preview-example

Screen preview example with two regions

Design templates and rulesets

When you update a design template, any section that uses that design template is automatically rebuilt when you generate the application. Similarly, when you switch the design template on which a section is based, the section is automatically rebuilt to reflect the new template. Design templates, like other rules, are governed by their rulesets. To ensure that the design template modifications are accurately reflected during the development process, follow these guidelines:

  • If a design template is in a branch ruleset, ensure that the sections that use the design template are in a branch ruleset in the same application.
  • If a design template is in an application ruleset, the design template can be used by sections in the application ruleset or in branch rulesets of the same application.
  • If a design template includes other rules, such as binary files or sections from branch rulesets, you cannot switch to the design template if you are working with a section that is in the application ruleset and that you created in Pega Express. If you attempt to do so, you will not be able to use the asset (binary file or section) from the branch ruleset.
  • If a design template for a section is in a private ruleset, you cannot switch the section to use a different design template.

Procedure

For a step-by-step explanation of how to work with the section preview, see Creating a section based on a design template.

Published November 14, 2017 — Updated April 20, 2018

Have a question? Get answers now.

Visit the Pega Support Community to ask questions, engage in discussions, and help others.