Contain a Dash page under a parent page

Dash Python
,
1

Hello everyone,

I am developing a muti page app with Dash.
I have a landing page where a user can select one among a list of basic functions categories.
Each category means a new page.
In a single category, I would like to set up different pages with a common and shared upper layout where the user can select a subpage among a list of available pages.
This upper lyout would be a parent of different subpages, in other words.

But, having set page_container in the initial landing page, prevents to set up a container for the single category subpages under the - before mentioned - common and shared upper layout.

So, the qustion would be if did you ever experience the need of contain a page in a different location with respect to the position where page_container is initially set?
If yes, did you find a proper and feasible solution?

The closest case I have found is described here: Sharing components between pages - #3 by Emil

Another similar case is covered here: dash-multi-page-app-demos/multi_page_layout_functions at main · AnnMarieW/dash-multi-page-app-demos (github.com)
But in sidebar() I would like to add components modifiable via callbacks and not only Links.

Any suggestion is kindly appreciated.

Thanks,
Nicola

2

Hi @nicfior and welcome to the Dash community. :slightly_smiling_face:

This is possible using path variables and it’s a great use-case. I’ll add an example to the multi page app demo site shortly.

3 Likes
3

Thank you @AnnMarieW

I will stay tuned with your repo on dash multipages examples.

In the meantime, I should have a look here right?
Multi-Page Apps and URL Support | Dash for Python Documentation | Plotly

So, if I am understanding well, the idea would be to generate the required layout depending on the current path variable value?

Nick

4

Yes, that’s the correct link for the docs. The idea would be to have one page with the parent info, then add more content to the parent page based on the path variable.

1 Like
5

Nice!! @AnnMarieW

Many thanks for the idea.
I’ll give it a try.

NIck

6

I ended up using the dynamic-components approach for a large application with numerous pages and a large number of shared elements (panels, graphs, tables). It turned out to work quite well :blush:

As the elements are shared between pages, and not redrawn, they (re-)load rapidly and are always in sync. The latter could be considered a bug or a feature, depending on your use case :wink:

3 Likes
7

I have already tried the ath variables alternative and it is working fine.
For now I have few subapges and components.

Thank you @Emil for your proposal. I will certainly look into it.
But, may I ask you where should I look for more examples using dynamic-components?
Do you have any to suggest?

Thanks,
Nick

8

See #7b here to show how to do this using path variables

This example also shows how to add a different title and meta tag descriptions for each of the pages specified in the path variable.

Of course @Emil solution is also excellent and has a lot of advantages. :slight_smile:

multi-page-demo-path-variables

1 Like
9

really nice example @AnnMarieW . Thanks for sharing.

1 Like
10

@nicfior I have just wrapped up some basic documentation, which explains the concept(s),

https://www.dash-extensions.com/sections/pages

Please let me know, if anything remains unclear :slight_smile:

3 Likes