LinkedIn
Copied!

Table of Contents

Customizing synchronization indicators

Version:

Only available versions of this content are shown in the dropdown

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.
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.

Prepare the framework for your offline-enabled app:
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.

Did you find this content helpful?

Have a question? Get answers now.

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