Dynamic text update during callback execution

Dash Python
1

Hello everyone,

I’m trying to find a way to dynamically change dbc.Alert’s text during app.callback execution.

layout = html.Div([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag&Drop or ',
            html.A('Select csv files')
        ]),
        multiple=True,
    ),
     dbc.Alert(id="upload-alert"),
])
@app.callback(dash.dependencies.Output('upload-alert', 'children'),
              dash.dependencies.Input('upload-data', 'contents'),
              dash.dependencies.State('upload-data', 'filename'))

def process_data(contents, names):
 i f names is not None:
        #change alert text to validating data
        for f in names:
            if not f.endswith('.csv'):
              #return alert text - data is not okay
         # change alert text to data format is okay, validating data
         # validate_data()
         # change alert text to data is okay / return not okay
         # save_data()
         # return alert text - success

I would be very grateful for advice!

2

Hi @maxfyk and welcome to the Community!

The return for the dbc.Alert component children must be a string in quotes " ":

Chenge the folowing line:

              return alert text - data is not okay

For this one:

return "data is not okay"

image

3

@Eduardo , thanks for your reply! I want to change the text of the alert several times while performing one callback, not ones.

4

Sorry, I don’t understand your answer :thinking:, in the callback you can have different if statements with one variable and return this variable.

5

Yeah, but i wanna change the text multiply times in one function, not just return the text one time. Like updating the alert status while the callback is being executed.

6

Could you provide an example of your goal, like if the user do something I want to show this. :thinking:

I can’t understand :woozy_face:

7 
layout = html.Div([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag&Drop or ',
            html.A('Select csv files')
        ]),
        multiple=True,
    ),
    dbc.Alert(id="upload-alert", color="light", is_open=False),
])
@app.callback([dash.dependencies.Output('upload-alert', 'children'),
               dash.dependencies.Output('upload-alert', 'color'),
               dash.dependencies.Output('upload-alert', 'is_open')],
              dash.dependencies.Input('upload-data', 'contents'),
              dash.dependencies.State('upload-data', 'filename'))
def get_data(contents, names):
    # change alert text to "Please wait, verifying files"
    # I need something like return "Please wait, verifying files", but so the function to continue working
    # Then verify files 
    # Now return alert text "Files are okey/ not okey"
8

Ok.

You have different alternatives, one simple is using dcc.Loading to show a spinner while the component is processig the data:dcc.Loading | Dash for Python Documentation | Plotly

But if you need to show different steps you can use a dcc.Store to evaluating the stage of the process:

@app.callback([dash.dependencies.Output('upload-alert', 'children'),
               dash.dependencies.Output('my-store', 'data')],
              dash.dependencies.Input('upload-data', 'contents'),
              dash.dependencies.State('upload-data', 'filename'),
              dash.dependencies.State('my-store', 'data'),)
def get_data(contents, names, step):

In the dcc.Store data you will be sending values (for example 0, 1, 2, n) to know the step of the process.
In the callback you listen the step value to perform the next step and return the new Alert and Step values.

Like:

   if step = 0:
        # do the evaluation and return:
        return "evaluating the data", 1
   if step=1:
        # do the next step and return:
        return "The data is ok, processing...", 2

https://dash.plotly.com/dash-core-components/store

Hope you can understand. :grinning: