Customizing synchronization indicators

Customize the background color and font of the synchronization indicators in your mobile app to better suit the overall look and feel. Synchronization indicators keep users informed about the synchronization status when an offline-enabled mobile app regains network connectivity and starts synchronizing data.

Pega Platform provides four types of native indicators:
Offline
The app does not have network access. The Offline indicator disappears only after the app regains network connectivity and starts receiving responses from the server.
Syncing
The app is synchronizing data after reestablishing network connectivity or after a period of low-speed connectivity.
Successfully synced
All data and status changes are synchronized with the server. The indicator appears only after the app displays the Syncing indicator.
Sync failed. Retry?
Data synchronization failed due to an error unrelated to the network. Users can try to synchronize again by tapping the indicator.
Before you begin: Prepare the framework for your offline-enabled app:
Note: After you make changes to your application that affect case management, data management, or the user interface, preview your app on a mobile device to ensure that the app looks and operates as expected. For more information, see Previewing mobile apps.

Customize the look of selected synchronization indicators by creating and modifying the corresponding style formats.

  1. In the header of Dev Studio, click the name of the application, and then click Skin.
  2. On the Component styles tab, expand the dynamic layouts menu by clicking Dynamic layouts.
  3. In the dynamic layouts menu, in the Controls section, click Buttons.
  4. In the My Formats tab, click Add new style.
  5. In the Create a new format dialog box, in the Format name field, specify the indicator that you want to customize by entering the corresponding value:
    • To customize the Offline indicator, enter Mobile Offline Indicator.
    • To customize the Syncing indicator, enter Mobile Syncing Indicator.
    • To customize the Successfully synced indicator, enter Mobile Synced Indicator.
    • To customize the Sync failed. Retry? indicator, enter Mobile SyncFailed Indicator.
  6. Click Submit.
  7. In the corresponding editing pane, customize the synchronization indicator.
    You can customize the following aspects of the indicator:
    • Background color
    • Font color
    • Font size
    • Font weight
  8. Click Save.
  9. Optional: To customize another synchronization indicator, repeat steps 4 through 8.
Example: 

Figure: Default synchronization indicators in an expense reporting mobile app

Four mobile screens, each with a different synchronization indicator placed horizontally above the bottom navigation menu.