Generate alert message if condition occurs otherwise show the app

user_10655190 0
Viewed 1377

Objective: I would like to pop an Alert component if a condition occurs (i.e no data from URL pathname) otherwise render the app

What I've tried so far

app.layout = dbc.Container([

    dbc.Alert([...], id='alert', is_open=False),
    dbc.Container([rows & columns (all visuals are here)], id='page1')
])

@app.callback(
    [Output('alert', 'is_open'),
     Output('store-component', 'data'),
     Output('page1', 'children')],
    Input('url', 'pathname')
)
def extract_path_from_url(pathname):
    if pathname name contains ... :
       store the dataset in the Store component and **DONT SHOW THE ALERT BUTTON**
    else:
       **SHOW THE ALERT BUTTON** and that's it

    ... other callbacks generating the visuals based on the store-component ...

This didn't work, is there a proper way to achieve this ?

EDIT: Latest try:

this is my updated callback and layout. So far it works fine when the condition is True , the Alert component doesn't display and everything displays fine. The problem is when the condition is false, the Alert message shows successfully but the we can see the graphs being empty. I want to hide them or not render them at all...

app.layout = dbc.Container([

    dbc.Alert([...], id='alert', is_open=False),
    dbc.Container([rows & columns (all visuals are here)], id='container')
])


@app.callback(
    [Output('alert', 'is_open'),
     Output('store-component', 'data'),
     Output('container', 'style')],
    Input('url', 'pathname')
)
def extract_path_from_url(pathname):
    if pathname name contains ... :
       return dash.no_update, data, dash.no_update
    else:
       return True, dash.no_update, {'display': 'none'}

enter image description here

bootstrap-4 plotly-dash plotly callback
3 Answers

Actually there is a component already in the core Dash components library, dcc:

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

enter image description here

What you do for the callbacks, is you set the output to be the id for the dcc.ConfirmDialog component which can be anywhere in the app.layout. And you return True (for the property ConfirmDialog.displayed) to trigger the alert to be displayed! It will be done automatically

@app.callback(
    [Output('alert', 'displayed'),
     Output('store-component', 'data'),
     Output('page1', 'children')],
              Input('url', 'pathname'))
def display_confirm(value):
    if value.contains(X):
        return True
    return False

Then a secondary callback can reactively get triggered via any of the properties of the ConfirmDialog component being activated/changed (for example either 'cancel' or 'ok' being clicked). Or, you can do nothing with the fact that the user clicked the button. Presumably you would want to distinguish if the cancel_n_clicks or submit_n_clicks (i.e. user clicked "OK") were incremented, though I would think....

So, you could have in your next callbacks both those inputs included in the inputs array, and include a check to see if it's the cancel counter that gets incremented, in which case then halt and do not proceed. If it was the submit ("OK") then proceed. The user is forced to choose one or the other and these button are not alterable in this particular component.

user_67146270

How about splitting it into two callbacks, and for the false case (no alert is displayed), using dash.exceptions.PreventUpdate?

E.g,:

from dash.exceptions import PreventUpdate

app.layout = dbc.Container([

    dbc.Alert([...], id='alert', is_open=False),
    dbc.Container([rows & columns (all visuals are here)], id='container')
])


@app.callback(
    [Output('alert', 'is_open')],
    Input('url', 'pathname')
)
def extract_path_from_url(pathname):
    if pathname name contains ... :
       return False
    return True

@app.callback(
    Output('store-component', 'data'),
    Input('alert', 'is_open')
)
def display_content(alert_is_open):
    if alert_is_open:
        raise PreventUpdate
    return data # wherever you get this from, in this function, or as a State input, etc.
user_67146270

Yes you can create it . Just simply writing the condition only eg (highest price Crossing cloing price).aftet writing this you get perfect time of alert when high price going above closing price in single candle .

user_185504380
Related