Skip to main content
Verify the version tags to ensure you are consuming the intended content or, complete the latest version.

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
  • Buttons
  • Charts
  • Check boxes
  • Drop-down lists
  • Links
  • Sliders
  • Rich-text editors
Different basic control options
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.

configure a standard button

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.

Custom format for a button control

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.

styling a basic control

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. 

Example of an order summary form with different buttons that have labels
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:

This Topic is available in the following Module:

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

100% found this content useful

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice