Pega provides a variety of readily available tools for you to design a comprehensive and functional user interface for your application.
You can create effective interfaces for your application with out-of-the-box elements from the following categories:
The following elements govern the structure of forms, pages, and entire portals:
- Layouts form the structure of your interface by being containers for
other components, such as fields and buttons. The following layouts are
available by default:
- Screen layout
- Determines the overall structure of a screen through the use of available templates. Screen layouts are efficient when you configure accessibility options, because they include Accessible Rich Internet Applications (ARIA) roles by default. Screen layouts support responsive display and can automatically adjust your interface to fit various mobile displays.
- Column layout
- Displays main content next to supporting content in up to three columns. For example, you can have case data in the main column, and relevant attachments in the supporting column.
- Dynamic layout
- Arranges item and label placement and alignment depending on the type of screen, such as mobile, desktop, and laptop. You can define breakpoints for dynamic layouts that improve readability by determining the contents of screens on mobile devices.
- Repeating dynamic layout
- Automates the display of repetitive data. For example, in a self-service portal, you can arrange items in a shopping cart into a list that contains information about each product, such as name, type, or price. Repeating dynamic layouts support sorting and progressive data display.
- Table layout
- Helps organize and compare data by column and row.
- Tree layout
- Organizes data into expandable and collapsible branches to help you focus on relevant content. You can configure the branches to allow further actions, such as opening data objects in a branch.
- Layout group
- Contains various layouts that optimize screen space by grouping related information. Layout groups are especially effective with large amounts of data.
- Design templates
- Design templates are reusable sections with predefined elements that you can use to build your interface. You can apply design templates to sections to promote consistency, and to ensure that all sections are up-to-date when you alter the template.
The following components govern the appearance and style of your interface:
- Skins are rules that help you define the style of your interface and the presentation of your content. You can determine the typography, borders, backgrounds, placement, and appearance of UI elements. Skins separate content from its presentation, so that you can reuse your configurations and keep user interface design consistent throughout your application.
- Cascading Style Sheet (CSS) helper classes
- CSS helper classes are predefined classes that help you make minor changes in the format of layouts. For example, you can change the borders, margins, or padding.
Behavioral components (Action sets)
Action sets can help you create a dynamic UI in which certain elements appear only under certain conditions. For example, when the user selects their marital status as married, a new section is displayed that collects information about the partner. Action sets consist of the following elements:
- User activity that triggers actions. For example, selecting a check box.
- System response to an event. For example, displaying a new section.
- Conditions (optional)
- Restrictions that apply to combinations of events and actions. For example, hovering over a field and displaying a message if the field is empty.
Actionable elements (Controls)
Controls introduce interaction to your interface with such elements as buttons, links, and fields, through which users initiate certain events, such as displaying a screen, saving their work, or advancing a work item.
UI components in Pega Express support assistive technologies for a more inclusive approach to users with disabilities. Accessibility features take advantage of ARIA roles that provide additional information about your application to assistive technologies such as screen readers.
Localization helps you broaden your pool of application users by setting the product in an understandable context. You can also use a wizard to automate localization processes, for example, the preparation of translation packages.