Atlas — Standard auto-generated controls |
The standard auto-generated controls (formerly called HTML Property rules) listed below are available as of release V6.2. These controls are recommended for new development.
The Control tab settings on the Control rule form govern a control's appearance and behavior. Unless noted, the tab contains settings for both editable and read-only modes. See Control form — Completing the Control tab.
You can customize many of the control rule's default parameters within the section that contains it. Your edits apply to the control instance within the section and not to the underlying control rule. Custom settings may be applied individually to each control rule within a section.
If a property's Control field specifies an auto-generated control, then in FormBuilder-based forms, the system displays the property using the Default control rule when displaying that property in the FormBuilder-based form. Examples of this behavior are when such properties are displayed in the Decision Tree form. In harness-based forms, the system displays the property using the specified auto-generated control rule.
pxButton |
Displays in a layout cell a button that invokes an action when clicked. You define the action in the control's Parameters dialog. Read only mode. The Button control uses this rule. To place the button in a harness, section, or flow action, drag and drop the button icon () from the Basics control group onto a layout cell, or onto a harness header bar or bottom row. See Adding a Button control. The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Button in the Controls group. |
||
pxCheckbox | Displays an HTML checkbox to present a property as a TrueFalse type.
The Check Box control uses this rule. To place the link in a harness, section, or flow action, drag and drop the checkbox icon () from the Basics control group onto a layout cell, or onto a harness header bar or bottom row. See Adding a Check Box control. Use instead of Checkbox. This control is supported for the development of Mobile applications. See Supported user interface features for a Mobile application. |
||
pxCurrency | Formats a number as a currency using the default locale. Read only mode.
Use instead of This control is supported for the development of Mobile applications. See Supported user interface features for a Mobile application. |
||
pxDateTime | Formats a DateTime, Date, or TimeOfDay property type using the default locale. Use instead of these non-autogenerated rules:
The Calendar control uses this rule. To place the calendar in a section or flow action, drag and drop the calendar icon () from the Basics control group onto a layout cell. See Adding a Calendar control. The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Date/Time in the Controls group. This control is supported for the development of Mobile applications. See Supported user interface features for a Mobile application. |
||
pxDisplayText | Displays property values using text, numeric, date/time, or true/false format types. Read only mode. | ||
pxHidden | Used to set a read-only property value that is not visible to the user under any condition. This control is useful for triggering user interface events. | ||
pxIcon | Displays, in a layout cell, a predefined or custom icon that invokes an action (same as pxButton) when clicked or hovered on.
The Icon control uses this rule. To place the icon in harness, section, or flow action, drag and drop the button icon () from the Basics control group onto a layout cell, or onto a harness header bar or bottom row. See Adding an Icon control. When you add the control, you can replace the default pxIcon with one of the following standard rules; each is configured with a default icon, tooltip, and action. These rules eliminate the need to manually configure the values in the pxIcon Parameters dialog.
The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Icon in the Controls group. |
||
pxInteger | Formats the display of numeric property types without the decimal places (for instance, 12 instead of 12.00). This is the default control rule associated with the Integer property type. |
||
pxLink | Displays in a layout cell a text link that invokes an action when clicked or hovered. You define the action ( same as pxButton) in the control's Parameters dialog.
The Link control uses this rule. To place the link in a harness, section, or flow action, drag and drop the link icon () from the Basics control group onto a layout cell, or onto a harness header bar or bottom row. See Adding a Link control. The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Link in the Controls group. |
||
pxNumber | Formats the display of numeric property types. Parameters include decimal places, scale, negative format, symbol, and separators.
The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Number in the Controls group. |
||
pxPassword | Presents property values as obfuscated. The characters appear to the user as a string of bullets. You can use this control to conditionally hide sensitive data such as an account number, a Social Security Number, or a credit card number in input and read-only modes.
The use of pxPassword controls only the display of values and has no effect on the encryption used by |
||
pxPercentage | Displays numeric values as a percentage value; for example the decimal value 0.043 can be presented as 4.31 %. Read only mode.
Use instead of Percentage. |
||
pxTextArea | Presents the property as an HTML text area, which provides multi-line input or display.
The Text Area control uses this rule. To place the control in a section or harness, drag and drop the text area icon () from the Basics control group onto a layout cell. See Adding a Text Area control. Use instead of:
The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Text Area in the Controls group. This control is supported for the development of Mobile applications. See Supported user interface features for a Mobile application. |
||
pxTextInput | Presents the property as an HTML text box in edit mode. Spell checking is enabled by default.
The Text Input control uses this rule. To place the control in a section or harness, drag and drop the text input icon () from the Basics control group onto a layout cell. See Adding a Text Input control. Use instead of Text. The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Text Input in the Controls group. This control is supported for the development of Mobile applications. See Supported user interface features for a Mobile application. |
If the Pega-Mobile RuleSet is present in your application, a subset of the above controls are supported for applications that run on a Mobile device. See Supported user interface features for a Mobile application.
You cannot supply parameters through the Formats form or the Parameters tab.
Atlas — Standard controls without parameters
Atlas — Standard controls with parameters. |