Page State

A Page State variable is only accessible within that page and is not shared with any other pages in your app. This type of variable can be useful for storing data that needs to be shared between different widgets of the page, such as saving form data, a search query, filtering, and sorting options.

Using Page State variable

Let's see an example where the Page State variable is used to show or hide UI elements on a page. Here's the scenario; on a profile page, when an edit button is pressed, it allows users to change their profile picture and save it. Once saved, it shows the edit button again. You can build such behavior using the Page State variable that might have a name like isEditing.

Here's how it looks:

Using Page State variable to show/hide widgets

To create a similar example, follow these steps:

1. Creating Page State variable

2. Save value

3. Get value

1. Creating Page State variable

To create a variable:

1. Select the page name. This will be the first widget in the widget tree.

2. Select State Management from the properties panel (the right menu) and click + Add Field.

3. Inside the Field Name box, enter the name of the variable (e.g., isEditing).

4. Click on the dropdown list below and select the suitable Data Type.

5. Optional: enable the List to store multiple values of the same data type, such as a list of fruit names.

6. You can also give it a default value using Initial Field Value (e.g., isEditing -> False).

7. Click Confirm.

Creating Page State variable

2. Save value

You can store the value in Page State variable by adding the Update Page State action. For this example, you can update the variable named isEditing to True on the edit button press and False on the save button press.

Visit the following page to learn more about using this action:

pageUpdate Page State

3. Get value

For this example, you can retrieve the value of isEditing (Page State variable) and use it to show/hide widgets using Conditional Visibility.

Here's how you do it:

1. Select the widget, move to the properties panel, and identify the property that allows you to Set from Variable and click on it (e.g., Conditional Visibility property).

2. Set the source to Page State > [page_state_variable_name].

3. Optional: To set the default value, click on the variable again and set the value. Click Confirm.

Retrieve a value

Supported data types

The following data types are available for Page State:

• Integer: To store numbers such as 100, 4302, 50000, etc.

• Double: To store a decimal number such as 12.43, 3233.50, 65.5666, etc.

• String: To store plain text such as title, description, etc.

• Boolean: To store either a true or false value.

• Color: To store the color value.

• Image Path: To store the URL of the uploaded image.

• Video Path: To store the URL of the uploaded video.

• Audio Path: To store the URL of the uploaded audio.

• Document Reference: To store a reference of a document. Storing a reference helps you fetch the document data.

• Document: To store an actual Firestore document.

• Timestamp: To store date and time value.

• Json: To store the JSON value such as {"firstName":"John", "lastName":"Doe"}.

• LatLng: To store the latitude and longitude of a particular place. Storing Lat Lng value helps you locate a place in Google Maps.

• TimestampRange: To store the start date-time and end date-time values.

• GooglePlace: To store GooglePlace data.

• Data Type: To store custom data type (aka Firestore Map).

• Supabase Row: To store actual row data from a Supabase table.

• Uploaded File (Bytes): To store the uploaded file in Bytes.