Data Store

In data store, located in the Left tool panel -> Data Store, you can create variables to store data that can be accessed elsewhere via accessors.

Data Level

There are three levels of data in data store:

1. App Data: Data is stored at the app level. All the data sources, elements, or pages in the app can access it or send an event to it.

2. Page Data: Data is stored at the page level. Only the elements on that page can access or send an event to it.

3. Element Data: Data is stored at the element level. It can only be accessed by the element that stores the data. For some elements, such as Lists, their child elements (that is, elements placed within them) can get parent element data directly by declaring specific keys, such as ${$item}.

How to create a data field

1. Navigate to the Data Store on the left panel.

2. Find a level (Element, Page, or App) and click New data field button to create a new data field.

3. Follow the instructions to fill in all the fields. Below is the explanation for each field and option.

Data Name: What do you want to name the data field? This is the name of the variable you’ll use later for accessing your data.

Data Type: What data type will this variable take on?

• String: A sequence of characters or textual data, such as customer. A string can have special characters or numbers. For example, The valuation is $40B.

• Number: A numerical value, such as 123. Note that the numeric data cannot contain any special characters, such as commas, or dollar signs.

• Array: An array is used for storing multiple values in a single variable and displays within square brackets, such as [1,2,3].

• Object: An object is a collection of properties that are defined as a key-value pair and specified within curly brackets, {}. A property key (name) is always a string, but the value can be any data type. For example, {"name":"Steven", "age": 25, "interests":["Photography", "Hiking"]}

Storage Type: Where do you want to store your data?

• In Memory: The data is stored temporarily. Every time users refresh pages, the data will reset to the initial value.

• Session Storage: The data is stored only during a user’s session. The data is persisted only until the browser or tab is closed. Each time a new session is opened, the data is reset.

• Local Storage: Data is stored in the user’s browser. The data is persisted until the user manually clears the browser cache or until your web app clears the data. If the user changes to another browser or computer, the data is no longer persisted.

• DB (database): Data is stored in a database (MongoDB). The data is always persisted, no matter if the user closes the browser or changes to another computer. To reset the data back to the initial value, you can either send an interaction or adjust it manually in the App Builder.

Data Value: The initial value of the variable. Data value can be empty but must follow the format of the selected data type. For example, if the data type is a number, the initial value should be a number like 1, 0, -15.

Access or declare data

In the App Builder, you can use your data store in the configuration panel or the interaction transformer via accessors. Accessors are a way for users to fetch a variable in a specific format.

Suppose you created a variable called customer_id in the app data and want to let a text element display the app data. In this case, you can use ${#app.customer_id} in the text element. #app means to look up data at the app level. customer_id represents the data name or the variable name stored in the app data. ${} tells the system to look for specific data.

Create a variable called customer_id

In fact, all the app data is stored in a JSON object. Another way to think about it is that ${} refers to a key in the JSON object. #app is the object name and customer_id is one of the keys in the object.

Access data in the configuration panel

• App data: ${#app.data_name}

• Page data: ${#page.data_name}

• Element data: ${data_name}

• Query result: ${#query_name}

Example: Given we already have app data named "stock_price" whose value is 70. In a text element, we enter Price: ${#app.stock_price}, then in the app preview, the element will look like "Price: 70".

Access data in the transformer

In the interaction transformer, you can use a function called context.getData() to access app/page/element data instead of using ${}.

• App data: context.getData("#app.data_field")

• Page data: context.getData("#page.data_field")

• Element data: context.getData("data_field")

If you are interested in using transformer, please see tutorial: Update app data using accessors

Note: Accessing element data doesn’t require a # to define the data level. Since only the element can access its element data, it can be used by the element directly.

Set or change data via interactions

You can send data from data sources or elements to data store via interactions.

Set up app data

1. Create an interaction.

2. In Action, choose App > Set app data.

3. In Action Parameter, specify the data field that you want to change and the new value.

Set up page data

1. Create an interaction.

2. In Action, choose App > Set page data.

3. In Action Parameter, specify the data field that you want to change and the new value.

Set up element data

1. Create an interaction.

2. In Action, choose Element > Specific element > Set value.

3. In Action Parameter, specify the data field that you want to change and the new value.

Note: Setting up an event to set app/page/element merely changes values in the data fields. It does not create a new variable. Remember to create a data field first before setting up your interactions.