Updated: September 28, 2017

Offline

Intro

Mobile applications, due to the nature of their reliance on the wireless network, do not always have the network connectivity needed to enable real-time access to data. To accommodate this, Fiori iOS apps can implement offline solutions to continuously provide uninterrupted service and make sure jobs can be completed regardless of network connectivity.

Behavior & Interaction

Sync before offline

An offline-enabled Fiori application is considered as an always offline app. The offline data set is synced with server regularly. But users have the choice to manually sync offline data which helps users to make sure their data is up to date before going into offline mode.

Sync button

A sync button is located in the profile or settings menu for an offline enabled app. User can initiate the manual sync by tapping the sync button.

Syncing feedback

While syncing is in progress, there will be a syncing icon appear and animate on the button to indicate the app is under syncing.

Timestamp

Each time when the app finishes syncing process, the timestamp under the sync button will be refreshed to reflect the latest updated time.

Initiate sync
Initiate sync

 

When the user goes back to other app screens during the syncing process, a syncing indicator will appear under the header to show the progress.

Progress bar

The progress bar is a narrow blue bar to show the percentage of completion of the syncing process.

Sync Banner

A banner is always together with a progress bar. There are two types of sync banners. During sync, the user will see a tappable banner with the option to cancel the sync. Once the sync is completed, the user will see “Sync Completed, ” and the banner will slide away by itself.

Sync banner
Sync banner

 

Enable offline mode

Automatic enablement of offline mode should be standard for all offline apps since mobile devices can lose connection without notice and the app should behave seamlessly to provide a consistent experience. In addition to auto offline mode, user can also initiate offline mode with system airplane mode before going into network restricted area.

During the offline mode, most features should be functioning normally.

Offline banner

Once the app goes offline, the offline banner will slide down from header. It will stay for a few seconds and disappear by itself.

Status bar

The status bar will change color in offline mode. It helps the user to recognize that the app is in offline mode on any screen in the app and without the offline banner.

Disable online content

All online content needs to be disabled in offline mode. This includes maps, online search and more.

Offline mode
Offline mode

 

Changing banner state

Data created during offline mode can be stored in a upload queue. When there is an item in upload queue, the offline banner can have tappable state interchanging with a static banner.  User can tap on the tappable state to access the upload queue.

Offline banner
Offline banner

 

Leaving offline mode

Sync back

Once the app is reconnected with the Internet, it will automatically start to sync with the server. A sync banner will show up. User can cancel the sync or wait for the sync to finish and the banner will disappear onece the process is done.

Sync back
Sync back

 

Cancel sync and access to upload queue

When the sync is canceled while there are still items pending in the upload queue, users can then access the upload queue from the banner. Users have the choice to resume the sync or delete items from the upload queue screen.

Cancel sync and access to upload queue
Cancel sync and access to upload queue

Compact & Regular

Compact and regular width

Banner in both compact and regular width share the same format with different banner width. Text may wrap in compact view.

Compact and regular view
Compact and regular view

 

Banner placement

The offline banner always sits below the entire header area.

Banner placement
Banner placement