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
  • Dittofi terms and concepts (frontend only)
  • Frontend Elements
  • Frontend Variables
  • Two way variable binding
  • Front-end actions
  • Creating a front-end action
  • What you've learned
  • Next up

Was this helpful?

  1. Tutorials
  2. Dittofi Essentials

Part 1: Frontend terms and concepts

The Dittofi Essentials give you a "top down" introduction to essential concepts in Dittofi. In this tutorial we cover frontend terms and concepts.

PreviousDittofi EssentialsNextPart 2: Backend terms and concepts

Last updated 1 year ago

Was this helpful?

WHAT YOU'LL LEARN

  • Key Dittofi terms and concepts (frontend only)

  • Frontend elements

  • Frontend variables

  • Two way variable binding

  • Frontend workflows

  • Creating a frontend workflow

Dittofi terms and concepts (frontend only)

Before we dive into some actual visual app development, let's talk about some of the terms and concepts you'll need to know to use Dittofi's frontend builder. In the next lesson we will cover the key terms and concepts for Dittofi's backend builder.

Frontend Elements

Dittofi empowers anyone to build beautiful, high performance frontends. To start with users are able to select from a list of prebuilt frontend elements that let them design their app. Users can then click the build code button to turn these designs into code (HTML5, CSS, React and Redux and golang).

Note that the "build code" button also launches the app into a docker container inside a pre-configured and scalable Amazon Web Services environment.

Frontend Variables

Frontend variables are like placeholders. They can be used to store data in the frontend of your app. For example, if you want to write a custom message to your new users like "Welcome Bob Dylan". You can do this in four steps.

Step 1. Create a frontend variable

Creating a new frontend variable from the variables tab.

Step 2. Complete variable form

Fill in the variables form, setting the Name to "username", the Kind to "Text", and the Expression to "Bob Dylan".

Step 3. Bind your header to your variable

Add a new header element and type "My username" in the content of the header element, bind your header element to your variable by clicking the Show button in the dropdown and selecting "Variable".

Step 4. Build and launch your app

We will first ensure the element is getting the data from the variable and then we build your code and launch your app. You can see that when you hit the preview button, the binded variable ("My username") is substituted out for the Initial Value which, in out case is the username "Bob Dylan".

Two way variable binding

In the last step we created a variable with an initial, fixed, text value set to "Bob Dylan". It is also possible to populate the variable with dynamic information. One way to do this is to bind the variable to and Text input box. You can do this in three steps.

Step 1. Add a Text input element

Add an Text input element to your page.

2. Bind {username} variable

Bind the Text input element to the "My username" variable that we created in the last step.

Once out text input element is bound to our "{username}" variable, whenever someone types into the text input element, this text will immediately populate inside of our "{username}" variable.

Step 3. View the result

Finally, to see the result in action, build and launch your code. Then test your code by typing into the text input element as shown below. You can see that the contents of the text input element immediately populates our "My username" variable.

Front-end actions

Front-end actions allow your users to trigger certain types of functionality. For example, you might want to alert one of your app users with a custom message if they clicks on a button, as below.

Creating a front-end action

Front-end actions can be added from inside the Dittofi page builder, under the "Front-End Actions" tab.

Inside the front-end action, you're able to chain together events to perform any type of functionality for example, validating form data, running conditional checks, loops and much more. In our example, we want to trigger an alert popup. To do this, we add the Alert event.

Next we create a message that we want to display inside our Alert. To do this, we create a text variable inside of our action.

Note, this variable is global to our action, this means the variable can be used inside any event that we add to our action. Note also that the variable kind is set to text and the Expression field is set to a fixed value "Yo... you just clicked my dope button".

Next, we can use our variable to set the Message value inside of our Alert event.

The last step (before you build and launch) is to set your action to trigger when the user clicks on a button. To do this, (1) add a button element to the page, (2) select the button element, (3) open up the front-end action tab and (4) add the front-end "My First Action" to trigger on click. Now, whenever someone clicks on this button, that will trigger your action to start.

Build and launch your app to test your first workflow.

Take note, front-end actions are incredibly flexible. Depending on how you chain together the events, you can achieve pretty much anything. We will build more extensive workflows in Parts 3 and 4 of this tutorial.

What you've learned

Dittofi's frontend has a number of new terms and concepts to remember. As a reminder, here's what we just covered:

  • Frontend elements: these are a list of prebuild elements that you can add to the frontend of your app.

  • Frontend variables: these are placeholders that can store data. You can bind each variable to a frontend element.

  • Two way variable binding: variables can be bound to page elements that are used to display outputs as well as store data input by our apps users.

  • Frontend actions: these can be configured to perform any type of frontend functionality for example, displaying an alert box on a user click.

Next up

You will learn key terms and concepts required to use .

Dittofi's Backend Builder