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:
Using app state variable to store and retrieve language selection
To create a similar example, follow these steps:
  1. 2.
    ​Storing a value​
  2. 3.
    ​Retrieve a value​

1. Creating App State variable

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

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:

3. Retrieve a value

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

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.
Securing persisted fields

Using App State variable in custom widget

Here's an example of using App State variable to store a progress value and display it on a Custom Widget.
Using App State variable in custom widget
To do so:
App State variable
  1. 2.
    ​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:
Custom widget code
  1. 3.
    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.
Passing variable in Custom Widget

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.