Back Forward Atlas — Standard auto-generated controls

 About HTML Property rules

Standard auto-generated controls are recommended for new development. Once a control is added to a form, you can modify the properties for this instance of the control. To modify the underlying properties of the control, you modify the control rule properties if necessary.

Creating custom controls

A rule form governs 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.

When you customize control rule properties, you save the changes as a custom control. Your edits do not affect the underlying control rule.

To open the rule form and edit a control:

  1. Open the section or harness that contains the auto-generated control.
  2. Select the cell containing the rule and click to open its Cell Properties panel.
  3. In the panel, click magnifying glass to display the Control tab of the rule form.
  4. Click Private edit and modify as necessary.
  5. Providing you have an unlocked ruleset, select Save as or Copy.

The change will not affect existing instances of the control you modified.

Standard rules

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 from the Basic control group onto a layout cell, or onto a harness header bar or bottom row. See Adding a Button control.

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 from the Basic 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.

pxCurrency Purpose-specific control that formats a number as a currency using the default locale. Read-only mode.

Use instead of CurrencyAmount and CurrencyAmount-i18n.
pxDateTime Purpose-specific control that formats a DateTime, Date, or TimeOfDay property type using the default locale. Use instead of these non-autogenerated rules:
  • Date
  • Date-Calendar
  • Date-Full
  • Date-Full-i18n
  • Date-Long
  • Date-Long-i18n
  • Date-Medium
  • Date-Medium-i18n
  • DateCalendarForDataGrid
  • DateTIme
  • DateTime-Calendar
  • DateTime-CalendarHarness
  • DateTime-Default
  • DateTime-Full
  • DateTime-Full-i18n
  • DateTime-Long
  • DateTime-Long-i18n
  • DateTime-Medium
  • DateTime-Medium-18n
  • DateTime-Short
  • DateTime-Short-i18n

The Calendar control uses this rule. To place the calendar in a section or flow action, drag and drop from the Basic control group onto a layout cell. See Adding a Calendar control.
pxDisplayText Displays property values using text, numeric, date/time, or true/false format types. Read-only mode.
pxDropdown Presents the value of a property as a dropdown list of fixed choices at runtime. See Adding a Dropdown control.
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 dropfrom the Basic 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.

  • pxIconAddItem
  • pxIconAddNewWork
  • pxIconAttachments
  • pxIconCancel
  • pxIconContents
  • pxIconDeleteItem
  • pxIconEnableActionSection
  • pxIconExpandCollapse
  • pxpxIconExplore
  • pxIconFinishAssignment
  • pxIconGetNextWork
  • pxIconHistory
  • pxIconLocalAction
  • pxIconPrint
  • pxIconReopenWorkItem
  • pxIconReview
  • pxIconSave
  • pxIconShowFlowLocation
  • pxIconShowHarness
  • pxIconIconShowReopenScreen
  • pxIconSpellChecker
  • pxIconUpdate
pxInteger

Purpose-specific control that 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 from the Basic control group onto a layout cell, or onto a harness header bar or bottom row. See Adding a Link control.
pxNumber

Purpose-specific control that formats the display of numeric property types. Parameters include decimal places, scale, negative format, symbol, and separators.

This control is supported for the development of Mobile applications.
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 Password and TextEncrypted property types. See Implementing and using the TextEncrypted type.
pxPercentage Purpose-specific control that 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.
pxRadioButtons

Present property values as a group of horizontal or vertical radio buttons. See Adding a Radio Button control.

pxRichTextEditor Presents the property as a Rich Text Editor. See Adding a Rich Text Editor control.
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 dropfrom the Basic control group onto a layout cell. See Adding a Text Area control. Use instead of:

  • TextArea
  • TextAreaExpanded
  • TextAreaInTable
  • TextAreaSmall
  • TextAreaWithExpand
  • TextAreaWithExpandExpanded
  • TextAreaWithExpandSmall

 
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 from the Basic control group onto a layout cell. See Adding a Text Input control.

Use instead of Text.

Viewing components in the UI Gallery

You can view the runtime behavior and design-time options for basic controls in the UI Gallery.

Select > User Interface > UI Gallery and select a control from the Available Components section. See User Interface category — UI Gallery

Mobile applications

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.

NoteAuto-generated controls are not compatible with Form Builder forms.

Atlas — Standard controls without parameters
Atlas — Standard controls with parameters.

UpAbout controls
UpAtlas home