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 Theme 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 Theme 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 Theme UI-Kit applications, ensure that the skin rule inherits from the pyEndUser skin in the Theme 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 Theme 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.

• 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.

• Configuring a responsive user interface
• Adding an AJAX container to a portal