Web Applications Designer

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 interface.

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: [email protected] Password: appmaster