Skip to Content
1

SAPUI5 cross app navigation and preserving state

Jun 16, 2017 at 03:58 AM

519

avatar image

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?

Thanks,
Simon

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Matt Harding
Jun 16, 2017 at 11:43 AM
2

Hi Simon,

Just to explain my tweet to you, if you look at this demo app https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/orderbrowser/webapp/test/mockServer.html#/Orders/7918/?tab=shipping - 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.

Cheers,

Matt

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks Matt. I will try that out and see if I can get it working.

0
Mike Doyle Jun 18, 2017 at 03:25 AM
2

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!

Show 1 Share
10 |10000 characters needed characters left characters exceeded

Thanks Mike I like that idea too. Seems like as usual there are a number of ways to achieve this. Am also interested in John Patterson and Raj Govender's suggestion to use the "appState" and "rehydrate"

https://sapui5.netweaver.ondemand.com/#docs/guide/a2e3ed7706a646e4b8746912e8d22f79.html

When I work out what they mean I will share here if I can! :-)

0
Simon Kemp
Jun 19, 2017 at 08:39 AM
0

Thanks to John Patterson for answering this in his blog here: https://blogs.sap.com/2017/06/19/restoring-fiori-application-state/

Share
10 |10000 characters needed characters left characters exceeded