AppMaster.io
HomeStudioJobsSuggest Feature
  • What is AppMaster.io?
  • Getting Started
    • App Architecture
    • Quickstart
    • Best Practices
    • FAQ
  • Projects
    • Creating a Project
    • Project sharing
  • MODULES (INTEGRATIONS)
    • Modules
    • Setup
    • Modules List
      • Mobile applications
      • Authentication
        • Auth
        • Sign-in with Google
        • Sign-in with Facebook
        • Sign-in with LinkedIn
        • Sign-in with Apple
        • Google OAuth 2.0
      • Security & Data Validation
        • Crypto
        • Validators
        • IP Filter
      • Payments
        • Stripe
      • Maps & GIS
        • Universal Map
        • Cities and Countries
        • Google Maps
        • MapBox
      • Messengers
        • Telegram
        • Slack
        • Intercom Messenger
        • Discord
      • Video Conferencing & Webinars
        • Zoom API
      • Mailings, advertising
        • Intercom API
        • Google AdMob
        • SendPulse
        • GetResponse
        • Mail Chimp
        • SMS messaging
          • ClickSend
          • Telesign
          • MessageMedia
          • SMSto
          • Twilio
          • Nexmo
      • Email
        • Custom SMTP
          • Custom SMTP and Gmail
        • Gmail API
        • Email (SMTP Client)
      • Media files
        • Youtube Player
        • Image
      • Docs
        • Google Sheets
        • Google Drive
      • Date & Time
        • ICalendar
      • Data Storages
        • Amazon S3
        • OpenStack SWIFT
      • Language translators
        • Microsoft Translator
        • Google Translate
        • DeepL Translator
      • Special modules
        • Autodesk Partner API
      • File Archives
      • Google Indexing
      • Barcode Scanner
      • CloudConvert
  • Data Design
    • What are data models
    • Data Models Designer
      • Creating and modifying data models
      • Creating and modifying relations
      • System fields
    • Data types
    • Relation types
    • Auto-generation of data models
      • Virtual Data Models
      • Modules data models
      • List of generated models
        • Data Model User
        • Data Model User Session
  • Business Logic
    • Business Processes Editor
    • Best Practices for BP Separation
    • Blocks List
      • Logic
        • If-Else
        • For Each Loop
        • Loop
        • Break Loop
        • Switch
        • Set Variable
        • Raise Error
        • Comparison
        • Type Conversion
          • Date & Time to String: Format Guide
      • Functions
        • Math
          • Operators
          • Random Integer/Float
          • Round Up/Down
          • Mod
          • Is Even Number
          • Array Operations
        • String
          • Random String
          • Concat Strings
          • String Length
          • Has Substring
          • Hash
          • Is Valid Email
          • To Lower/Uppercase
          • Trim String
          • Replace String
          • Get Char at Position
          • Split String
          • Slice String
          • Validate String (Regex)
        • Boolean
          • Logic AND
          • Logic OR
          • Logic NOT
        • Array
          • Append Array
          • Prepend Array
          • Concat Array
          • Array Size
          • In Array
          • Random Element
          • Shuffle Array
          • Array Element
        • Date & Time
          • Make Date/Time/Date & Time/Time Span
          • Expand Date/Time/Date & Time/Time Span
          • Add/Subtract Time Span
          • Current Date & Time
          • Date & Time Difference
          • Delay
        • File
          • Get File
          • Create File
          • Read CSV File
          • Read XLSX File
          • Read XLS File
        • Miscellaneous
          • App Info
          • Write to Log
          • Get Request Header
          • Set Response Header
          • Get Request Body
      • Model Functions
        • Search
        • GetOne
        • Delete
        • Create
        • Patch
        • Update
        • Expand
        • Make
        • External API Requests Data Models
          • Make APIRequestName URL Params Model In
          • Make APIRequestName Body Model In
          • Make APIRequestName Headers Model In
          • Make APIRequestName Query Model In
          • Expand APIRequestName Headers Model Out
          • Expand APIRequestName Response Status Model Out
          • Expand APIRequestName Body Model Out
        • Virtual Data Models
          • Make Virtual Data Model
          • Expand Virtual Data Model
      • User-Created BPs
      • External API Requests
      • Variables
      • Models
      • Enums
      • Group Auth
        • Registration
        • Authentication
        • Authorization
        • Logout
        • Change Password
        • Restore Password
        • Add User to Group
        • Remove User from Group
        • Get Current User
        • Generate Auth Token
        • Hash Password
        • Probe Password
      • Group Crypto
      • Group Validators
        • Validate OGRNIP RU
        • Validate OGRN RU
        • Validate SNILS RU
        • Validate INN RU
        • Validate KPP RU
        • Validate BIK RU
        • Validate IIN KZ
        • Validate Bank Card Number (Luhn)
        • Validate KS RU
        • Validate RS RU
    • Global Variables
    • External API Requests
    • FAQ
  • Endpoints (API)
    • Endpoints Configuration
    • Middleware
      • Middleware: Token Auth
    • Access & Permissions
  • WEB APPS
    • Web Applications Designer
    • Working with Components
    • Signup and Login Forms
    • Workflow in web applications
    • Components list
      • Container
      • Button
      • Dropdown
      • Table
      • View
      • Tabs
      • Switch
      • Label
      • Image
      • Video
      • Chart
      • Form
      • Input (string)
      • Input (text)
      • Input (integer)
      • Input (float)
      • Input (email)
      • Input (password)
      • Input (phone)
      • RichText Editor
      • Time Span
      • Date Picker
      • Time picker
      • DateTime Picker
      • Select
      • Select (enum)
      • Relselect
  • MOBILE APPS
    • Mobile Applications Designer
    • Creating a Mobile App
    • Mobile Designer Interface
    • Working with Screens
    • Working with Widgets
    • Publishing a Mobile App
      • Testing in AppMaster.io Developer App
      • Publishing to Google Play
        • Create Google Developer Account
        • Create Firebase Project
        • Register Android App & Download Config File
        • Generate & Download Private Key
        • Generate APK/AAB File
        • Upload App for Testing
        • Set Up Google Play Store Listing
      • Publishing to App Store
        • Create Apple Developer Account
        • Create Apple Bundle ID
        • Create App in App Store Connect
        • Create App Store Connect API Key
        • Generate Build & Upload to TestFlight
        • Submit App to App Store
  • DEPLOYMENT
    • Deployments Configuration
    • AppMaster.io Cloud Services
    • Data Export
    • Logs
  • How-To
    • Import CSV/Excel File
    • Buttons Setup
    • User Interface Layout
Powered by GitBook
On this page

Was this helpful?

  1. WEB APPS

Web Applications Designer

PreviousAccess & PermissionsNextWorking with Components

Last updated 3 years ago

Was this helpful?

Web Application Designer is an AppMaster.io component, designated to create admin panels and single-page web applications (SPA). The main idea behind the Web Application Designer is to let you precisely design an admin panel or a customer-facing interface, client portal and more.

At the moment when you are adding new data models and saving schema, AppMaster.io automatically creates related Web Application Pages for you to minimize additional efforts. Every Web Application is a VueJS single-page application, generated by the AppMaster.io platform and published along with the backend binary.

A typical Web Application consists of several parts and plenty of components. You can drag new components from the upper panel to designated zones inside the application canvas. Also, you can sort existing components inside of the Web Application page, сhange component nesting and etc.

  1. There are several sections on the canvas where the components can be placed. The left drop section titled Main menu (orange) is designed to place new pages, that will form the main navigation menu of your web application. No other components except pages can be dropped into this drop section.

  2. Left drop section titled App components (green) is designed to place pages that will not be visible for users but still will be available for navigation and modal handlers. No other components except pages and modals can be dropped into this drop section.

  3. Upper and bottom sections are for header and footer and are visible regardless of the currently selected page. Good practice is to place components inside these sections to make them visible for users.

  4. Central section of the canvas is represented by page content and page components. It belongs to the currently selected page from the main menu. Relevant menu item has to be selected to see the page content.

  5. Page component section is dedicated to placing modal components only.

  6. App configuration section allows to configure authorization/registration parameters, creates business logic, global variables and set up triggers on app's events.

  7. Set of components you can use to design your web inteface.

Once all the required components are placed on the canvas - press Save button to save Web Application schema.

Default Credentials

Default credentials for Web Application authorization are: Login: admin@appmaster.io Password: appmaster