Create dynamically pages

Dash Python
1

Hello,

I am working on a multi-page app in which one page contains cards for all people in the database (every card contains a picture, name and position and a button), when the button is pressed it sends you to the page of the person where you can find plotly graphs.

I cannot find a way to update the link dynamically.
What I have is app.py, index.py, folder pages and app1 and app2 there. app1 is the one with all people and their cards, while the second is a normal dash app with the graphs, where to change the graphs specifically to the person you have to give a variable called ‘value’ the name of the person.

Is there a way to modify this ‘value’ with the name of the person which button is called from app1. I have tried to pass global variable but since the name is created into a string inside a callback function, it is not updated globally, I tried to use callback to dropdown in app2 but that is not working either. I don’t know what to do anymore.

The code is for uni project and I am not sure if I can post it here.

Is there a pop-up window option that can show the graphs dashboard so I can put all the code inside one file instead of going to another page?

I am sorry if the description is not enough!

2

You can use this example to look at details:
https://dash-gallery.plotly.host/dash-financial-report/

You can use a similar callback as below:

# Update page
@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def display_page(pathname):
    return app2.create_layout(pathname)

Basically what you are looking into creating is a function in app2 that takes the person’s name as input and generates their page, app2.py would look like:

def create_layout(username):
    # get data from DB
    df = pd.Dataframe.read_sql(sql code)
    
    return html.Div('''put your page details with the person's info here''')

Does that make sense?

Daniel

1 Like
3

Thank you so much for your response. It definitely makes sense and I changed my app accordingly. You have no idea how much you helped me!

I created the pages to contain app1 = layout(app) and app2= layout(app, name).

In app1 now I only create the cards and put them into the layout, however now I have no idea how to get the name of the button that has been triggered last.

Can this be done inside the app.py?
this is the code inside the app.py

        Output("page-content","children"),
          [Input("url", "pathname")])

 def display_page(pathname):
      if pathname == '/apps/all_profiles':
           return all_profiles.layout(app)
     elif pathname == "/apps/profile":
          return profile.layout(app, name')
4

Hi @fifis

To do that see the title: Determining which Input has fired with in this link:
https://dash.plotly.com/advanced-callbacks

1 Like
5

Why do you need the last triggered? You could just have all pages open in a new tab or then just display the last in a Div inside your page. Divide the page in columns, show on the left the cards and the right the page, or something of the sort.

6

Basically, I want the cards to display all people and then when pressed the button to open only the dashboard for this particular person. I managed to do it thanks to you @danpryjma and @Eduardo . First I changed the app1 and app2 to a function similar to the example you sent me and then in app2 layout added name. Then in the app.py created a callback which goes through all buttons, which ids I saved in a list before that in app1. And now this is working! Thank You so much, you two saved me!

1 Like