Conditional text style from callbacks

Dash Python
1

Hello!

I’m trying to format text outputs from a callback differently depending on the content (the callback outputs conditional text). I can’t figure out how to access the text as a variable to use in another function that could update the color, and I can’t update its html style in the original callback function (to my knowledge). So far I’ve tried:

  • a new function not in a call back (but I can’t figure out how to access the text content from the callback)
  • another callback function (but I can’t figure out how to input the callback output into the style).

Basically what I’m curious about is whether (/how) you can access callback outputs like variables

ex: I want the error_text to be red IF it contains certain words. How can I reference this in the style? Alternatively, how can I edit the callback so that the output string is already formatted correctly?

@app.callback(
Output(‘error_text’, ‘children’),
[
Input(‘table_1’, ‘data’),
Input(‘table_1’, ‘columns’)
]
)
def text_output(rows,columns):
content = PARSING ROWS FOR DATA (irrelevant code)
if content != 100:
output = ‘output1’
elif content == 100:
output = ‘output2’
return output

/////

dcc.Markdown(id=“error_text”, children=[“init”],
style={‘color’:COLOR}

2

To change the style of the error_text component, set the output to Output('error_text', 'style') - this will only change the style. If you also want to change the text, you need to also include Output('error_text', 'children'). If you need the current value of the error_text component, you can pass this information in via State('error_text', 'children') in your app.callback definition.

3

Thank you! could you give a code example of how to create an Output('error_text', 'style') callback? Additionally, to change both the text and the style do you need two separate callbacks or can you do it in one?

When I try to use State('error_text','children') as a variable in another function, it simply returns 'error_text.children'. Is there a method I should call to extract the value–i.e. the actual text? (ex: State('error_text','children').value() )?

4

Nevermind – I was able to get it to work! This updates the style automatically without needing to add a specific style reference in the Div.

@app.callback(
    Output('error_text','style'),
    [Input('error_text','children')]
)
def color_text(error_text):
    output = error_text
    if 'Please' in output:
        color = {'color':'red'}
    else: 
        color = {'color':'black'} 
    return color
2 Likes