Change the tab on clicking a button

Dash Python
1

I have create tabs within my page and wanted to change the tab through another tab. There is button which should do this ideally.

Here is my callback:

@app.callback(
    dash.dependencies.Output('tabs','value'),
    [dash.dependencies.Input('details_button','n_clicks')]
)

def display_newtab(n_clicks):
    return 'dropdown_experiment'
2

In principle, this should work. Could you create a small, complete reproducable example?

3

So, assume that there are two tabs that I am working with. @chriddyp
I am currently in tab 1 named ‘primary’ and there is a button inside tab 1 which takes me to tab 2 named 'secondary.

Here is my code snippet inside the primary:
import dash

import dash_core_components as dcc

import dash_html_components as html

import dash_table_experiments as dt
import pandas as pd
import plotly

import plotly.graph_objs as go

layout  = html.Div(children=[
html.H1(children="Experiment"),

 html.Div([
html.Button(
    id='details_button',type='submit',n_clicks=0, children='Get detailed View'
    ,style={'margin-top':'20px','width': '250px', 'height': '50px', 'text-align':'center', 'margin-bottom': '30px','background-color': '#313131','color': '#d6d6d6','font-size':'1.25rem','font-family': 'sans-serif'}
            ),
        ],
        ),

],
),

@app.callback(
dash.dependencies.Output('tabs','value'),
[dash.dependencies.Input('details_button','n_clicks')]
)

def display_newtab(n_clicks):   
return 'secondary'
4

Anything on this? I am not sure why it is happening. Although the logic looks simple, am I missing something out?

5

I’m not sure. The example that you posted doesn’t look like it’s complete, as there isn’t a Tabs component inside it. Can you please post a complete, reproducable example?

Also, some tabs bugs were fixed last nite, you can see the changelog here: https://github.com/plotly/dash-core-components/blob/master/CHANGELOG.md#0272

6

@chriddyp I am working on the same, and I am facing similar issue. Here is my code. There is an excel file which gets filtered on inputting, and then that dataframe is used to create plots and graphs in Tab 1 and other plots in Tab2. I have put input button in 1st tab. Now I want that as I input something in 1st tab, the output of both the tabs are impacted (by only 1 input tab). - 1st we see the input button and then both the tabs come up withe plots.

df1=pd.read_excel("…")

app.layout = html.Div([dashboard,
html.Div(
dcc.Input(id=‘AgentID’, type=‘text’)),
html.Button(‘Submit’, id=‘button’),
dcc.Tabs(id=“tabs-example”, value=‘tab-1-example’,
children=[
dcc.Tab(label=‘Tab1’, value=‘tab-1’),
dcc.Tab(label=‘Tab2’, value=‘tab-2’)
],
],html.Div(id=‘output-tab’))

@app.callback(
dash.dependencies.Output(‘output-tab’, ‘children’),
[dash.dependencies.Input(‘button’, ‘n_clicks’)],
[dash.dependencies.State(‘AgentID’, ‘value’)])

@app.callback(Output(‘tabs-content-example’, ‘children’),
[Input(‘tabs-example’, ‘value’)])

def update(n_clicks, value):
if n_clicks == None:
df = df1.copy()
else:
df = df1[df1[‘ID’] == value]

#. . . defining variables to be used in making plots…#

def render_content(tab):
if tab == ‘tab-1’:
return html.Div(
className=“row”,
children= [
html.Div(
# …plotting the graphs…#

     elif tab == 'tab-2':
        return html.Div

if name == ‘main’:
app.run_server()

Please help me in the same.

7

I had this same question and figured out how to do it.
The property you need is ‘active_tab’ and the tabs id are ‘tab-0’, ‘tab-1’, etc.

here is the corrected callback:

@app.callback(
    dash.dependencies.Output('tabs','active_tab'),
    [dash.dependencies.Input('details_button','n_clicks')]
)
def display_newtab(n_clicks):
    return 'tab-1'
1 Like