Controls and presentation
User interface elements (such as text inputs and layouts) present information and actionable items on the user interface.
User interface elements in Pega Platform
The UI elements of Pega Platform™ include basic controls that you can use out of the box, including:
- Autocomplete controls
- Check boxes
- Drop-down lists
- Rich-text editors
Note: Avoid using icons for controls. Use link text or a button for clarity and ease of localization.
You can reuse and customize UI elements as needed by applying existing styling to enable developers to manage controls and styling separately. Out-of-the-box UI elements, such as a basic button, come with predefined style formats. Predefined or out-of-the-box button and label formats are pulled from the application skin. A Pega Platform best practice is to use existing style formats unless you have an experienced UI developer that can modify existing or create new style formats. Using predefined style formats saves development time, reduces maintenance work, and improves the consistency of the application's look and feel.
Note: To learn more about styling an application, see Styling your application with design systems.
The predefined style formats for a button include Standard, Simple, and Strong.
You can style all presentation elements of your interface, including typography, borders, backgrounds, layouts, and UI placement and alignment. Using a predefined style format applies a combination of those styling options. For example, you can apply a style format that styles buttons to have a black border, white background, black font color, centered text, and centered alignment on the interface. Applying the style format uses all the styling defined for that style format. Style formats for specific control types are reused across the application.
Styling for basic controls
Presentation and styling are defined for a specific control. Depending on the control type, you can style different aspects of the control. For example, unlike a text field, a link does not have a border, meaning you do not apply a border color to a link.
Some controls allow you to change the presentation of the label or caption. For example, you can add a button caption above a button or replace the button label with an icon, as shown in the following image.
When specifying text on a button, as a best practice, the text should describe the action performed and the object on which the action is performed. Provide each control with a clear and distinctive label. For example, an order confirmation view has three descriptive buttons. Clicking the Modify details button allows users to modify the email, delivery address, payment method, or contact number that users provide.
Tip: Consider the relative length of labels for controls that appear together at run time. In the previous example, the three buttons have text of similar lengths.
Establishing a consistent look for Button controls in your application saves development time, gives your application a more predictable user interface, and makes it easier for users to complete forms. Designate the style format of the Button control to provide a visual cue to users about the button's relative importance. For example, for the Submit button on a form, set the Control format option to Strong as a cue to users that it is the primary action that they can take on the form.
In the following image, click the + icons to read more about some of the available basic controls.
Note: Pega Infinity™ has controls that support new features, such as offline capability, responsiveness, and cross-browser support. Deprecated or custom controls do not have these capabilities, so update to the controls that are shipped with Pega Infinity or make custom controls cross-browser supported and responsive.
Check your knowledge with the following interaction: