Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Variables & Variable Binding
  • Two Way Variable Binding
  • What is a front-end variable
  • Creating front-end variables in Dittofi
  • Binding front-end elements to variables
  • Variable Types Reference
  • Writing variable expressions

Was this helpful?

  1. Learn Frontend

Variables

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

PreviousCustomNextArray

Last updated 2 years ago

Was this helpful?

In this tutorial you will learn:

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

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.

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.

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.

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.

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.

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.

🟧
What is a front-end variable
Creating front-end variables in Dittofi
Binding front-end elements to variables
Reference guide to front-end variable types
Writing variable expressions