Pega Platform provides a development environment that you can use to create an interface that is both flexible and convenient for mobile users. The following best practices help you design a UI that is optimized for use on mobile devices without a network connection:

Ensure UI consistency:

• Add the latest version of UI-Kit to your application stack.
  UI-Kit provides you with design templates, CSS helper classes, and core icons.
• Make the application skin inherit from the pyEndUser skin.
  UI Kit includes pyEndUser as the default skin for applications. When you create an application, the skin automatically inherits styles and formats from pyEndUser. In this way you can also use the CSS helper classes that are part of the UI-Kit.

Create a flexible user interface:

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