This section describes how to start with creating Appery.io projects and explains how to work with the UI components to customize your app appearance.
Appery.io App Builder Overview: Getting Started Video
Appery.io Education Video Guide
It's also a great idea to check out our YouTube Education Guide where you will learn how to create a stunning UI for your first mobile app, how to add the needed features to it, debug and test it, and much more…
To create a new app, click the Create new app button:
The modal window will open offering to select from the four tabs for creating a new app:
- jQuery Mobile
- From backup
This tab also shows your projects that have been previously published as project templates (you can check this link to learn more about exporting projects as templates.):
To create an app from a backup, switch to the From Backup tab and select the project backup file. You can only upload an Appery.io project (exported as a backup):
More information about managing project backups can be found here.
Enter the app name (for example, NewIonic5app), select the needed tab (for example, Ionic 5 Blank) and click Create:
A page is the basic building block of any app.
Every brand new app has two default pages (screens):
It is important to differentiate between these two types of the Page component for different pages types (check the Project view):
- IndexScreen for app pages (there can be only one app page in a project) and
- Page for Screen pages (numerous Screen pages can be created in a project).
Note as well that the number of screens is plan-dependent, so check our Pricing table to learn how many screens can be created under your plan.
Before you can start with building the page UI by adding components to it, you need to create the page (or use the default Screen1 page): so, click CREATE NEW > Page (or select the needed page from the Pages list in the Project view if you already have some page to edit):
This view allows the following operations:
- placing/editing/deleting components.
- using breadcrumbs for easy navigation between the parent/child components.
- changing layout (portrait or landscape) and scaling.
- selecting the screen size and view mode (MD or iOS).
To compact the items on the PALETTE (can be handy for working on a smaller monitor), you can click the button on top of it. To go back to the expanded mode, unclick this button:
All frame panels can be hidden, if you need to increase your working area for some purpose (just click the doubled arrow buttons: >>):
The components PALETTE is the main instrument for creating the page UI and is shown to the left of the visual App Builder canvas.
The PALETTE items are used to configure the app UI by dragging and dropping them to the frame and include the following groups of UI components all of which can be used for building the page UI:
- Appery.io components
- AngularJS and Ionic components
- HTML components (including HTML for writing custom code)
- Google Map component.
To start work, you need to locate the needed UI component on the PALETTE and add it to the page editor by using simple drag & drop:
After the UI component is added to the screen, you can see it on the Breadcrumbs on top of the working area. To customize the component, the PROPERTIES tab on the right and/or the context menu appearing in the upper right corner of the component can be used:
Properties & Styles Video Tutorial
You can check this Appery.io YouTube Education Guide video to learn how to modify UI components’ properties:
Using OUTLINE can be handy for defining the UI of the page where many components were added.
To show the OUTLINE panel with the elements tree, click the corresponding button in the bottom left corner of the working area and select the needed component. The component will also be shown in the Breadcrumbs chain on top and this particular component's properties will become accessible for editing on the PROPERTIES tab:
Besides, selecting and deleting components can be done by clicking on the component on the OUTLINE list (to expand/collapse the list sub-items, use the triangle icon next to the item name:
Another great option available under the OUTLINE view you can use to organize your UI elements on the screen is Drag-and-drop:
You will be warned if trying to do something that cannot be implemented for this particular component:
OUTLINE Video Tutorial
You can check this Appery.io YouTube Education Guide video to learn how to arrange components on the screen using the OUTLINE panel:
Appery.io provides a standard set of tools to copy, paste, clone (duplicate), and remove UI components. All of these actions can be easily accessed through the context menu.
To manage a component, you can select it using Breadcrumbs or opening the OUTLINE view (bottom left) and access the context menu by clicking the gear button:
Generally, the context menu consists of the Сlone, Сopy, Paste, and Delete options. However, several UI components (for example, Card or Grid) have more than one option available from the context menu. The green + button duplicated by an Add item option from the drop-down menu will add another nested item to such components. For example, it will add another item to the Card:
Depending on the situation certain options may be unavailable.
The cloning option can be useful and time-saving in creating a full clone of a UI component with all of the nested children, including other components. To apply it, select the component from the context menu and click Clone.
The component with the same properties appears right after the original component by default. For the most part, all UI components or their parts can be cloned, but the ability to be cloned depends on the component’s environment. Some components cannot clone their own parts, for example, you cannot clone a Button inside the Input Addon in an AngularJS project. In this instance, cloning will be unavailable for the Button component.
Most of the components of the PALETTE can be copied with all their properties and nested components by using the context menu for the selected components.
To use the copy-paste feature:
- Click Copy to deposit the selected component in local storage, (this also allows copying and pasting for different projects and sessions).
- Then select any container UI component. The component may be located on the same page or placed on the other one.
- Open the intended destination context menu and select Paste.
If the Paste option is disabled, the remembered component may not be contained within the currently selected one.
Components can also be hidden by clicking the icon located next to the Context Menu icon (the gear button):
The corresponding eye sign on the screen gets crossed indicating that the screen contains hidden components and, in the OUTLINE tab, the eye icon appears next to the hidden item (to unhide the item, click this icon):
Components can be copied and pasted via the Ctrl+C (⌘+C for Mac) and Ctrl+V (⌘+V for Mac) hotkeys as well. Some components (i.e. those not present in the PALETTE cannot be copied, as well as sub-components (e.g. Card Item, Grid Cell, etc.).
The previously copied component cannot be pasted into the currently selected one due to the following reasons:
- different project types (e.g. copying from an Ionic5 project and trying to paste into a JQM project)
- incompatible components (e.g. trying to paste a Grid component into the IndexScreen editor page
- nothing to paste (in this case, the Empty Clipboard message appears)
With Ctrl+V hotkeys (⌘+V for Mac), you can paste a component inside of the currently selected one, but also right after it. If the selected component is not a container or is incompatible with the component being pasted – the latter attempts to be pasted near the selected component (only if it is compatible with one’s parent).
Copying/pasting works for the active frame context only: clicking outside the DESIGN tab of the screen editor (for example, Toolbar or Project view) and applying special hotkeys will result in no action. Click within the Project pages: DESIGN, PROPERTIES, PALETTE panels, etc, to make the hotkeys work.
Every component has a set of properties some of which are general, others are specific to particular components. All properties that are available for a particular component can be accessed from the PROPERTIES view to the right of the working area:
PALETTE UI Components Properties
Most properties are provided with their corresponding ? tooltips: by hovering over them, you can get information on the property and how to use it:
Every Appery.io UI component has its properties; some are general, others are specific to particular components.
General properties belonging to most components available in the visual App Builder include:
|Property Name||Property Description|
|Component Name||The mandatory property used for identifying the component. When you drag and drop the component from the components PALETTE the Appery.io Visual App Builder gives it a standard name (e.g. GoogleMap1, Image1 , etc.). It’s beneficial to rename the components so that you could easily identify them.|
This property exists inside the Visual Editor only and does not have any reflection in an application.
|Color||Color to use from your application's color palette.|
Value types: primary, secondary, tertiary, success, warning, danger, light, medium, dark).
|Class||List classes here.|
|Visible||Determines whether the component is visible on the page.|
|Disabled||Every component on the page is enabled by default. You may need to disable components.|
If set to true, the user cannot interact with the component.
|Icon||Some components support icons. To choose the icon you need, expand Icon and click the No icon button for Style.|
|Attribute name||A new attribute value.|
|Mode||Determines which platform styles to use. Possible values are iOS or MD.|
|Slot||Position inside another component. It can be set to Fixed.|
Some components can have different settings: Start or End.
You can select and manage components using Breadcrumbs or the OUTLINE view.
Most Appery.io Ionic UI components feature subdivision into common properties and properties related to the particular components' styling and they can be found under PROPERTIES > Common/ Styles tabs respectively:
So, you are also free to customize your app appearance (and/or behavior) by defining the properties of the particular UI component(s) used in your app.
This can be easily done under the Common and/or Styles tabs of the PROPERTIES panel:
PROPERTIES Panel View Modes
Also, note that in the App Builder, you can make styling UI components even more comfortable and easily adjustable to different monitors' sizes: to do that, you are free to switch the PROPERTIES panel views between 2 Panels, 1 Column or Tabs modes:
Updated about 1 month ago