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
  • Setting up a PUT Endpoint
  • Linking our PUT Endpoint to an action

Was this helpful?

  1. Learn Backend
  2. Events
  3. Database Requests

Update

PreviousRead EventNextExternal

Last updated 2 years ago

Was this helpful?

The update event allows you to update or edit data in one of your data models. The update event is used in most software applications, for example, in social media platforms such as Facebook or Linkedin, users are able to edit posts. Most platforms also include a "system settings" page where users can edit their usernames, passwords, email address etc.

Whenever you want to give your users the ability to edit something, you will need to use the update endpoint, action & event.

In this tutorial we cover:

  • Setting up a UPDATE endpoint

  • Linking our UPDATE endpoint to an action

  • Updating multiple records in our data model

For the purpose of this example, we will use a data model that holds different social media posts for different users.

Our goal is to set up a PUT Endpoint that allows our users to update data records in our data model whenever the endpoint is triggered.

There are two ways to do this, we can either:

  1. Build the endpoint, action & event from scratch.

In this article we will cover how to build the endpoint, action & event from scratch.

Setting up a PUT Endpoint

In this section we are going to create a PUT Endpoint manually to update a single record in our Posts Data Model. To do this, head on over to the endpoints tab & press the "+ New Endpoint" button to create a new endpoint.

Next, we fill in the basic details for our endpoint as below.

Note, our Path parameter has the extension {id}. This is going to be used to identify which record in our Posts Data Model we are going to update.

The id is what is called a "Path Variable". Essentially, the part of our URL that is in curly braces is just a placeholder for a dynamic, or variable value.

Ditto Tip: the reason that we use the id is twofold. First, the id field is automatically added by Dittofi to every row of data inside your data model. Second, the Id value is auto incrementing and therefore is a unique identifier for all rows in your Data Model.

The value of the placeholder or variable "id" can be set inside the Path Variables section of our endpoint.

Note that the in the variable settings, we pick the Kind, Number and give the same name and label as the value inside the curly braces in our Endpoint Path, "id", as below.

The reason we pick the Kind Number is that the id is a number field in our Posts Data Model. The name of our Path Variable also needs to match both in spelling and capitalization of the id inside the curly braces of our Endpoint Path.

Next, we need configure our endpoint to receive data that we want to update inside our Posts Data Model. For example, let's suppose we want to allow the user to edit their Post Caption.

To do this, we can use the Body Variable option in the following way.

Notice, the Kind we are using here is Model. This configures our endpoint to receive data for every field in our Posts Data Model. If we want to configure our endpoint to receive only the data for one field in our Data Model, we would need to use a Custom Model.

The last step is to save and close our endpoint.

Linking our PUT Endpoint to an action

Next, we need to link our Update social media posts endpoint to an action. To do this, we start by heading over to the actions tab & pressing "+ New Action".

Next we give our action a name, call it "Update social media post".

Next, we link our Update Social Media Post action to our endpoint.

Next, we need to look up the record in the Posts Data Model (the social media post) that we want to update. To do this, we begin by adding a variable of Kind Model to our action called "PostToUpdate". The model we use is our Social Media Posts Model.

Our variable is going to store just one record, so we need to add a custom filter. To do this, use the Where clause in the "New Variables" browser, as below.

Notice, that we filter according to the id that is passed into our Update Social Media Posts Action. This value, as we saw in the previous section is variable.

Next we add an Update Event to our actions and events graph by clicking on the "+ Add Event" button.

Using the panel on the right hand side of the screen, we can then choose our event type and configure our event. The table below describes what each of the configuration options does.

Configuration Option
Description
Example

Action Type

Describes the type of event that you want to use.

Update

Description

Type in a description of the event

Update the Post Caption for a single social media posts record identified by "id".

Type

Model

Object

This is the record that you're looking to update. This was filtered for by id.

PostToUpdate Model taken from your Action.

Assign

Choose which fields you want to assign which values from your data model.

PostDataToUpdate.PostCaption

This value is taken from the body variable passed to your Action by your Endpoint.

Variables

This option allows you to declare a new variable inside your event. This variable will be available inside your event and for all subsequent events.

In our example this is not needed, however you could for example create a static text expressed.

The final configuration for our event looks like the screenshot below.

Testing Our PUT Endpoint, Action & Event

To test our PUT Endpoint, Action & Event, we need to (A) generate the code, (B) test our endpoint from within the endpoints tab by adding in some dummy data, (C) check our endpoint response code & (D) look at our Posts Data Model to see if the record have been updated. The video below shows this process in action.

Use the API Generator, see , OR

🟥
🟦
API Generator
Social media posts data model "Posts"
Basic PUT Endpoint Details
The "id" Path Variable
Path Variable Popup
Adding a Endpoint Body Variable
Body Variable Configuration
Linking Update Social Media Posts Endpoint
Adding a new event