App Builder is the main development tool where the app UI is created and backend services are integrated. Our visual App Builder uses Ace editor for its code editor.
This document introduces all the functions of the Appery.io App Builder and provides detailed information about how to start working with it.
Appery.io Visual App Builder Overview: Getting Started Video
You can also check this video for instructions on how to get started developing with the Appery.io visual App Builder:
When you create a new or open an existing project in the Appery.io App Builder, the default Start page opens:
This page consists of three main parts: Toolbar (top), Project view (to the left), and Project tabs (those will be the pages created for this project).
The App Builder Toolbar has the following buttons:
- CLOSE – click to close the project and open the Apps tab. If you have made any changes to the project, you will be asked whether the changes should be saved.
- SAVE – click to save the project. Don’t forget to click this when you edit the project.
- EXPORT – click to select the file type you need for exporting the project to another platform or package it as a private plug-in or enable auto update:
- TEST – click the button to test the app in a desktop web browser. If you want to edit testing settings, click the arrow icon:
Check Public if you want to share the app link with other people, and copy the link. You can also scan the QR-code.
The links located to the right of the Toolbar redirect to the following platform backend tabs:
Database – click to open the Databases dashboard in a new window. You can work with your databases without closing the project.
Push – click to open the Push Notifications settings in a new window. You can work with your push notification services without closing the project.
Server Code – click to open the Server Code tab in a new window. You can work with your server scripts without closing the project.
API Express – click to open the API Express tab in a new window. You can work with your API Express projects and connections without closing the project.
Active users icon – click to see who is working with the project at the moment:
Notifications icon – view notifications about the other users working with the project or informs about other system events:
To open the visual editor environment settings, click the three lines button and select Settings. There are the color schemes settings on the All apps tab:
But if you switch to the App tab, you can activate or deactivate confirmations for several actions or change the Code Editor settings for the current application:
- Enable code folding allows you to truncate the code blocks by clicking the small arrow icon to the right of the line numbers.
- Enable validation hints shows warning or error icons to the right of the specific line number.
- Enable highlighting matched selections searches for the matching text and highlights it via a blue wavy line.
The Project view has the CREATE NEW button and two tabs: Project and Source:
The Project tab includes the menu of the main parts of the project. Its tab menu can consist of the following items:
- Project– here you can find the App settings, Model and Storage, and Routing. Click the needed line to open a new tab:
Pages(Screens) – any project must have some pages, even if you have just created a new project. While building an app, you may create new pages, which appear on the list in alphabetical order.
Theme – the folder with custom color themes.
Services– it is almost impossible to create an app without using services. All the services you create appear on this list. You can rename, duplicate and delete any service on the list.
Custom components – you can edit any of the custom components via this list. You can rename and remove any custom component.
App pages, services, scripts, etc. can be created by clicking CREATE NEW and then selecting what project item or even out-of-the-box example app (if you click From Plugin) needs to be created:
All the items on the Project tab menu can be selected for more customization.
The triangle sign before the menu item shows that the item has a list of objects. Click the icon or the menu line to open the list.
When you hover the mouse over the item, two more icons become available:
The cog icon that appears for a menu item shows that the item can be renamed, deleted, duplicated, or moved. Click the icon to perform a needed action.
The X sign that appears for a menu item shows that the item can be deleted. Click the icon to delete the item.
Click on the Source tab will open the Source view that will allow you to access the source code of your app. You can see the folders that contain platform-specific resources:
IONIC. By editing these resources, you can influence the results of code generation.
Hover the mouse over the needed item (file or folder) and click the cog icon to perform a needed action.
In the Source view, you can:
- Work with source files:
- Rename – click the cog icon and select Rename.
- Duplicate – click the cog icon and select Duplicate.
- Move – click the cog icon and select Move; in the pop-up, select the folder where the file should be moved and click OK.
- Delete – click the cog icon, select Delete, and confirm the action.
- Work with source folders:
- Refresh root folders – click the cog icon and select Refresh to update the source tree.
- Undo changes – click the cog icon and select Undo all source changes to restore changed or deleted generated files and folders. You can only restore generated files, not custom files; after saving the project, all changed files become custom.
- Rename subdirectories.
- Move subdirectories.
- Create files or folders – click the cog icon, select Create file or Create folder, and in the pop-up, enter the new resource name.
- Search files – click the cog icon, select Search source, and in the pop-up, start typing the source name:
- Upload files and zip archives – in the folder line, click the cog icon, select Upload to this folder and select files to be uploaded; if you choose a zip bundle when uploading, it is unzipped and all folders and files are added to the folder:
- Delete subdirectories.
- Select all or only changed files in the root folder – click the cog icon and select Show only changed sources or Show all.
After saving the project, the changes you made to the source files appear when testing on the browser desktop, but they do not appear in the visual builder. Similarly, all changes made in the visual builder do not appear in the changed source files and they will not be seen during testing. You cannot make any changes in the visual builder after you have edited the source code, hence, all the necessary changes in the code should be made at the end of the UI design.
Learn more about source editing and check for more samples of managing Source files and folders via this link.
When you create a new project, the Start page opens. This page includes information about the most recent videos, latest enhancements to Appery.io, steps for building apps, and links to the different sections of Appery.io references.
As you open any page, service, file, etc. from the Project view, new tabs open:
The tabs with code (SCSS, TypeScript, Source code, etc.) typically have:
- The cog icon – opens visual editor environment settings;
- The Auto format code button – use it to make your code more readable;
- The Screen mode button – switch to full-screen mode and back:
When you work with a big project with a large number of pages or services, or when you work with project sources and have a lot of opened tabs, you can close all open tabs in one click by using the Close all Tabs option. It is located in the upper-right corner of the editor toolbar:
The high-level architecture of the Project view > Pages tabsincludes five panels: DESIGN (to build the UI), DATA (to add services), CODE (to add functions and variables), MODULE (to work with app imports), and SCSS (to apply SCSS styles to the app):
They are all used to change the behavior or the appearance of the selected page.
The DESIGN panel has the following tabs:
- Components PALETTE – to drag and drop the components to build the UI. Read more about components here.
- PROPERTIES panel – to edit properties of the page or component.
- EVENTS tab – to add and edit events to the page or component. Read about events here.
- MOBILE FRAME (the image of your device in the middle)– to see how it looks on your device while you’re building the UI.
The PALETTE tab allows access to the PALETTE items which are different UI components that can be dragged and dropped to the frame to configure the app UI. To make more room for the MOBILE FRAME, you can hide the components PALETTE by clicking the PALETTE tab.
Clicking on the OUTLINE button opens the components tree view where all the added components can be viewed and/or edited:
You can read more about how to work with UI components on the DESIGN panel via this link.
Then, select the needed action from the drop-down:
After the event is added to the page it gets listed and can be edited or deleted - just select the corresponding button. If you do not want to lose sight of the EVENTS tab but need more working area, you can adjust its height:
Want to know more?
Read more about how to work with events and actions via this link.
The DATA panel is used to create and define app services and allows selecting from REST, Generic, and Settings (REST settings):
After the data source is created, you get access to defining the events in a way similar to how it is done from under the DESIGN panel.
To define the event(s) and/or action(s) for a service, first, unfold the EVENTS tab from the bottom of the panel and define the action for this event:
The CODE panel is used to add and define app includes, variables, and functions:
There are three corresponding tabs (Includes, Variables, Functions) where all of these can be defined but it is a good practice to use the Split tab to take control of all of them in one place.
Unlike storage variables, the variables created for a specific page under its CODE > Variables tab can be used for this specific page only.
If the page has many items, it can also be handy to switch from Stack to the Side view (the upper right corner of the editor): this way, you will not need to scroll the page down to see all available elements.
When working with functions, you can define them by using our out-of-the-box snippets:
Want to know more?
You can also check this tutorial for the example of how to work in the CODE panel.
The MODULE panel is where native APIs from Ionic can be defined to allow simple integrations with adding native device functionality:
Note that the Extra Code section editor is equipped with the cog icon that opens the code editor color schemes settings and the Auto format code button used for making code more readable:
Want to know more?
The SCSS panel is the style code editor that is also equipped with the cog icon that opens the code editor color schemes settings and the Auto format code button:
You can also check this tutorial to learn how to add code to the SCSS panel to apply styles to your app.
Updated 3 days ago