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
  • Connecting your frontend and backend
  • Step 1. Create a frontend variable
  • Step 2. Create a front-end action
  • Step 3. Run endpoint event
  • Step 4. Add a condition event
  • Step 5. Add a Set Field event
  • Step 6. Add a repeating group
  • Step 7. Trigger action on load
  • Step 8. Build, launch and preview your app
  • Basic Dittofi data flow
  • What you've learned
  • What's up next?

Was this helpful?

  1. Tutorials
  2. Dittofi Essentials

Part 3: Connecting frontend and backend

The Dittofi Essentials give you a "top down" introduction to essential concepts in Dittofi. In this tutorial we will join up everything that we learnt in Part 2 and Part 3.

PreviousPart 2: Backend terms and conceptsNextPart 4: Dittofi app structure

Last updated 1 year ago

Was this helpful?

WHAT YOU'LL LEARN

  • Connecting frontend and backend (8 steps)

  • Run endpoint event

  • Condition event

  • Set field event

  • Repeating group

  • Basic Dittofi data flow

Connecting your frontend and backend

In the Part 1 of the Dittofi Essentials you learnt how to build a frontend, create frontend variables and trigger front-end actions to run. In Part 2, you learnt how to build a backend data store and how to build an interface into that store using webservice endpoints.

In this section, we are going to bring all the concepts together by showing you how you can connect up your frontend and backend in 8 quick and easy steps.

Step 1. Create a frontend variable

Head on over to the Dittofi Page builder and create a new frontend variable called "ProductsList" and set it to type Collection.

Step 2. Create a front-end action

Create a front-end action called "Get products data".

Step 3. Run endpoint event

Add a Run endpoint event to your action.

The Run endpoint event allows you to trigger a specific endpoint to run whenever your workflow runs. In our case, we want to trigger our Get products data endpoint, since we want to fetch data from our Products data model.

Fill in the Run endpoints event form as below and press "Save".

Notice, the data that is returned from our Get products data endpoint is mapped into the Response As and a Response Code As fields.

The Response As field gives us an option to add a variable, or placeholder, for the collection of products returned by our endpoint. Meanwhile, the Response Code As field gives us an option to add a variable, or placeholder for the response code returned by our endpoint. Recall that a response code 200 means that the endpoint has run successfully.

Step 4. Add a condition event

Checking that an endpoint has run successfully is good practice. To do this, we begin by creating a variable within our workflow called "SuccessCode" and setting its value equal to 200.

We then add the condition event within our workflow. We use the event to compare the endpoint Response Code against our SuccessCode variable.

If the Response Code is equal to the SuccessCode we know that our endpoint ran successfully.

Step 5. Add a Set Field event

Add the Set Field event inside of our condition statement.

The set field event lets you set the value of a variable in your app. In our case, we want to take the data returned from our endpoint and map this data into our frontend ProductsList variable.

The final set field event configuration is shown below.

Note, because the set field event is inside our condition statement, it will only run if the endpoint returns a success code 200.

Step 6. Add a repeating group

Add the following elements to the page a div block and inside the div block add an image, heading and heading (h3) elements.

Next, turn your div block into a repeating group.

A repeating group is a container that repeats for every value in a list.

In our case we bound our div block to our ProductsList variable. This means that our div block will now repeat for every row of data stored inside our products data model and returned by our endpoint to our action.

Since each row in the repeating group contains columns, i.e. product, category and image. We need to choose which element inside our repeating group will display which column. In our case we can set the image component to the image field, the heading to the product and label to the category.

Step 7. Trigger action on load

To get the front-end action to trigger when your app loads, re-open your action and change the trigger from "Component" to "On app mount".

Step 8. Build, launch and preview your app

Click "Build code" and then preview your app in a live environment. You should see a list of the data in your products table displayed down the screen, as below.

Basic Dittofi data flow

There are quite a few steps when linking the frontend and backend of a Dittofi app. There are various shortcuts, however, this taking it step by step will help you to maximize your understanding of the app development process.

In this section we are going to zoom out and recap what we have done so far, with a high level diagram (shown below) that explains how data flows around the system.

What you've learned

In Parts 1 - 3 of this tutorial we have learnt

  • Dittofi frontend essentials

  • Dittofi backend essentials

  • How to connect your Dittofi frontend to your Dittofi backend

What's up next?

At this point, you should feel relatively comfortable with the frontend, backed concepts and how Dittofi apps hang together. Now all you need is more practice! To help with this, we will continue on to , where we'll look at a full working example of how to build a Netflix style data streaming service on Dittofi together.

Part 4: Dittofi App Structure
GIF showing how data is passed around the Dittofi system