App State

An App State variable can be accessed and modified throughout the entire application across all pages and components. This type of variable can be useful for storing data that needs to be shared between different parts of the app, such as user preferences and authentication tokens.

Using App State variable

Let's see how to use the App State variable to store language from the dropdown and display it on another page. Here's what it might look like:

To create a similar example, follow these steps:

1. Creating App State variable

To create a variable:

Navigate to the App Values (from the navigation menu) > App State.
Click on the + Add State Variable. A popup will open.
1. Inside the field_name box, enter the name of the variable.
2. Click on the dropdown list below and select the suitable Data Type.
3. Optional: enable the List to store multiple values of the same data type, such as a list of fruit names.
4. Optional: enable the Persisted to preserve the variable values even when the app restarts. For example, preserving the dark/light theme preference.
5. Click Create.
Once the variable is created, you can give it a default value. (e.g., isDarkTheme -> False, language -> English, etc.).

2. Storing a value

You can store the value in an App State variable by adding the Update App State action. For this example, you can add this action when the selection changes in the dropdown.

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

pageUpdate App State

3. Retrieve a value

To retrieve the App State variable value:

Select the widget, move to the properties panel, and identify the property that allows you to Set from Variable and click on it.
Set the source to App State > [app_state_variable_name].
Optional: To set the default value, click on Set from Variable again and enter the value. Click Confirm.

Securing persisted fields

You might want to store sensitive information in an App State variable (e.g., auth token, API keys, or anything that could reveal the user's personal information). The secure app state enables you to keep private data on a user's device securely.

This option is only available if you have any variable marked as 'Persisted'.
This will use the device-specific encrypted storage (KeyChain for iOS and EncryptedSharedPreferences on Android).

To secure the persisted fields, turn on the Secure persisted fields toggle.

Here's an example of using App State variable to store a progress value and display it on a Custom Widget.

To do so:

First, create an App State variable.

Create a Custom Widget. While you create it, make sure to add a parameter (that you will use to pass an App State variable value) and make changes in the code accordingly. You can find the widget used in the example here. Here's how it looks:

To pass the variable in a custom widget, select the custom widget, move to properties panel, navigate to the parameter and see how to retrieve an App State variable value.

Supported data types

The following data types are available for App 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.
Timestamp: To store date and time value.
Json: To store the JSON value such as {"firstName":"John", "lastName":"Doe"}.
Lat Lng: To store the latitude and longitude of a particular place. Storing Lat Lng value helps you locate a place in Google Maps.