Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Customizing synchronization indicators

Updated on April 27, 2022

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:

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.
The app is synchronizing data after reestablishing network connectivity or after a period of low-speed connectivity.
Sync failed. Retry?
Data synchronization failed due to an error unrelated to the network. Users can try to synchronize again by tapping the indicator.
Successfully synced
All data and status changes are synchronized with the server. The indicator appears only after the app displays the Syncing indicator.

Default synchronization indicators in an expense reporting app
Four mobile screens, each with a different synchronization indicator placed horizontally above the bottom navigation menu. "Offline" and "Sync failed" on a red background, "Syncing" and "Successfully synced" on a blue background.
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 Sync failed. Retry? indicator, enter Mobile SyncFailed Indicator.
    • To customize the Successfully synced indicator, enter Mobile Synced 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.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us