Custom App State in Fiori Elements V2

FE V2 allows applications to extend app state with custom data. It provides some hook functions; applications need to implement these hook functions to manage the lifecycle of custom state data.

Scenario:

In an ALP, users can navigate to a object page from list report table by selecting multiple records.
On the object page, one table only displays selected records by providing filters to its row binding.
But if users refresh the object page, since the added filters are gone, all documents will be displayed in this table.
The expected behavior is, when refresh the object page, the table displays the same data as before refreshing.

Solution:

The idea is saving selected record keys(from ALP) as the object page's app state.

  1. Once the object table's binding filter is updated, call function onCustomStateChange of extension API. The ideal place of calling this for this case is event handler of before table rebinding. This is to inform framework that custom state is changed and need to be persisted.
  2. Provide FE the custom state data by implementing function provideCustomStateExtension. The lifecycle parameter must be permanent. Only with this lifecycle, the app state can be saved to backend and the corresponding app state key will be added to the URL. 

    Then the custom app state data in property 'data' will be saved to backend by a request as below. An new generated app state key for current entity set is also attached to the URL.

  3. When refresh the object page, because of the newly generated app state key from the URL, custom app state data is retrieved from backend and can be access from hook function 'applyCustomExtension'. Within this function we can collect the and custom state data. Before table rebinding, check the collected custom state data, if exist, then apply it as the filters.



More detailed documentation can be found from official site:
Custom State Handling for Extended Apps - Documentation - Demo Kit - SAPUI5 SDK



Comments