Component State

A Component State variable is defined within the context of a single component and can be used by that component and any child widgets. For example, a Component State variable might be a variable that stores the current state of a customized checkbox.

This type of variable is useful for keeping track of the state within individual components and can help to improve the organization and modularity of widgets.

Using Component State variable

Let's see an example where the Component State variable is used to maintain the state (ON/OFF) of the customized light/dark mode switch component (within the component itself).

Here's how it looks:

Using Component State variable to maintain state of Ligh/Dark mode switch

To create a similar example, follow these steps:

1. Creating Component State variable

2. Save value

3. Get value

1. Creating Component State variable

To create a variable:

1. First, make sure you have created a component.

2. Select the component name (first widget in the widget tree), move to the right, and click + Add Field.

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

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., isDarkMode -> False).

7. Click Confirm.

Creating Component State variable

2. Save value

You can store the value in the Component State variable by adding the Update Component State action. For this example, you can update the variable named isDarkMode to True when the dark mode switch is ON and False when the light mode switch is ON.

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

pageUpdate Component State

3. Get value

For this example, you can retrieve the value of isDarkMode (Component 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 Component State > [component_state_variable_name].

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

Get value

Supported data types

The following data types are available for Component 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.