Learning about guidelines for designing user interface for offline-enabled apps

Ensure that your mobile app looks and works as designed on a disconnected mobile device by following the guidelines for designing UI for offline-enabled mobile apps.

Note: Mobile apps that are based on the Cosmos Design System do not support offline mode.
Before you begin: Familiarize yourself with the general guidelines for designing mobile app UI. For more information, see Learning about user interface design guidelines for mobile apps.
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:
Procedure
  • 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.
    • 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.
      For more information, see Harness and Section forms — Using the Condition Builder to configure dynamic UI actions.
    • 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:
  • Enhance the user experience: