Retain page state in multi-page apps when visiting other pages

Dash Python
1

I have a multi-page app. The second page provides details on elements clicked in a table in the first one. The problem is that, when returning to the first page from the second, the page has been refreshed to its original state instead of remaining on the state it was when the click to the second page took place.

Is there a way to ensure that the state in one page is retained when visiting another page in multi-page apps?

Thanks for any help you can provide!

1 Like
2

One way to do this would be to hide/show content instead of removing/adding content. It will make the app slower (because all of the content needs to be loaded upfront) but it would be an easy way to preserve state.

Here’s an example: dash-recipes/dash-urls-hide-show-tabs.py at master · plotly/dash-recipes · GitHub

1263Ă—649 191 KB

There might be other ways to do this as well, like saving the data in a hidden div that is in the “global” app.layout and then feeding state from that hidden div into the underlying page’s controls.

Let us know what you end up with!

4 Likes
3

Thanks for your help with this, @chriddyp. I have implemented this by hiding/showing the two pages and it works fine. As you said, it’s a little slower on load, but I don’t think my employer will mind. Thanks again!

1 Like
4

Well, I spoke too soon. Once I deployed the app the 2 second delay at the start on my system became a 20 second delay on the server. Ugh. So I’m back to square one. I’ll report back if I find a performant solution.

5

In the end, instead of solving the problem I decided to avoid it. The second page in my app provides details on a table in the first page. As I described in this post, I have a link in each cell of the main table that contains the column and row as part of the URL’s query, and these are used to build the details object shown in the second page. I was using a dcc.Link to get to the details page, and the problem was that returning to the main page meant that its state was lost.

All I did, then, was replace the dcc.Links with html.As with target=_blank. This way, the details page opens in a new tab and the main page remains in the previous tab retaining its state. Not too elegant, but it gets the job done for my use-case.

1 Like
6

Yeah, that’s another good idea. Thanks for sharing!