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
  • Step 1. Create our workflow
  • Step 2. Run add run endpoint event
  • Step 4. Set up a repeating group
  • Step 5. Set the workflow trigger
  • Step 6. Build your code and test it

Was this helpful?

  1. Learn Frontend
  2. Events
  3. External

Run Endpoint

PreviousHTTP RequestNextFlow Control

Last updated 2 years ago

Was this helpful?

The Run Endpoint Event is a frontend event that allows you to trigger an Endpoint on the backend of your Dittofi App, or an Endpoint that you've written outside of Dittofi. In this article we are going to show you how you can configure a workflow to run a run endpoint event that will get data out of the backend of your Dittofi App.

For the purpose of this article we will assume that you've already created:

  • A frontend app

  • A Data Model called "Books" that will store book titles

  • A "get books" endpoint on our Dittofi backend

  • A "get books" action that is linked to a "get books" endpoint

** NOTE TWO THINGS **

  1. If you want to POST data to an Endpoint, rather than GET data, read the tutorial Run Endpoint Event (POST).

  2. If you are not sure what is a Data Model, Endpoint or Action, please read .

Starting with our "Books" data model (as shown below) and our "get books" endpoint and action, our end goal is to set up our frontend so that every time we click on a button, we get the latest set of book titles that is shown inside our Dittofi "Books" data model as shown in the two screenshots below.

Books data model

Our goal is to be able to click on a button and get the books out of our Books data model and display it on the frontend of our app.

To achieve this we need to go through the following steps:

  • Step 1. Create a workflow

  • Step 2. Add a run endpoint event

  • Step 3. Add a frontend variable

  • Step 4. Set up a repeating group

  • Step 5. Set the workflow trigger

  • Step 6. Build your code and test it

Step 1. Create our workflow

Next, rename your workflow to "get Books" as shown below.

Step 2. Run add run endpoint event

Next, add the Run Endpoint event to your workflow and select your Get Books Endpoint, as shown below.

Next, we need to configure our workflow to accept data the Books data that is returned from our endpoint. To do this, we use the Response As and Response Code As input boxes as shown below.

The image below shows which input holds which data. You can type any name for your variables, but it is best practice to name them something that makes sense for your use case.

NOTE If you are running an endpoint that requires you to send data to your backend to either update, delete or create records inside your backend, the options here will be slightly different.

Next, we are going to add a second event to our workflow. This event will allow us to map the data that is inside our Response As variable that can be used inside the frontend of our app.

Next, if you return to the Workflow, you can add the "Set Field" event to your workflow, as shown below.

Next, we map the data that has returned from the endpoint into our page variable.

Finally we save and close our workflow.

Step 4. Set up a repeating group

Lastly, we need to set up a repeating group. To do this, add the following sets of elements to the page: first a Container, second a Div Block and finally an image inside the Div Block. Next add a Div Block to the original Container and put Heading and Paragraph elements inside the new Div Block.

You can see what the page structure should look like by looking at the screenshot of the navigation panel below.

Next, turn the Container into a Repeating Group and assign the contents of the repeating group to the Heading, Paragraph and Image elements. Take extra care with the image element.

Your final page will look something like the screenshot below.

Step 5. Set the workflow trigger

Next, we need to set up the get Books workflow that we made in Step 1. of this tutorial to trigger when the user clicks on the button. To do this, select the button element on your page and expand the workflows tab for this button as below.

Now, whenever this button is clicked, this is going to trigger the get Books Workflow which will run the following list of Frontend Events.

Where the Run endpoint event is hit, this will trigger our backend to go an retrieve data and this data will then be mapped into our Frontend Variables using the Set field event.

Step 6. Build your code and test it

To create a workflow, (1) go to the Dittofi page builder, (2) click on the lightening bolt icon in the top left of the screen and (3) click .

** IMPORTANT ** As mentioned in the introduction of this article we assume that you already have a Get Books endpoint and action set up. If you are not familiar with this terminology, please read the guides before continuing.

To create the variable (if not already done), you need to (1) exit your workflow, (2) open the variable panel by clicking on theicon in the top left of the screen, (3) click and (4) give your variable a name and a kind. The kind in our case is "Collection" since we are returning a list of books. You can see these steps in the GIF below.

If you have any issues displaying your image element, you should read the article

Next, click to attach our get Books Workflow to this button, as below.

To build your code click on . Once the code has built, click and test out your get Books Workflow by clicking on the button, as below.

🟨
🟨
Dittofi Essentials
Why does my image not display?
Dittofi Essentials