Variables

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

Variable TypeDescription
App VariablesVariables 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 VariablesVariables 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 VariablesVariables 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 VariablesVariables 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.
1534

This will open the modal below:

800

JSON Primitive Values

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

600

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.

1174

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
466

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:

1200