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 an HTML template
  • Step 2. create a render web template endpoint
  • Step 3. create a render web template action
  • Step 4. add a create a web template event
  • Step 5. build and test
  • (Optional) add variable information

Was this helpful?

  1. Learn Backend
  2. Events
  3. Other

Render Web Template Event

PreviousRedirect Web Page EventNextVariables

Last updated 3 years ago

Was this helpful?

Dittofi lets you take an existing or new HTML template and copy and paste that template into your app. You can then use this template and populate it with variable data that you include within your data models. For example, you might have a table of products and want to use an existing HTML design.

To do this, you can use the render web template event. This can be set up in 5 quick and easy steps.

  1. Step 1. create an HTML template

  2. Step 2. create a render web template endpoint

  3. Step 3. create a render web template action

  4. Step 4. add a create a render web template event

  5. Step 5. build and test

Step 1. create an HTML template

Go to the templates tab inside the Dittofi Design Studio. This can be found under the wrench icon in the Dittofi Design Studio.

Inside here, you can create a new HTML template in the folder Backend > Views. Below we show a new template called "My First HTML Template".

The test HTML is below.

// Test HTML for template
<h1>Hello world!</h1>

Step 2. create a render web template endpoint

Go to the endpoints tab and create a new endpoint by clicking the + New Endpoint button. Next, give your endpoint the name "Render web template", the path "/v1/render_web_template", the description "Endpoint to render my HTML template", set the request method to GET and the response Content Type: text/html. The screenshot below shows this.

Step 3. create a render web template action

Head over to the actions tab and create a new action by clicking the "+ New Action" button. Give the action the name "Render web template" and make the trigger component and endpoint and link the trigger endpoint to the "Render web template endpoint" that we made in step 2.

Step 4. add a create a web template event

Next click the + Add Event button and add the Render web template event. Give the event the description "Render 'My first HTML template'" and choose the template that we created in Step 1.

Lastly, save the event and close the action.

Step 5. build and test

The final step is to build the code and test it. To build the code click the "Build code" button. Once the code has finished building, open the "Render web template endpoint" that we made in Step 2. and run the endpoint.

To validate that this has worked correctly, you can take the URL of the endpoint and copy and paste this into a new tab in your browser, as shown below.

Note, in technical terms the render web template event is used to do server side rendering of a templated HTML.

(Optional) add variable information

The render web template event can also be used to render variable data that you might have in your Dittofi backend. For example, a list of data stored in one of your data models e.g. blogs, user names etc.

To declare a variable you need to add curly braces like the example below.

// Adding an example of an email with a variable
<h1>Hello {{.Name}}, welcome to my hello world template!</h1>

In the above template example, the "Name" variable can be populated by data inside the Render Web Template event that we added in Step 4. The GIF below shows how to do this. Note that the variable name needs to match the variable name.

Note supports all go template syntax (loops, if statements etc.). For more information on this, read the go docs here .

🟥
🟦
https://pkg.go.dev/text/template