There are four types of variables available that you can use inside a Draftbit app.

Variable Type	Description
App Variables	Variables that can be set and utilized across your entire application. For example, an API Key or a Client ID for one of your REST Service. Each time your app restarts, this type of variable will reset to its default value.
Device Variables	Variables that allow you to store data on your app users' devices. For example, when implementing auth with your REST API service, the auth token obtained back from the service is usually stored in this type of variable. Each time your app restarts, this type of variable will not reset to the default value and will use the last value stored in it.
Screen Variables	Variables that are scoped to the current screen they are created in. This type of variable lets you hold information that changes over time at screen level. It's helpful to use a Screen Variable in scenarios where only want to declare and use a variable with a component on a specific screen and do not want to declare app-wide variables. For example, you may want to display error messages that are coming from the auth API service in your form screens. Using a screen variable for this purpose is a good use case.
System Variables	Variables that come with a pre-defined boolean value and a use case. Draftbit exposes four types of System Variables: Is Online, Is iOS, Is Android, and Is Web.

Adding a variable

To add variables, open the Variables modal from the top menu.

This will open the modal below:

JSON Primitive Values

In an App Variable and a Device Variable, all JSON primitive types of values can be stored.

In JSON, values must be one of the following data types:

string
number
boolean
JSON object
array

Storing JSON data in Variables

When coming from an API endpoint, JSON data is utilized in a Draftbit app screen using the fetch component. The component helps traverse the object array to use each object as a part of the list. Each object then can further be used with data-enabled components such as Image, Text, etc., to appropriately represent the list of objects from the JSON data set on the screen.

Using an App or a Device variable, you can add a JSON object array as the variable's value and use it just like any other JSON primitive value. This is useful when the app requires static data to be presented and used with, for example, in a List component.

Another example is if you want to store user data locally to list somewhere in your app, for example, in a shopping cart. You can create a Device variable set to an empty object array by default and then add or remove data objects which represent entries in the user's cart using a Custom Function.

Consider the following example data that is in JSON format. It contains a list of products we want to display inside a List component on an app screen.

[
  {
    "id": "c116b14f-8f00-454b-915c-f3f51c7a297c",
    "smallImageUrl": "https://stockx.imgix.net/Nike-Kyrie-6-90s-GS.png?fit=fill&bg=FFFFFF&w=300&h=214&auto=format,compress&trim=color&q=90&dpr=2&updated_at=1591073011",
    "retailPrice": 110,
    "title": "Nike Kyrie 6 90s"
  },
  {
    "id": "e7b5d463-64d8-4b4f-adca-d6b10a0a9ea8",
    "smallImageUrl": "https://stockx.imgix.net/Air-Jordan-1-Retro-High-Tie-Dye-PS.png?fit=fill&bg=FFFFFF&w=300&h=214&auto=format,compress&trim=color&q=90&dpr=2&updated_at=1591072618",
    "retailPrice": 80,
    "title": "Jordan 1 Retro High Tie Dye"
  },
  {
    "id": "17c165c3-b1e7-4a10-aa5a-ca763c78cc53",
    "smallImageUrl": "https://stockx.imgix.net/Air-Jordan-1-Retro-High-Tie-Dye-TD.png?fit=fill&bg=FFFFFF&w=300&h=214&auto=format,compress&trim=color&q=90&dpr=2&updated_at=1591072618",
    "retailPrice": 60,
    "title": "Jordan 1 Retro High Tie Dye"
  }
]

Let's store the data in an App Variable. Open the Variables modal and add an App Variable called products. Paste the JSON data under the value field. Close the modal when you are done adding the variable.

To use it with a List component:

Select it on your app screen from the Components menu on the left-hand side
Go to the Properties panel on the right-hand side and select the Data tab
Under Setup, from the dropdown menu next to Data, select the variable with the field type that has ObjectArray

Any App or Device variable defined with JSON data will be available on the List component as a data source. You can use it to populate the components to present the data on the app screen. Here is an example screen that utilizes the data from the products App variable: