How to use button in different tab for different function

Dash Python
1

Hi, I am very new in Dash.
I am trying to create a Tabed dash board . In which each tab contain a button and each button perform different functionality.
What I did: I created tab and in each tab i created buttons and on button click i try to use @callback but its not working can any one suggest how to solve the issue

hear is my code

import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])

tab1_content = dbc.Card(
dbc.CardBody(
[

        dbc.Button("tab_1btn", color="success",id="tab1"),
    ]
),
className="mt-3",

)

tab2_content = dbc.Card(
dbc.CardBody(
[

        dbc.Button("tab2_btn", color="danger",id="tab2"),
    ]
),
className="mt-3",

)

content = html.Div(children =
[
dbc.Tabs(
[
dbc.Tab(tab1_content, label=“Home”,tab_id = “Home”),
dbc.Tab(tab2_content, label=“Snowflake”,tab_id = “Snowflake”),
], id = “tab”,
),
html.Div(id=‘outtbllist’),
]
)

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

@app.callback(Output(‘outtbllist’, ‘children’),
Input(“tab1”, ‘n_clicks’),
Input(“tab”, ‘value’),
prevent_initial_call=True )
def data_profilingview(n_clicks,active_tab):
if active_tab == “scatter”:
return html.P(“This is tab 1!”, className=“card-text”)

@app.callback(Output(‘outtbllist’, ‘children’),

Input(“tab2”, ‘n_clicks’),

prevent_initial_call=True )

def data_profilingview(n_clicks):

return html.P(“This is tab 2!”, className=“card-text”)

if name == “main”:
app.run_server(port=8080)

2

Hi @Shubham and wellcome to our Community.

First one tip for shearing codes in the forum:

image

Now going to the code:

You can’t have one ‘id’ that receives input from two different callbacks outputs.

In this case you are atempting to send the message for the same html.Div from both callbacks. You need to build all in the same callback and identify which of the button are triggered.

second: the dcc.Tabs has the property ‘value’ but you are using dbc.Tabs that do not have that property, you need to use ‘active_tab’ instead.

Also you added a if statement asking for an inexistent tab name: “scatter” :thinking:

Also I added

import dash
from dash.dash import no_update

Here you can find the code changed and working:

import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import dash
from dash.dash import no_update

app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])

tab1_content = dbc.Card(dbc.CardBody(
    [dbc.Button("tab1_butn", color="success",id="tab1"),
    ]), className="mt-3",)

tab2_content = dbc.Card(dbc.CardBody(
    [dbc.Button("tab2_butn", color="danger",id="tab2"),
    ]), className="mt-3",)

content = html.Div(children = 
                   [dbc.Tabs(
                       [dbc.Tab(tab1_content, label='Home', tab_id = 'Home'),
                        dbc.Tab(tab2_content, label='Snowflake', tab_id = 'Snowflake'),
                       ], id = 'tab'),
                    html.Div(id='outtbllist'),
                   ])

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

@app.callback(Output('outtbllist', 'children'),
              Input('tab1', 'n_clicks'),
              Input('tab2', 'n_clicks'),
              Input('tab', 'active_tab'),
              prevent_initial_call=True )
def data_profilingview(n_1, n_2, active_tab):
    
    ctx = dash.callback_context
    context_id = ctx.triggered[0]['prop_id'].split('.')[0]

    #    if active_tab == 'scatter':
               
    if context_id == 'tab1':
        return html.P('This is tab 1! in '+active_tab, className='card-text')
    elif context_id == 'tab2':
        return html.P('This is tab 2! in '+active_tab, className='card-text')
    else:
        return no_update
    
    
app.run_server(debug=True)

if __name__ == '__main__':
    app.run_server()
1 Like
3

Thankyou Eduardo.
And I will make sure for next time i will use</> for code shearing. :innocent:

And your solution works perfectly. Thanks a lot for your time.

1 Like