Update dash "card" with callback

Dash Python
1

Hi,

I added a CARD (dash_bootstrap_components) in my application and it works fine, but I want to dynamically update the value shown based on filters.

I already have callbacks to updated graphs based on filters, but I’d like to know if I can update the value shown in card as well.

Is it possible?

2

Hello @pedromsouza

you mean you want to update a card such as

card = dbc.Card(
    [
        dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title"),
                html.P(
                    "Some quick example text to build on the card title and "
                    "make up the bulk of the card's content.",
                    className="card-text",
                ),
                dbc.Button("Go somewhere", color="primary"),
            ]
        ),
    ],
    style={"width": "18rem"},
)

?

Sure that’s possible. You can also only update specific parts of the card. As long as the part you would like to update, has an id, you can pass a new child, which is your value.

1 Like
3

Could you provide an example of the callback to alter something in the card?

4

If the following card is in your layout

dbc.Card(
    [
        dbc.CardImg(src="/static/images/placeholder286x180.png", top=True),
        dbc.CardBody(
            [
                html.H4("Card title", className="card-title", id='card_title'),
                html.P(
                    "Some quick example text to build on the card title and "
                    "make up the bulk of the card's content.",
                    className="card-text", id='card_text'
                ),
                dbc.Button("Go somewhere", color="primary"),
            ]
        ),
    ],
    style={"width": "18rem"},
)

Then the callback can be

@callback(
  Output("card_title", "children"),
  Output("card_text", "children"),
  Input("here_is_your_input_trigger", "n_clicks"),
)
def update_card(trigger):
  new_title= "this is your new title"
  new_text="tjis is your new text"
  return new_title, new_text
2 Likes