Pega Platform provides a development environment that you can use to create an interface that is both flexible and convenient for mobile users. The Pega design system provides two themes, Cosmos and UI Kit, both of which are optimized for mobile uses.

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 UI Kit or theme Cosmos 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 UI Kit applications, ensure that the skin rule inherits from the pyEndUser skin in the UI Kit ruleset.
  • For Cosmos applications, ensure that the skin rule inherits from the CosmosSkin in the Theme-Cosmos ruleset.

Create custom user interface components:

Note: The Cosmos and UI Kit themes 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.
• In screen layouts, use AJAX containers.
  AJAX containers are not tied to any specific panel in a layout. Therefore, you can display work items in areas of the screen independently of the layout.

  Note: A tabbed AJAX container is not supported in offline-enabled apps.
• 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.
• When you use AJAX containers, use actions that are supported in AJAX containers for offline-enabled apps:
  • createNewWork
  • openAssignment
  • openWorkByHandle
  • finishAssignment
  • saveAssignment
  • cancelAssignment
  • runFlow
  • displayHarness

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.