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 and 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 or UI Kit to your application stack.
  Note: To ensure the best experience for offline users, create the user interface in Theme Cosmos.
• 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 UI Kit applications, ensure that the skin rule inherits from the pyEndUser skin in the UI Kit ruleset.

Create custom user interface components:

Note: The Theme Cosmos and 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.
• 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.