Section form - Completing the Design tab
This tab displays a preview of a section. A section is an element of your user interface that is comprised of layouts and cells.
Select a layout and then drag and drop controls to populate the cells of the layout. A cell can hold a label or property value or a form field that accepts a user-entered property value. The property value uses a control to present the value in read-only or read-write mode.
Use the controls at the top of this tab and drag and drop operations to review or update the section and other associated sections.
You can:
- Create a new layout
- Modify an existing layout
- Build a prototype
Click the Show wireframes icon to display wireframes that show the Structure of a section, names of rules referenced, and the relationships of elements in the section.
When you save this rule form, Pega Platform also saves any open sections it references, and validates the rules as they are saved.
Sections created in App Studio using templates can be Converting sections to full section editor.
> Create a new layout (section, layout, or repeating layout)
- From the Structural list, select one of the layouts:
Control Description Layout Dynamic Container See Adding a Dynamic Container. Section See Presentation Tab. You cannot add a Container or a Panel Set control to a section. - Populate the cells of the layout with basic or advanced controls. From the Basic or Advanced control group, select a control and drag it to the cell. For information on working with the toolbar, see Layout tab toolbar.
-
Complete the cell properties panel. A cell can hold a label or property value or a form
field that accepts a user-entered property value. The property value uses a control to
present the value in read-only or read-write mode.
You can reference properties on the primary page — typically the page holding the work item — with simply a period followed by the name. You can reference properties on other pages with the pagename.propertyname syntax. Don't forget to identify the class of pages (other than the primary page) on the Pages & Classes tab.
- Locate and expand the work type that contains the property on the Application Explorer.
- Expand the Data Model category and the Property rule type to list property names.
-
Select a
Single Value
property to be placed in the field. Drag and drop it into the desired cell. - The system places the Short Description text of the property as a label in the left cell. It places the property as a (read-write) field in the right cell. You can adjust the settings for these cells.
- Use the tools in the Layout tab toolbar to add, delete, or modify the layout.
If the section contains deprecated controls for which there are auto-generated alternatives available, an Update Controls option displays.
Click Update Controls to automatically update the deprecated controls. Buttons with custom settings must be manually converted to use the pxButton control. To add controls to those automatically updated, see Upgrading deprecated and outdated controls on the Pega Community.
Areas of the layout that correspond to sections (or other elements) that you cannot update appear with a gray background. This may mean that the rule needs to be checked out to you, or belongs to a locked ruleset version, or a ruleset version you are not allowed to update.
> Identifying controls on this tab
> Controls that alter the preview
The preview area of this tab holds an approximate visual presentation of the runtime appearance of the section. These buttons do not affect the contents of the rule, only the display on this tab:
- Click the Show wireframes icon to present the SmartFrames wireframe preview. Blue wireframe rectangles help you understand the structure of the section, names of rules referenced in this rule, and the size and other relationships of elements in the section.
- Click the Hide wireframes icon to hide wireframes, providing a less busy and higher fidelity preview.
Layout tab toolbar
These controls operate on layout structures. Select one or more cells first, then click the control to apply the operation described. When a control is not available (grayed), it cannot be applied to the current selection. Hover over a control to display a tool tip with information about the control.
You can also use keyboard shortcuts and right-click context menus to cut, copy, paste, and delete.
Select a layout, section include, column, row, or cell and then right-click and select: Cut, Copy, Paste, Delete, Insert Row, Insert Column, Delete Row, Delete Cell or Delete Column. When copying an entire layout, select Paste Above or Paste Below.
> Expand and collapse controls
Sections in a harness may be presented as horizontal elements. These work in the Design tab: click a plus sign to expand a section.
When you save a section form, the state of these controls is saved as well, and determines the initial presentation of the form. To achieve the desired results, set the expand and collapse elements as desired to control the initial presentation of a subsection before you save the section form.
Structure of a section
Structurally, a section consists of one (or more) layouts or <TABLE> grids, or one or more repeating layouts. (This structure is not required for sections that are produced with handcrafted HTML code). Layouts and repeating layouts contain rows and columns, defining a set of cells. A cell can be empty or contain any of various fields and controls.
If you place a section in a cell of a layout, you cannot edit the contents of that section directly.Fields on a section may be located on any page identified on the Pages & Classes tab of the section.
Prototyping a section before the properties are defined
You can rapidly mock up the layout, labels, and controls on this tab before all properties it ultimately will reference are defined. The development effort you make in designing layout is not wasted, as the resulting section is a valid starting point for further evolution after the properties are created.
When you first drop a control dragged from the control list, the control references a standard placeholder property, for example @baseclass.pyTemplateInputBox. You can save and preview the Section form (although these properties are not part of your application).
To produce a section with the appropriate layout, drag and drop the controls, adjust the labels, but do not complete the Cell Properties panel. Reopen the Section form and update each Cell Properties panel later, when the real properties are defined.
For an example of this approach, see Pega Community article Use pyTemplate properties and controls to rapidly prototype user forms.
Dragging a property from the Application Explorer
You can complete two cells of a layout in one step if the left cell is to contain a text label and the right cell is to contain a field corresponding to a property on the Application Explorer.
- Locate and expand the work type that contains the property on the Application Explorer.
- Expand the Data Model category and the Property rule type to list property names.
-
Select the
Single Value
property to be placed in the field. Drag and drop it onto the desired cell. - The system places the Short Description text of the property as a label in the left cell. It places the property as a (read-write) field in the right cell. You can adjust the settings for these cells.
Previewing the section
After you save this rule, click the Preview toolbar action to see a split-screen presentation of the section as it appears in read-write mode at runtime.
Removing inline styles from layouts
For ease of maintenance and re-usability, it is a best practice to create a custom style in a skin rule and apply it to the layout. See Skin rule Custom
- Sections
Sections are the building blocks of your user interface. You can populate a section with components, such as fields and controls, to create a functional chunk of user interface that can be reused in different contexts for improved consistency and efficient development.
- Converting sections to full section editor
Sections based on design templates, as well as sections created in App Studio, can leverage the full set of editing capabilities available in Dev Studio if you convert them to use the full section editor.
Previous topic Sections - Completing the Create or Save As form Next topic Settings tab of the Section form