✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Update elements dynamically

Hello there, I’m developing a Flask app in which I include a Dash app as well. The problem is I need to update a Dropdown’s options, dynamically, depending on the current_user (from Flask-Login). Two options arose here:

  • Add the options when initializing the app. Obviously, this does not work because current_user has not been initialized by the time Dash creates the Dropdown element.
  • Use a callback. This seems the best option so far, but does not work because there is no Input to trigger the callback, as it should update only once, when loading the page.

I can’t imagine any other alternatives, and frankly don’t know how to solve this issue.

Hi @thmasker welcome to the forum! So if I understand well the problem boils down to passing the value of current_user to the Dash app? Did you already read this stackoverflow discussion on this subject?

I just found a workaround, consisting on considering as Input the dropdown’s id, which I only “update” when loading the page. Anyway I don’t think this is the best solution.

I read that, yeah. If you see the answers, they don’t solve my problem because their solution consists on callbacks too. My problem is with the impossibility of calling callbacks without Input, as I only need the Dropdown to load once

You can use a dcc.Interval to trigger a callback on a regular basis (like every second) if you don’t have another property of a dash component to trigger the callback. See https://dash.plotly.com/dash-core-components/interval

This seems helpful. So how am I supposed to use it in order to update only once? (Regarding the Input property to put in callback)

app.layout = html.Div([
    dcc.Interval(
        id='interval',
        max_intervals=1
    ),
    dcc.Dropdown(
        id='building-dropdown',
        multi=True,
        placeholder="Select building(s)",
        style={'min-width': 150, 'width': 'fit-content'}
    ), 
])

@app.callback(
    Output('building-dropdown', 'options'),
    [Input('interval', 'id')])
def getBuildingIDs(none):
    return [{'label': building_id, 'value': building_id} for building_id in buildings]