CODEWITHSUNDEEP
pythoncallbackplotlynavbarplotly-dash
Gabriel Bou Karam
Gabriel Bou Karam

Reputation: 45

Callback with navbar plotly dash python

I have this code below. I’ve created 3 navigation links: Inputs, Calculations and About.

Now on the Inputs sheet, I would like to add several dropdowns and input fields for the user. How can I include those input fields and give them ids as I want to use them for calculations later (i.e I create a dropdown and I give it an id of “my-dropdown” to later use for the calculations I want to make in Calculations).

So far this is what I have in the callbacks but if I want to continue my function with an elif pathname == “/inputs” and then I start including my input fields, I will not be able to store their ids to call them later once I want to do the calculations. Can you please advise?

    navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("INPUTS", href="/inputs", external_link=True, active="exact")),
        dbc.NavItem(dbc.NavLink("CALCULATIONS", href="/calculations", external_link=True, active="exact")),
        dbc.NavItem(dbc.NavLink("ABOUT", href="/about", external_link=True, active="exact")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("Comments", href="/comments", external_link=True),
                dbc.DropdownMenuItem("Version Updates", href="/updates", external_link=True),

            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="Main Page Title",
    color="#015151",
    dark=True
)

content = html.Div(id="page-content", children=[])

app.layout = html.Div([
    dcc.Location(id="url"),
    navbar,
    content
])


# ---------------------------------------------------------------------------
## APP CALLBACKS ##

# Add info in about section
@app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname")]
)
def render_page_content(pathname):
    if pathname == "/about":
        return [
            html.Br(),
            html.Br(),
            html.P('About', style={'fontWeight': 'bold', 'font-size': 32, 'margin-left': '20px'}),

Upvotes: 0

Views: 1035

Answers (1)

Daniel Al Mouiee
Daniel Al Mouiee

Reputation: 1200

I suggest you have some global hidden temporary divs or use the dcc.Store component that can hold the inputs that are inputted on the inputs sheet, then you'll just have to refer to these hidden divs that hold these inputs in the calculations sheet, rather than referring to the inputs sheet components.

Upvotes: 1

Related Questions