Restoring Fiori Application State

When doing cross application navigation in Fiori, that is navigating between applications. On return, rather than picking up from where you left off, a new instance of the application is created. Meaning the app is in an initial state and not in the state when you left it. To solve this we need to persist the state between calls. Store any filters, search options, interactions the user has applied, then reapply them on return.

There has not been a documented standard approach for solving this. As a result we see and hear many different ways UI5 developers are solving this by themselves. If you study some of the standard SAP applications, there is an approach for managing state using existing Fiori services. In this blog I will highlight how it works, providing an easy way to do it yourself using generic reusable SAP code.

Behind the scenes

Prior to navigation the application state is persisted on the server.

We can see below that the API /UI2/INTEROP/GlobalContainers is called and values are posted to the Layered Repository (LRep) table /uif/lrepdcontcd on the Gateway server.

How does it work?

// create a new Application state (oAppState) for this Application instance
oAppState = sap.ushell.Container
            .getService("CrossApplicationNavigation")
            .createEmptyAppState(this);
oAppState.setData(oStateToSave); // object of values needed to be restored
oAppState.save();

2. Update the URL hash with the key

var oHashChanger = sap.ui.core.routing.HashChanger.getInstance();
var sOldHash = oHashChanger.getHash();
var sNewHash = sOldHash + "?" + "sap-iapp-state=" + this.oAppState.getKey();
oHashChanger.replaceHash(sNewHash);

3. Navigate to another Fiori application

sap.ushell.Container
	.getService("CrossApplicationNavigation")
	.toExternal({
		target: {
	   		semanticObject: sSemanticObject,
           		action: sAction
 		}, 
		params: oParams,
		appStateKey : oAppState.getKey()
});

4. On return read the key from the URL, retrieve the data and restore the app

var sHash = oHashChanger.getHash()
var sAppStateKey = /(?:sap-iapp-state=)([^&=]+)/.exec(sHash)[1]; 

sap.ushell.Container
 .getService("CrossApplicationNavigation")
 .getAppState(sAppStateKey)
 .done(function (oSavedAppState) {
       << code for restoring app state >>
});

Things you need to consider doing it this way, AppState instances are immutable, means the key will change, the URL may include routing and parameters in the hash.

Alternative Approach

The last couple of months I have been helping customers investigate and adopt the ABAP Programming Model for SAP Fiori, in preparation for thier S/4 HANA transformation. Part of this has been Developing Apps with SAP Fiori Elements. Fiori Elements uses the sap.ui.generic.app library, which has a very easy to reuse standalone NavigationHandler which abstracts away a lot of the complexity.

NOTE: This option is only available on SDK version 1.36.X and higher. There are other alternatives which work like sap/suite/ui/generic/template/ListReport/nav/NavigationHandler on 1.34 and below.

To implement

1. Import the Navigation handler into your controller

sap.ui.define([
..
    "sap/ui/generic/app/navigation/service/NavigationHandler",
    "sap/ui/generic/app/navigation/service/NavType"
], function(.. NavigationHandler, NavType) {

2. Instantiate the navigation handler and provide a callback for after navigation

onInit: function() {
..
// create an instance of the navigation handler
this.oNavigationHandler = new NavigationHandler(this);

// on back navigation, the previous app state is returned in a Promise
this.oNavigationHandler
   .parseNavigation()
   .done(this.onNavigationDone.bind(this));

// the app state which needs persisting
this._oAppState = {
    selectedTabFilter: "all",
    searchText: "",
    selectedContextPaths: [],
    selectedCategories: [],
    selectedSuppliers: []
};

3. Do the cross app navigation

onPress: function(oEvent) {
    .
//(sSemanticObject, sActionName, vParameters?, oAppData?, fnError?)
this.oNavigationHandler
   .navigate("Navigation", "sample",{},{ customData: this._oAppState });

4. Restore the application state

/**
 * if navigated back with appstate enabled then rehydrate the page using the
 * stored data
 * @param {Object} oAppData data persisted via iAppState
 * @param {Object} oURLParameters paramters passed in
 * @param {String} sNavType type of navigation
 */
onNavigationDone: function(oAppData, oURLParameters, sNavType) {
switch (sNavType) {
case NavType.initial:
    break;
case NavType.iAppState:
    this._oAppState = oAppData.customData;
    // set the previously selected icon filter tab
    this.byId("iconTabBar").setSelectedKey(oAppState.selectedTabFilter);

    // apply previous filters to table
    this._applyFilters();

    // set the previous search state
    this.byId("searchField").setValue(oAppState.searchText);

    // set the previously selected multi combo tokens
    this.byId("categories").setSelectedKeys(oAppState.selectedCategories);
    this.byId("suppliers").setSelectedKeys(oAppState.selectedSuppliers);

    // select previously selected rows
    this.byId("table")
        .setSelectedContextPaths(oAppState.selectedContextPaths);
    break;
}

Want More?

Demo Application in video

Source Code for Demo Application

Not on S/4 Hana yet or want to know more about the “ABAP Programming Model for SAP Fiori” a best practice for rapidly building meta-driven SAP Fiori apps on top of ABAP OData Services?

Come to my session at SAP TECHED Las Vegas

Ten tips from Using the ABAP Programming Model for SAP Fiori on AnyDB