Dash - User feedback with Javascript functions

Dash Python
1

For some time now I’ve been trying to get the following scenario to work:

I have a Dash-App which requires some user input. The input is then checked in a python function. I now want to give some obvious feedback to the user if the input lead to some error in python. Currently, I simply update a div with the error message. What I would like to have is something like a JS alert being triggered from python.

In Flask I simply achieved this with templates:

<!doctype html>
{% with messages = get_flashed_messages() %}
  {% if messages %}
    <script>
      var messages = {{ messages | safe }};
      for (var i=0; i<messages.length; i++) {
        alert(messages[i]);
      }
    </script>
  {% endif %}
{% endwith %}
{% block body %}{% endblock %}

Followed by flask.flash in Python. However, I failed to get flask.flash working with dash.

I also tried the dash-display-error-message.py https://github.com/plotly/dash-recipes/blob/master/dash-display-error-messages.py tutorial. However, Errors in python don’t seem to trigger the JS-function dash-error-message-display.js, thus showing no alert.

Any help would be greatly appreciated :slight_smile:

2

This is the “dash way” to do it right now. If you needed a custom UI for these alerts, then it’s recommended that this UI is encapsulated as a first class Dash plugin component (Build Your Own Components | Dash for Python Documentation | Plotly).

Error handling can look like this:

app.layout = html.Div([
    html.Div(id='container'),
    ...
])

@app.callback(Output('container', 'children'), [...])
def update_container(...):
    try:
         ...
         return dcc.Graph(...)
    except:
         # you can return whatever markup you want here
         # this is where a custom `Alert` component might go if you wanted that
         return html.Div('An error occurred while processing this event')
1 Like