Dynamically callback for the combination of tab and dropdowns

Dash Python
1

Hi all,

Looking for a way to combine two callbacks into one.

I am working on two callbacks -
Tabs:

def get_menu():
menu = html.Div([

    dcc.Link('View 1   ', href='/view1', className="tab"),

    dcc.Link('View 2   ', href='/view2', className="tab"),


], className="row ")
return menu

Dropdowns:
def get_dropdowns(date, firstName, lastName):

dropdowns = html.Div([

        html.P('date', style={'height': '20', 'width': '50', 'fontSize': 14, 'margin-top': '2'}, className='one columns'),
        html.Div(dcc.Dropdown(id='asofdate-dropdown',
                options=build_options(df_filelist['date']),
                value=date),
            className='one columns'),

        html.P('firstName', className='one columns'),
        html.Div(dcc.Dropdown(id='firstname-dropdown',
                options=build_options(df_filelist['firstName']),
                value=firstName),
      className='one columns'),


        html.P('lastName', className='one columns'),
        html.Div(dcc.Dropdown(
                id='lastname-dropdown',
                options=build_options(df_filelist['lastName']),
                multi=True,
                value=lastName),
    ], className='one columns')
return dropdowns

Then I have the following function and callback to type in url to change dropdowns:

def find_queryfield_in_url(url, field):
parsed_url = urlparse(url)
query_dict = parse_qs(parsed_url.query)
if field in query_dict:
    output = query_dict[field][0]
else:
    output = ''
return output


#url to change dropdowns
@app.callback(Output('dropdowns', 'children'),
          [Input('url', 'search')])
def update_dropdowns(search):
date= find_queryfield_in_url(search, 'date')
firstName= find_queryfield_in_url(search, 'firstName')
lastName= find_queryfield_in_url(search, 'lastName')
return get_dropdowns(date, firstName, lastName)

what the above callback do is when I type in localhost:8050/&date=20180727&firstName=Davis&lastName=Robert, it will trigger the data and change the dropdown values.

Now I wanted to integrate this with my tab callback:

@app.callback(Output('page-content', 'children'),
          [Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/' or pathname == '/view1':
    return view1
if pathname == '/view2':
    return view2
else:
    return '404'

so that I call change my dropdown and tab at the same time and it will have both the functionalities.
Desired output:
with this link: localhost:8050/&date=20180727&firstName=Davis&lastName=Robert&view=view1
I can get the data that I am looking for.

This probably sounds complex, but I can explain more if you are confused!

Thank you!

1 Like