Create dynamically pages


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,, 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!

You can use this example to look at details:

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, 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?


1 Like

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
this is the code inside the

          [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')

Hi @fifis

To do that see the title: Determining which Input has fired with in this link:

1 Like

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.

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 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