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.
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 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.
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.
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.