Custom Data Type in Firestore Document

Let's explore how you can utilize custom data types in Firestore documents through an example. Imagine you have an application where users can enter their address details. We can create a custom data type called 'address' to store these address fields in a structured manner.

Here's how it looks when completed:

Storing address details in a custom data type named 'address'

Here are the steps to build such an example:

1. Create a custom data type with the name 'address'.

2. To use the custom data type in the Firestore document, you must create a new field inside the collection and assign the custom data type to it. For this example, let's create a new field in the 'users' collection.

   

   Adding a field that supports storing custom data type
3. Build a page that looks like the below:

   

   Building a page to get address detail
4. To store the TextField values inside the 'address' field, you can add an action that creates or updates the document. Let's say you want to update the address details for a logged-in user. Here is how you do it:

   1. Select the widget (i.e., 'save changes' button) and add the Update Document action.

   2. For logged-in users, the 'users' collection is accessible via the Set Variable menu > Authenticated User, and you must specify its reference to update. So you can Select Reference to Update via Set Variable menu > Authenticated User > User Reference.

      1. Tip: If you want to store data in a collection other than the 'users', ensure you have access to the document and then specify the reference via the Set Variable menu > [collection_name] Document > Reference.

   3. Under the Set Fields section, click on the + Add Field button. Click until you see the field that stores the custom data type.

   4. Select the Set/Update [DataTypeName] (e.g., 'Set address', 'Update address'). This opens a popup on the left side.

   5. If you want to remove the existing subfields from a document and add only fields specified here, enable the Clear Unspecified Values. Keep it disabled to preserve the existing subfields and update the values for the fields specified here.

   6. For the Update Type, you can select the following options:

      • Select Set Individual Fields to update each field separately.

      • Select Set From Variable to set it directly from the other variable of the same data type.

      • Select Delete to remove this field from the document.

   7. For this example, set the Update Type to Set Individual Fields. Now you need to specify the fields (variables inside the custom data type). To do so, click on the + Add Fields and specify the fields as you would normally do (e.g., setting the Value Source to From Variable and then UNSET -> Widget State -> TextFieldName).

   8. Click Done and then Close.

Firebase: Storing values in custom data type

5. To display values from custom data type in any widget:

   1. First, ensure you have access to the document that has the field with a custom data type. For this example, we store the address details in a 'users' collection and can directly access the document for the logged-in users via Set Variable menu > Authenticated User.

      1. Tip: If you store data in a collection other than the 'users', you must query a document on the page or any top level widget.

   2. Select a widget that allows you to set a value from a variable.

   3. Here you can select a Document. To show the address of the logged-in user, select Set Variable menu > Authenticate User > [FieldName] (i.e., address field).

      1. Select Field that you want to display in this TextField.

      2. Click Confirm.

Firebase: Showing custom data type field in TextField

Example project

You will find the pages demonstrated here in the 'Firebase' folder of this example project.