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.
There are two canvas zones, where application-level components can be placed. The left drop zone 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 zone.
The left drop zone 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 zone.
Upper and bottom zones - header and footer are visible regardless of the currently selected page. It's a good idea to place there components that should be visible to users all the time.
The central zone of the canvas is represented by page content and page components. These zones belong to the currently selected page from the main menu. Frankly speaking, just click on the page to see its content in the central zone of the canvas. The currently selected page is highlighted with a light blue color. The Page component zone is dedicated to placing modal components only.
Once you placed all required components on the canvas press Save button to save Web Application schema.