Changing HTML P Element with Callback function

Dash Python
1

Hello everyone,

I am trying to change the text of a html P element via a condition, defined in a callback function.

The P-element is initiated as follows:
html.P(id = "status")

and the callback function is

@app.callback(Output("status", "children"),
              events = [Event("graph-update", "interval")])
def update_statusBar():
    
    if (condition):
        return{"data": "Health Status: NOk"}
    else:
        return{"data": "Health Status: Ok"}

Since nothing is shown in the Dash app, I am pretty sure that the “data” keyword in the return statement is wrong.
My goal is just to have either “Ok” or “NOk” on the P-element, depending on the condition. How do I achieve this the correct way?

Thanks in advance.

1 Like
2

children in this case is expected to be a string, so rather than returning a dict, see if just returning "Health Status: NOk" works.

1 Like
3

thanks for the reply.

unfortunately, this did not solve the problem. Still, nothing appears in the P-element.
Is my goal generally possible with Dash or am I trying to do something that cannot work at all?

4

@enq Can you create a toy app showing this behavior? This is something that should be pretty straight forward.

All you need to do for Outputs and Inputs is to name the component ID, and the component property (usually something like value for dccs, but also things like clickData and hoverData for crossfiltering.) Outputs usually refer to graphs (and thus you’re returning the component property figure, but you can just as easily refer to children to get the inside of an html tag.

In troubleshooting, I like to use print and watch my terminal to see the structure of the Input value. This might help you if the issue is you’re expecting a different data type.

5

@charleyferrari, thanks again for your reply.

I think in that case I might be missing the Input somehow. I understood Input as something like a checkbox or a textfield, thats why I am not sure how to use it in this context.

below the code for a toy app:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, Event
import random

app = dash.Dash()

app.css.append_css({'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'})

app.layout = html.Div([
                    html.Div([
                            html.Div([
                                    html.P(id = "status",
                                   children=["init"])
                                    ]),
                                    
                            dcc.Interval(id="update",
                                         interval=1000)
                            ])                   
                    ])
                                    

@app.callback(Output("status", "children"),
              events = [Event("update", "interval")])
def update_statusBar():

    pred = random.randint(0, 1)
    
    if pred == 1:
        return{"Health Status: nOk"}
    else: 
        return{"Health Status: Ok"}


if __name__ == '__main__':
    app.run_server(debug=True)

In reality, the data for the pred variable origins from a file, which is read in each time the callback function runs.

6

@enq, the following appears to do what you want. Note the return statements are passing back pure simple strings, not sets or dictionaries. You can do lists as returns to children as well, but there’s no reason to for your use case.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, Event
import random

app = dash.Dash()

app.css.append_css({'external_url': 'https://codepen.io/amyoshino/pen/jzXypZ.css'})

app.layout = html.Div([
                    html.Div([
                            html.Div([
                                    html.P(id = "status",
                                   children=["init"])
                                    ]),

                            dcc.Interval(id="update",
                                         interval=1000)
                            ])
                    ])


@app.callback(Output("status", "children"),
              events = [Event("update", "interval")])
def update_statusBar():

    pred = random.randint(0, 1)

    if pred == 1:
        return "Health Status: nOk"
    else:
        return "Health Status: Ok"


if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes
7

@Peter_S

Thank you, solved it for me!