Black Lives Matter. Please consider donating to Black Girls Code today.

Error dialog popup box for complicated layouts

Hi all,
My head hurts from trying to find a somewhat elegant way of doing this…

So, I know the current accepted method for user messages is the confirm dialog component OR just changing the children on a Div component. However, that requires your callback output to be the children of a Div component.

My layout has a dash-table and 3 buttons. All 3 buttons go to the same callback and do things to manipulate table data.

The flow goes like this:

  1. Person edits the table
  2. Person clicks button ‘a’ which changes some data
  3. Person clicks button ‘b’ which saves the table to a database
    • If the person messes up a value we do try->except to catch it
    • If the exception occurs, I want a popup to say “you done fucked up”
    • If there is no exception, then the callback finishes the database updates, and then updates the dash-table component

Any way to do that without weird hidden divs? I found you can directly edit the app.layout.children property and append stuff programmatically, but since it’s not part of a callback it doesn’t update.

hopefully that makes sense…I need more coffee

1 Like

At a first glance, that would be how I’d think about it. Your output after save would either return “Success!” or “Error”. I think you could return a ConfirmDialog too, but that might feel a little dramatic, I’d instead try to return a nicely formatted error message container (display the error message right below the b button).

1 Like

Thanks! I’m going to go with the dialog I think. I want my users to feel bad about what they’ve done

If anyone ends up here and is curious, I ended up making a modal box with CSS and using a callback to display it.

So basically really similar to the ConfirmDialog component, but I have more control over it.

2 Likes