Pega Platform provides a development environment that you can use to create an interface that is both flexible and convenient for mobile users. Pega offers two UI architectures that are optimized for offline-enabled mobile apps, Theme Cosmos (recommended) and Theme UI-Kit.

The following best practices help you design a UI that provides an optimal experience for users on mobile devices without a network connection:

Ensure UI consistency:

• Add the latest version of Theme Cosmos (recommended) or Theme UI-Kit to your application stack.
• Set the correct inheritance:
  When you create a new application, the skin automatically configures skin inheritance, which allows you to use the formats and CSS helper classes that are defined in the theme.
  • For Theme Cosmos applications, ensure that the skin rule inherits from the CosmosSkin in the Theme-Cosmos ruleset.
  • For Theme UI-Kit applications, ensure that the skin rule inherits from the pyEndUser skin in the Theme UI-Kit ruleset.

Create custom user interface components:

The Theme Cosmos and Theme UI-Kit architectures both offer a ready-made UI that you can configure in App Studio. Pega Platform also provides you with tools to create your own custom UI.

• On pages, use screen layouts instead of containers.
  Screen layouts support responsive behavior, and you can set responsive breakpoints that enable the layout to adjust itself with the screen size.
• Use layout groups instead of tabs and accordions.
  The content of a layout group can be set to display as tabs, accordions, as stacked, or in menu layouts.
• Use dynamic layouts, column layouts, and flexbox helper classes to position user interface elements within layouts.
• Use repeating dynamic layouts instead of tables.
  Consider the following information about repeating dynamic layouts:

  • Repeating dynamic layouts for worklists, which support opening of assignments, also support actions. Actions support is also available for adding and removing rows.
  • When you use the Add or Remove action on a repeating dynamic layout, you do not need to use a Run script action.
  • You can configure components interaction and views for offline-enabled cases.
  • You can create and remove pages with the ClientCache API methods.
    Note: The Add and Remove APIs are active even if errors occur on the row page. For more information, see the ClientCache API Javadoc documentation.
  • You must handle creation and deletion of the row context page.
  • You must configure the Delete action button within the repeating dynamic layout row.
  • You must use page lists as the source of repeating dynamic layouts.
  • You must configure the local action used to populate the row page with the Use data page option.
• Configure refresh when rules on the user interface elements, such as dynamic layouts, instead of refreshing entire sections.
  For more information, see Defining refresh conditions for UI areas.
• Optional: To let users take action on work items while data page-sourced user interface elements load, configure the defer load settings.
  For more information about defer load settings, see Configuration options for layouts.
  Note: The defer load pre-activity is always ignored for sections and layouts.

Ensure UI operability:

• When you add and configure UI elements, for example, buttons, links, icons, and menu items, use only offline-supported features.
  For more information, see Controls in offline mode and Actions in offline mode.

Enhance the user experience:

• Use validate rules to test property input values and page input values against the conditions that are part of validate rules.
  For more information, see Validate rules in offline mode.