Share data between pages in Dash multi-page app

Question

I am trying to create a multi-page app using Dash. I have a table on my first page that contains rows of data. When a user selects a row and clicks a button, I want to load in a new page w/ the ID of the row that was selected.

I can navigate to that directly using the URL, but I can't get it to work programmatically. Is my idea way off? Here is some code. The error I get is that the return of the callback function is expecting a different type than dcc.location

layout = dbc.Container([
    html.Div(children='Experiement Results'),
    html.Div(id="hidden_div_for_redirect_callback"),
    dbc.Button("Image Browser", id='image-browser', color="dark", className="me-1"),
    dbc.Button("Experiment Result", id='exp-result', color="dark", className="me-1"),
    html.Div([
        dash_table.DataTable(data=df, 
                            columns=[{'id':c, 'name':get_field_display_name(c), 'type':get_field_type(c)} for c in df[0].keys()],
                            page_size=100, 
                            row_selectable='single',
                            cell_selectable=True,
                            filter_action='native',
         )
    ])
])

@callback(
    (
        Output("hidden_div_for_redirect_callback", "children"),
        Input('image-browser', 'n_clicks'),
        Input('exp-result', 'n_clicks'),
        Input('tbl', 'selected_rows'),
    ),
    prevent_initial_call=True)
def button_pressed(image_browser, exp_result, active_cell):
    changed_id = [p['prop_id'] for p in callback_context.triggered][0]

    if 'image-browser' in changed_id:
        return dcc.Location(pathname='/imagebrowser/{ac}'.format(ac=active_cell[0]), id="12412", refresh=True)
    elif 'exp-result' in changed_id:
        return dcc.Location(pathname='/expresult/{ac}'.format(ac=active_cell[0]), id="146", refresh=True)
    else:
        return None

The pages are registered pages: i.e:

register_page(__name__, path_template="/expresult/<result_id>")

bas · Accepted Answer · 2023-04-14 20:36:22Z

0

I think you're mixing two approaches.

You're using the new dash pages approach for creating multi page apps (Since you're using register_page for example), but you're also trying to use dcc.Location explicitly.

I think you don't even really need a callback for what you're trying to do. I suggest you simply turn your buttons into links:

dcc.Link("Experiment Result", href='/expresult/146')

If for styling or other reasons you want the links to still be buttons you can wrap the buttons in links:

dcc.Link(dbc.Button("Experiment Result", id='exp-result', color="dark", className="me-1"), href='/expresult/146')

answered Apr 14, 2023 at 20:36

bas

15.2k7 gold badges27 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Share data between pages in Dash multi-page app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related