I have a multi-page app which has a main page and some further sub pages. Essentially I have a number of dropdown’s on the main page in which I need the selected values to retain when the user navigates to the other pages and back.
Unfortunately I only have access to a specific version of Dash which means I do not have the dcc.Store component. I have also read this post:
But ideally I don’t want to have to open the additional pages in another tab.
Perhaps you could save the state in the URL?
Upon user changing the dropdown you can set the URL in the users browser and if they click back then it returns them to their previous state. You could also update links on the page to contain the URL state too.
In multipage apps there’s no need to change the entire page contents for each URL. You could just change a content element that does not include the dropdowns. Then all your dropdowns will retain their value.
You could almost think about this like your dropdowns are contained within a sidebar that is not updated on page changes.
So essentially clicking the link to the next page just displays the content of that page rather than actually ‘going’ to that page? meaning the dropdowns retain their state its just they aren’t visible?
Yeah, although I didn’t realise you don’t want the dropdowns displayed on the new page. In that case you’d also need to hide the element containing the dropdowns, which makes it a little more involved, but still feasible.
The option is using the second “children” method of the tabs component, which I believe will retain it’s state when navigating between tabs: https://dash.plot.ly/dash-core-components/tabs
If you’re ok with the limitation of the layout of each tab being fixed.
Yeah I’ve decided to go with the tabs method - its a little slow on initial loading but works well when navigating between the pages. It also means that I can have dropdowns/checklists that update graphs which are on different pages which is very useful for my app. Thank you for the help nedned.
@nedned I also want to store the state of my tabs. Is it possible to store simply the children of tab1 content in a dcc.Store for example and have a callback functions which checks if the the dcc.Store is empty, if yes it loads the normal layout if dcc.Store is not empty it loads the children? Or is that not possible?
It sounds feasible, but I don’t have much hands on experience with the State and Tabs components, so I don’t think I can say for sure. Perhaps it’s worth starting a new post and skiing your question.