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:
Click the Show wireframes icon to display wireframes that show the structure of the section, names of rules referenced, and the relationships of elements in the section.
Note: When you save this rule form, the Pega Platform also saves any open sections it references, and validates the rules as they are saved.
Sections created in Pega Express using templates can be converted to the full section editor.
Control | Description |
Dynamic Container | |
Tab | |
Accordion | |
Section | See Adding a section. |
Layout | A layout is a <TABLE> element containing cells arranged in one or more rows and one or more columns. You can then change the number and size of rows and columns, and set up the contents of each cell. See Adding a layout . |
Note: You cannot add a Container or a Panel Set control to a section. |
Control |
Description |
Text Label |
Add a static read-only text label into a cell. See Adding a label. |
Formatted Text |
Add a formatted-text control. See Adding formatted text. |
Text Input |
Add a Text Input, which corresponds to .pxTextInput control. See Adding a Text Input control. |
Text Area |
Add a TextArea, which can contain more than one line of text. Corresponds to the .pxTextArea control. See Adding a Text Area control. |
Icon / Image |
Add an icon or image to the form, in a cell or on a header. When clicked at runtime, the icon starts an action. Corresponds to the .pxIcon control. See Adding an icon or image. |
Button |
Place a button into a cell or at the bottom of the form. When clicked at runtime, the button starts an action. Corresponds to the .pxButton control. See Adding a button. |
Check Box |
Add a check box representing a |
Radio Buttons |
Add a radio button group representing a property value. Corresponds to the.pxRadioButtons control. See Adding a radio button control. |
Link |
Place a text link in a cell. When clicked at runtime, the link starts an action. Corresponds to a .pxLink control. See Adding a Link control. |
Date & Time |
Add a text box containing a |
Dropdown |
Add a Dropdown control to present a list of values. Corresponds to the .pxDropdown control. See Adding a Dropdown control. |
Advanced control group
Control |
Description |
Paragraph |
Reference, in a cell, a paragraph rule that can present read-only text and images using rich-text HTML markup. Optionally, you can link a SmartInfo pop-up section with the paragraph. See Adding a paragraph. |
Address Map |
Used to specify an address or location in Google Maps from within an application. Corresponds to the pxAddressMap control. See Adding an Address Map control. |
Autocomplete |
Use an Autocomplete text box to present a drop-down list of dynamic choices computed by an activity. See Adding an Autocomplete field. |
Smart Label |
Add a red label that opens a pop-up SmartInfo section when the user hovers the mouse pointer over the label. See Adding a Smart Label. |
Chart |
A cell can contain a chart. See Adding a chart. |
Data Field |
For sections that are part of a composite application built with the Pega Web Mashup. Add a hidden field to expose a property value, making it available to the external page that displays the composite application. SeeAdding a Data Field control. |
Information Mashup |
Used to connect to an external application and delegate access to OAuth 2.0-resources. Corresponds to the pxInformationMashup section. See Adding an Information Mashup section. |
Menu |
Add a menu to a composite portal. See Adding a Menu Bar. |
Rich Text Editor |
Add a rich text editor control. Corresponds to the .pxRichTextEditor control. See Adding a Rich Text Editor control. |
Signature Capture |
Used to capture a user signature, either by using a mouse or through touch input on a mobile device. Corresponds to the pxSignatureCapture control. See Adding a Signature Capture control. |
Video | Add a video control. See Adding a video to a section. |
Note: In addition to these Advanced controls, you can add interactive data displays to support quick review or editing for a Page List
or Value List
. Adding a Tree, Adding a Grid, Adding a Tree Grid.
Tip: 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:
Single Value
property to
be placed in the field. Drag and drop it into the desired
cell.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 PDN.
Deprecated | Replacement | |
---|---|---|
TextArea TextAreaSmall TextAreaWithExpandSmall TextAreaExpanded |
TextAreaWithExpand
TextAreaInTable TextAreaExpandedOverflow TextAreaWithExpandExpanded |
pxTextArea |
Date-Calendar
DateTime-Calendar DateTime- CalendarHarness DateCalendarForDataGrid Export_Date Export_DateTime SecondsToHours SelectDate SelectDateTime DateTime DateTime-Default DateTime-Full DateTime-Long DateTime-Medium DateTime-Short DateTime-Full-i18n DateTime-Long-i18n DateTime-Medium-i18n |
DateTime-Short-i18n
|
pxDateTime |
PromptSelect DynamicSelect |
pxDropDown | |
RichTextEditor | pxRichTextEditor | |
Autocomplete | pxAutoComplete | |
URL | pxLink | |
Checkbox | pxCheckbox | |
RadioButtons | pxRadioButton | |
Button | pxButton |
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.
Note: You can't use this tab to modify sections with the Auto-generated HTML? check box cleared (on the HTML tab). These are marked Manual HTML
on the wireframe presentation in this tab. Similarly, you cannot use this tab to modify sections that are in the legacy format. These are marked Not Upgraded
on the wireframe presentation in this tab.
Note: As a best practice, build your application skin (using the Skin rule form) before you develop sections for work items, especially if you are using SmartLayouts (with spacing determined by the skin styles.) The system renders the Design tab using the styles of the skin rule identified in the Using skin preference. If the Using skin field is blank, these displays use the styles marked Work on the Styles tab of the skin identified in your current portal rule.
Caution: Using the Section form to review or update a section causes a clipboard page to be created and properties to be initialized. This may in turn cause declarative processing to be executed. Use caution before implementing any on-change declarative processing that produces database updates.
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:
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.
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.
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.
Note: 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 Basic Group, 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 PDN article Use pyTemplate properties and controls to rapidly prototype user forms.
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.
Single Value
property to be placed in the field. Drag and drop it onto the desired cell.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.
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 form — Components tab — General — Custom styles.