This time, we’re updating an existing article, so instead of passing an empty dictionary to the ‘ArticleEdit’ form, we pass a copy of the article row from the Data Table that we want to edit.

We copy this row because we want to be able to discard the user’s changes if they click Cancel. If we were to use the original article from the Data Table, we would be editing this row directly, and we wouldn’t be able to discard any changes the user made in error.

You can read more about making it easy to cancel operations in database-backed apps.

Modify the edit_article_button_click function to pass in a copy of the article to be updated. Let’s also add ‘Save’ and ‘Cancel’ buttons:

  def edit_article_button_click(self, **event_args):
    # Create a copy of the existing article from the Data Table 
    article_copy = dict(list(self.item))
    # Open an alert displaying the 'ArticleEdit' Form
    # set the `self.item` property of the ArticleEdit Form to a copy of the article to be updated
    alert(
      content=ArticleEdit(item=article_copy),
      title="Update Article",
      large=True,
      buttons=[("Save", True), ("Cancel", False)]
    )

By passing in a copy of the existing article, the ArticleEdit’s self.item property becomes that copy of the article.

Our ‘ArticleEdit’ form already contains data bindings to self.item, so any updates the user makes will automatically write back to self.item, which is the copy of the article that we passed into alert(content=ArticleEdit(item=article_copy))