Skip to Content

SAPUI5 cross app navigation and preserving state

Can anyone help me with the following scenario:

Two SAPUI5 apps running inside the Fiori Launchpad (FLP).

  • First app is a Worklist app showing a list of records, customer is one field the record.
  • The second app is a master-detail app that shows customer details.

In the first app there is a filter that the user uses to generate a list of records, the customer id is an active link and when the user clicks it triggers a cross app navigation to the second app and shows the customer details.

Now after checking the customer details in the 2nd app the user wants to navigate back to the first app and be brought back to the first app in the same state as they left it. E.g. the Worklist has been filtered and populated with the same values as when they clicked on the customer link.

The initial cross app navigation is fine, what I am not sure how to do is the back navigation and preserve the state of the original Worklist in the first app.

Can anyone help?


Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Jun 16, 2017 at 11:43 AM

    Hi Simon,

    Just to explain my tweet to you, if you look at this demo app - you can see it has the selected order in the URL so that it navigates automatically to the 2nd order in the list (assuming it is in the master list still).

    But if you wanted to keep the search history, the filters, etc all in sync so you can call a semantic action to another app with a parameter such as Customer; you could use routing parameters like /Orders/{orderId}/[filter]/[search] (not sure of the exact syntax off hand). Anyway, so when you enter a search field, instead of just binding the filter to the item list, you could perform a route to this search; and in the routefound event, then do the binding of the filter.

    The one issue with doing this is that every filter, search, etc, will be a forward navigation, though you could navigate replacing the previous route if you want to avoid that too.

    Anyway, that's my recommendation since it avoids the master-detail needing to know about the worklist; and there's no tricky "back" functionality required.



    Add comment
    10|10000 characters needed characters exceeded

  • Jun 18, 2017 at 03:25 AM

    Matt's approach is a good one, especially if the filter is a simple one. Don't forget to encode the filter string, otherwise you could get problems if your user does a search with special characters. These special characters will end up the the hash part of your url, after all.

    If your filter was more complex, you might consider storing the filter values in the session (see the Storage class). You could create an object with your filters, stringify, then store them in the session. When the app loads (e.g. after coming back from app1) it could check in the session, parse the object, apply the filters, then delete the object from the session. Not 100% robust of course, but it will do pretty well for most users. Remember that you shouldn't store sensitive data in the session because it is not secure.

    There really should be an easier way to do this!

    Add comment
    10|10000 characters needed characters exceeded

  • Jun 19, 2017 at 08:39 AM

    Thanks to John Patterson for answering this in his blog here:

    Add comment
    10|10000 characters needed characters exceeded