App Variables can be used throughout your app to reference data that is stored in tables or configured through App Variables Settings.

There are 4 main types of App Variables as follows:

  • Logged-in Fields are specific to the current logged in user.
  • App Variables are configured through the App Variables Settings page.
  • Formatted Values from the current record being referenced in components.
  • Raw Values from records reference fields within certain records including Name, Address, Link, Image, and File.

App Variables are the referencable values that can be configured in the App Variables Settings page. This page, pictured below, can be found under your app's settings at Settings > App Variables. There are 5 default variables in place and any additional variables configured will be listed below. Custom variables can be edited and deleted.

When adding a new variable, similar to how fields are added in the Data Builder, you will be prompted to fill out details. 

  1. The Variable Name is a name used to reference your variable while working on your app. This is the name that you see when adding variables to your HTML components.
  2. The Unique Code is used to reference your variables in your HTML components. This is essentially the code definition of your variable so it can be processed by your HTML component.
  3. Descriptions are for your reference and are visible in the App Variables Settings page.
  4. The Type can be either Static or Formula. Static indicates a variable that does not need to change based on any table data or conditions. For more information on these settings, read ahead.
  5. By default, a new variable will be Active, however, if the variable does not need to be referenced at a time, the Status can be altered as needed.
  6. The Value is a field for Static type variables. This is the text that appears when the variable is referenced throughout your app.

If your variable Type is configured to be Formula, instead of providing a Value, you will be prompted for the following:

  1. You'll be able to select any table in your app including default tables.
  2. Available function options are Count Record, Minimum Value, Maximum Value, Average Value, Sum Value.
  3. For all options except for Count Record, you will need a Value Field. This field should be a numeric value.

In addition to the above, conditions can also be set for your Formula. Below is an example of a complete Formula including a condition:

Next, let's take a look at how to reference the custom App Variables in addition to Logged-in Fields, Formatted Values, and Raw Values. These variables can all be referenced with various HTML components throughout your app. The available variables will always be listed above the text editor when managing your HTML component.

Let's start with a basic HTML component on an independent page. This means that the page is not a Detail or Edit page. The variables available in this component are App Variables and Logged-in Fields.

The list of each type of available variable can be expanded by clicking the type of variable. If Add App Variable is clicked, we see the following list which includes all the default variables in addition to the custom ones configured in the App Variables Settings page:

Next, here is what we see when we click Add Logged-in Field. This list is not affected by customizations so you will see the same variables throughout all of your apps. Logged-in Fields reference the record in the default Users table for the specified logged in user.

The other type of HTML component is one added to a dependent page. This means a Detail or Edit page. Additionally, HTML components added within List components will show the same variable options. The main difference between these two types of HTML components is that one on a dependent page or in a List component has a specific table and record to reference where one within an independent page is not connected to a table or record.

When Add Field is clicked, a list of fields that can be referenced for the given record is displayed.

When working in an HTML component in a dependent Details or Edit page, Raw Values can be referenced. These variables exist for certain fields including Name, Address, Link, Image, and File. Listed below are name formats that can be followed when referencing your variables.

  • Address
    • Address: {!!Address.address!!}
    • Address Line 2: {!!Address.address2!!}
    • City: {!!!!}
    • State: {!!Address.state!!}
    • Zip: {!!!!}
    • Country: {!!!!}
    • Latitude: {!!!!}
    • Longitude: {!!Address.lng!!}
  • Name
    • Title: {!!Name.title!!}
    • First Name: {!!Name.first_name!!}
    • Last Name: {!!Name.last_name!!}
    • Middle Name: {!!Name.middle_name!!}
  • File
    • Source: {!!File.url!!}
    • Name: {!!!!}
  • Image
    • URL: {!!Image.src!!}
    • Name: {!!!!}

It is important to learn the format components of these variables when referencing them in an HTML component. For example, let's use an address field in our app to reference the zip code. Here are the configurations of my address. Please take note of the portions that are highlighted in yellow and green.

When we referencing the desired Raw Variable, we will take the field Name and the original Label. This means that, regardless of the custom Label configured for the variable, the original will always be used when referencing the Raw Variable. So, this is how we will reference our Address zip code in the HTML component.

Finally, let's take a look at an example showcasing each of our variable types.

With the above HTML component, this is what the variables on our page look like: