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
  • An introduction to the Dittofi Design Studio
  • Dittofi's enterprise grade app hosting
  • How to make edits to your app
  • Shortcut Keys

Was this helpful?

  1. Learn Frontend
  2. Getting Started

Intro to the Dittofi Design Studio (Frontend)

Learn your way around the Dittofi Design Studio.

PreviousWelcome to DittofiNextPages

Last updated 2 years ago

Was this helpful?

In this lesson, we will give you:

  1. An introduction to the Dittofi Design Studio

  2. Dittofi’s enterprise app hosting

  3. How to make edits to your app

An introduction to the Dittofi Design Studio

This is the Dittofi Design Studio.

The Dittofi Design Studio is a visual app builder.

The Studio is split up into five main tabs that are listed down the left hand side of the page. These tabs are designed to help you build custom, high quality apps. There is:

  • Page builder. The page builder tab is for the development of your apps user interface.

  • Data tables. The data tables tab is for building and managing a data store for your app.

  • Backend actions. The backend actions tab is for building your apps backend logic and functionality.

  • Custom data models. The custom models tab is for building custom data structures that are used in your app development.

  • Web Services. The web services tab is for developing integrations into third party APIs.

We also have several more tools under the wrench icon at the bottom of the page. This include things like:

  • Modules. Modules are used to extended functionality in one click.

  • Global variables. Global variables are used for managing global settings for your app.

  • Templates. Templates are where you can access and edit your app's source code.

Dittofi's enterprise grade app hosting

As well as being a visual app builder, Dittofi is also an app hosting platform.

To see and test your app running in our hosting environment, click the build code button at the top of the page. This button transforms the visual design of your app into code and deploys it directly into Dittofi’s enterprise hosting environment.

Once your app's code has been generated, you can click on the preview button here to see your app running in Dittofi hosting.

In Dittofi you can build multiple versions of your app. For example, you can create a development version, where you edit and test your app without impacting your live users.

You can also create a production version of your app which is segregated from your test version.

How to make edits to your app

Whenever you make a change to your app, Dittofi will automatically save these changes.

You can then click this build code button to update your app’s code and deploy these changes into your live app hosting environment.

Then, if you go over to your live app, you can click the refresh button, you will see all of the latest changes to your app live.

You now know:

  1. What the Dittofi Design Studio is

  2. How to deploy your app

  3. How to make edits to your app

In the next lesson we are going to learn about pages and how these can be used to design a user interface for your app.

Shortcut Keys

Dittofi gives you the option to use shortcut keys to super charge your app development. The shortcut keys mimic as closely as possible the design tools that you're most familiar with.

Ctrl+C

Command+C

Copies the selected element to your clipboard

Ctrl+V

Command+V

Pastes the element in your clipboard as the last element in of the selected target element.

Ctrl+X

Command+X

Cuts the selected element & stores it in your clipboard

Ctrl+Z

Command+Z

Undoes the last action on the canvas

Ctrl+Y

Command+Y

Re-does the last action on the canvas

Escape

Escape

Deselects all of the existing elements

Ctrl+S

Command+S

Saves the state of the applications canvas

👨‍💻