Introduction to App Builder - Build Without Coding
We know you can't wait to start building your web application, but before you dive into it, first understand the anatomy of the builder and the building tools it offers to construct your web application.
We promise to elaborate everything for your better understanding.
The Builder
By clicking the Configure Project icon, you will be redirected to the App Builder Console. Don't get confused by various components and buttons on the App Builder Console screen. We will be covering each component and every button in detail in the upcoming sections.
Once you enter the builder, you can start creating your first No Coding App. But before building anything, let's first understand the anatomy of the builder, so you can easily navigate through it to give your vision a concrete shape. The builder consists of:
1. The Canvas
The large white space you see after landing on the builder is your canvas, which will be your workspace. You can drag and drop any element and features into the canvas and adjust it according to your wish to give your vision a concrete shape.
Your canvas is like a lego baseplate where you assemble each piece and place it according to your preference to construct something new.
2. Left Toolbar
The left toolbar provides different construction tools and building blocks to lay the structure and functioning of your web app. It is located on the left side of the canvas as marked in the image below:
The left toolbar consists of:
Click on each panel to know their purpose and function in detail.
3. Bottom Bar
Just below the left toolbar is your bottom bar. It contains the following:
* Project
Takes you to the dashboard and project settings.
* Settings
Contains app settings, email templates, data sources and external APIs.
* Tutorial
Takes you to the tutorial section.
* Help
Contains everything that you might need to get your problems solved.
4. View Bar
Right above the Left Toolbar is the view bar to adjust the view and orientation of your canvas to see how the web app will appear and look on the user's screen on different devices. You can view the canvas in the following modes:
- Desktop
- Tablet
- Mobile
- Mobile Portrait
5. Top Bar
Above the canvas on the right side is the Right Top Bar. It provides a set of tools to save the additions made in the canvas and to clear the canvas blank.
Moving from left to right hand side, you get the following tools:
: Showcases your web application in a separate tab window to see how your website will appear to the end user after publishing.
: Allows you to publish or push your web application and changes made in it to the end user.
: Allows you to look at the HTML and CSS code of the components you have added.
: Allows you to undo or reverse an action performed by you in the builder.
: Allows you to redo an erased or revered action performed by you in the builder.
: Allows you to save the additions and the changes you've made while building your web app.
: Indicates the unsaved changes and additions you have made in your canvas.
: Gives a blank canvas by clearing or deleting all the additions you've made so far.
6. Right Toolbar
Beside the Right Top Bar is the Right Toolbar which contains following icons:
This icon opens the Style Manager which contains different tools to style a component and content in it.
This icon opens the settings of a component selected in the canvas.
This icon opens the Layer Manager which gives you a direct view of all the layers of components and sub-components you have added in the body of your canvas.
