What triggers the display of the sidebar in a multipage app

Dash Python
1

I am trying to figure out what triggers the display of the sidebar in the multi-page app example “multi_page_layout_functions.” This example displays a navbar with several options. One, titled “Topics” displays a sidebar listing a set of topics (the contents of “topic1.py” to “tpoic3.py”). I can’t figure out how to trigger the display of this sidebar.

I want to have my users click on the equivalent of the “Topic” option on the navbar and run a set of data processing steps before displaying the sidebar. I can’t figure out where to put the data processing function calls (which read data from APIs and produce a set of stand-alone charts).

Should they be part of the sidebar definition code (in this example, these are stored in a file named “sidebar.py”)?
There must be some event that triggers this display. Unfortunately, I don’t see it.
What am I missing?

TIA
AB

2

Hi @abick

That example shows how you can use the dash_page_registry dict as the “one source of truth” about the multi-page app and use it to build complex navigation components with a few lines of code. Doing it this way can be very helpful when you have a large app with lots of links, but it can be a little confusing (and unnecessary) if you are just starting out or have a small app.

Here are the links to:

`

pages-side-nav-funct

This example has the following file structure

- app.py 
- pages        
   |-- about.py
   |-- home.py
   |-- side_bar.py
   |-- topic_1.py
   |-- topic_2.py
   |-- topic_3.py

If you look at side_bar.py you will see it’s a function that creates the sidebar you see on each topic page. Note that it does not include dash.register_page()

All the rest of the files in the /pages folder are pages and are registered with dash.register_page().

The pages topic_1.py, topic_2.py and topic_3.py import the shared sidebar and add it to the layout.

Some of the pages have some extra data in the page registry: top_nav=True. That is used when looping through the registry to create the top bar.

You can see in app.py the top navbar is created like this:

dbc.Nav(
        [
            dbc.NavLink(page["name"], href=page["path"])
            for page in dash.page_registry.values()
            if page.get("top_nav")
        ],
    ),

To simplify it could be written like this:

dbc.Nav(
        [
            dbc.NavLink("Home", href="/home"),
            dbc.NavLink("About", href="/about"),
            dbc.NavLink("Topics", href="/topic-1"),           
        ],
    ),

You see the side bar when you click on the “Topics” link on the top nav, and it loads the topics_1 page with the shared sidebar.

All that being said, I’m not sure if I understand your project well enough to know if this will work for you or not.

3

Thanks. I understand the general layout of the example.
I will have a dropdown box in the navbar that specifies a geographic entity (a county or a pre-defined group of counties). When a user clicks on the “Topics” link in the navbar, I need to run two functions: “get_data(entity)” and “save_data(entity)” before the sidebar is displayed.

get_data() accesses several APIs and gathers data for the selected entity
save_data(entity) writes a report and other documents to a temporary directory

I gather that I can put these functions in the sidebar.py function. Is that correct?

Thanks