Links

Updating Data

This page describes how to update document data of Firestore collection.

Prerequisites

Before getting started with this section:

Updating Documents

Updating allows you to make changes to a single document. For example, you could display the Todo details on a new page and allow users to update any Todo information. Just like the following visual:
Updating Todo item
Showing and updating document data consists of the following steps:
  1. 1.
    Build a page (you can skip this if you already have a page designed)

1. Build a Page

First, let's design a page that allows you to update the Todo details:
  • Create/Select a page and give it a name.
  • Select the AppBar widget and remove the existing back button. Move to the property editor (on the right) and turn on the Show Default Button.
  • Inside the Column widget, add a TextField (under Form Elements) to show the Todo title and give it a name such as TextFieldTitle.
  • Add another TextField inside a Column to show the Todo Description and give it a name such as TextFieldDescription.
  • Add a Container with an action to open the DatePicker.
  • Add a Text inside Container to show the selected Date.
  • Add a Button to save changes.
Building a page

2. Showing existing data in UI elements

Before you allow users to update any data, you must display it on the screen.
Passing Data: Make sure to define the parameter on this page of the Type Document and pass its value from the previous page (e.g., the TodoDetails page). You can follow the instructions for passing the data from one page to another here.
To show data in the TextField widget:
  • Select the TextField Widget from the widget tree or from the canvas area.
  • Move to property editor and scroll down to the Initial Value property.
  • Click on the Set from Variable text. (This will open a new panel)
    • Find the Source dropdown, click on unset and select the source. For showing data from the Parameter, select the Parameter Name which holds the record.
    • Under the Available Options, click on Unset and select the field that you wish to show.
    • Click Save.
  • Similarly, show the data for other UI elements as well.
Show data in UI elements

3. Adding action to update record

Pro tip: After adding the Update Record action, you can open the main Todo listing to show the updated item. You can do so by chaining/adding the Navigate To action by clicking on the + button inside the already added action box.