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:
Ensure that you have a case type that you can use in the offline-enabled app,
and that the case type only uses features that are supported in offline mode.
For more information about offline-supported features, see Understanding offline features. For more information
about creating a case type, see Creating a top-level case type.
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.
In the header of Dev Studio, click the name of the application, and then click
Skin.
On the Component styles tab, expand the dynamic layouts
menu by clicking Dynamic layouts.
In the dynamic layouts menu, in the Controls section,
click Buttons.
In the My Formats tab, click Add new
style.
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.
Click Submit.
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
Click Save.
Optional: To customize another synchronization indicator, repeat steps 4 through 8.
Example:
Figure: Default synchronization indicators in an expense reporting mobile
app
