Designing the user interface of offline-enabled mobile 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.
- Cosmos React apps do not support offline mode.
- To ensure the best experience for offline users, create the user interface in Theme Cosmos.
For more information, see UI architecture recommendations for mobile apps.
The following best practices help you design a UI that provides an optimal experience for users on mobile devices without a network connection:
- Add the latest version of Theme Cosmos (recommended) or Theme UI-Kit 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 Cosmos applications, ensure that the skin rule inherits from the CosmosSkin in the Theme-Cosmos ruleset.
- For Theme UI-Kit applications, ensure that the skin rule inherits from the pyEndUser skin in the Theme UI-Kit ruleset.
- 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.
- 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
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.
- 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.
- 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.
Ensure UI consistency:
Create custom user interface components:
The Theme Cosmos and Theme 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.
Ensure UI operability:
Enhance the user experience:
Previous topic Designing applications for offline mode Next topic Enabling case processing in offline-enabled mobile apps