Dittofi
Search
⌃K
🟧

Variables

Front-End Variables are used to move data around the front-end of your app.

Variables & Variable Binding

Two Way Variable Binding

​
--------------------------------------------------------------------------

What is a front-end variable

A front-end variable allows you to create variables on the front-end of your app. Your apps variables are visible within the page builder tab inside the Dittofi Design Studio.
Front-end variables have three settings that you need to define:
  • Name: which is a free text field that you use to give your variable a name
  • Type: which explains what the data type is for your variable
  • Initial value: which stores the initial value of your variable
The screenshot below shows an example of a front-end variable with the name set to currentUser, the type set to model and the initial value to be users.
NOTE
Text variables also have an option to add multiple text values for different environments (e.g. production vs test environments).

Creating front-end variables in Dittofi

To create a front-end variable inside of Dittofi, go to the Page Builder tab inside Dittofi and click on the
button. This will bring up the front-end variables side panel, as shown below.
​
​
NOTE
In the above example, there are examples of variables that have already been created. If you started by installing an app template, or if you are taking over a project from another Dittofi Developer, there will be a list of pre-existing variables that you can see within the pop out.
ALTERNATIVELY
If you're starting with a completely blank app, then this panel will be completely empty.
To create a new App Variable variable click on the
button at the bottom of the Variable side panel. This will bring up the following Variable Settings window where you can set variable name, type and initial value for your variable.
​
Fill in these options and click
to create your variable.

Binding front-end elements to variables

All front-end variables can be bound to elements on your apps front-end. This allows you to display variable values on your apps front-end. For example, let's assume that we have a text variable with an name appUser and an initial value set equal to Bob Dylan, as shown below.
It is possible to display the contents of the variable inside of the app by binding the data to a text element.
To bind the variable to a text element, add a new text element such as a span to your page. Alternatively click on an existing text element. Next, click on the cog icon on the element to bring up the element settings.
From within the element settings box, click on the
button and, from the popup, select variable, search for the text variable that you would like to bind to the element and click
, as shown below.
Once this has been done, you will notice that the element settings update to show that your variable is now bound to the variable appUser. You will also notice that the text displayed on your app updates to read {appUser}, as shown below.
Now that the element is bound to the appUser variable, whenever the app is run live, the element will display the contents of the appUser variable.

Variable Types Reference

All available fields are listed below in the order that they appear within the Dittofi platform. For more information, read the corresponding support articles.
Variable type
Data type
Description
Array
Array
​
Checkbox
Boolean
The checkbox type creates a container that allows you to store data as either a true or false value.
Collection
List
The collection variable creates a container that lets you to store a collection of records that are associated with a data model.
Collection (Custom Model)
List
Allows you to store a collection of records that are associated with a custom data model.
Custom Model
Row
Allows you to store a single record that is associated with a custom model.
Date
Date
The date varaible let's you store a date value of format yyyy-mm-dd.
Date time
Date time
The Date time variable let's you create a container to store a date and time value.
File
​
​
Number
Integer
The number field
Number with decimal
Floating point
​

Writing variable expressions

You can write variable expressions to do more complex operations with variables. For example to concatenate two text variables or add two numbers together on the front-end.
Last modified 8mo ago