Add Save and Cancel buttons

We want to display two buttons on our popup: ‘Save’ and ‘Cancel’. We’ll create a new article if the user clicks ‘Save’ and discard the user inputs if they click ‘Cancel’.

We can do this by setting the alert’s buttons property to be a list of buttons. Each button should be set to a 2-tuple. The first element of each tuple is the text to display on the button, and the second element is the value returned if the user clicks that button.

Add a buttons property to the alert in your add_article_button_click function so that the ‘Save’ button returns True and the ‘Cancel’ button returns False:

  def add_article_button_click(self, **event_args):
    # Open an alert displaying the 'ArticleEdit' Form
    alert(
      content=ArticleEdit(),
      title="Add Article",
      large=True,
      buttons=[("Save", True), ("Cancel", False)],
    )

Let’s run the app and click the ‘Add an Article’ button. We should see the ArticleEdit Form in a popup with ‘Save’ and ‘Cancel’ buttons on the bottom right.