1. Creating App UI - PALETTE

Learn how to create a new project and gives an overview of the Ionic 5 UI components PALETTE

Introduction

The first step in building an app is always creating a new project with some pages that have the desired UI. This is done in the Appery.io visual App Builder.

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

You can also check this video for instructions on how to get started developing with the Appery.io visual App Builder:

πŸ‘

Appery.io Educational Video Guide

It's also a great idea to check out our Educational Video 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…

15921592

Creating New App

To create a new app, click the Create new app button:

309309

The modal window will open offering to select from the four tabs for creating a new app:

  • Ionic 5
  • jQuery Mobile
  • Templates
  • From backup

The first two tabs offer the selection between two popular frameworks that are currently supported by Appery.io.

A great way to start using Appery.io is to create your own app by using one of our ready-to-go customizable templates. You can learn more about Appery.io Templates here:

10281028

πŸ‘

The Appery.io team regularly releases new templates. To review the available templates, from under the Appery.io platform Apps tab, click Create new app and select the Templates tab.

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.):

10311031

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):

10301030

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:

10361036

Every new Ionic 5 app created with in the App Builder comes with our educational video guide page as a start page:

16021602

App Pages (Screens)

A page is the basic building block of any app.
Every brand new app has two default pages (screens):

246246

πŸ‘

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.

Please check this document for more details on how to work with screens (pages) and tabs available in the visual App Builder.

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):

15921592

By default, the page will be opened in the DESIGN panel with the image of your device in the middle (MOBILE FRAME), the components PALETTE to the left of it, and the PROPERTIES tab to the right:

13401340

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:

13441344

πŸ“˜

Note!

All frame panels can be hidden, if you need to increase your working area for some purpose (just click the doubled arrow buttons: >>):

13481348

UI Components PALETTE Overview

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 5 components
  • HTML components (including HTML for writing custom code)
  • Google Map component.
15991599

Adding Components

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:

12871287

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:

12951295

OUTLINE View

Using OUTLINE can be handy for defining the UI of the page where many components were added.
To show the OUTLINE tab 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:

12951295

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:

12951295

Another great option available under the OUTLINE view you can use to organize your UI elements on the screen is Drag&Drop:

378378

πŸ“˜

Tip!

You will be warned if trying to do something that cannot be implemented for this particular component:

206206

Context Menu Overview

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:

12971297

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:

909909

🚧

Depending on the situation certain options may be unavailable.

Cloning Components

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.

Copying and Pasting Components

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:

  1. Click Copy to deposit the selected component in local storage, (this also allows copying and pasting for different projects and sessions).
  2. Then select any container UI component. The component may be located on the same page or placed on the other one.
  3. 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.

Hiding Components

Components can also be hidden by clicking the icon located next to the Context Menu icon (the gear button):

991991

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):

990990

Copy-Paste Hotkeys

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.

PROPERTIES Overview

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:

13541354

πŸ‘

PALETTE UI Components Properties

Here is the detailed description of the properties that can be defined for specific PALETTE UI components can be found.

πŸ“˜

Most properties are provided with their corresponding ? tooltips: by hovering over them, you can get information on the property and how to use it:

306306

General Components Properties

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.

Detailed (Common and Styles) Components Properties

πŸ‘

To check for the properties of a particular UI component, please see the documentation for the corresponding component; for example, the details of the Chart component can be found here.

Most Appery.io Ionic 5 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:

13551355

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:

13501350

πŸ‘

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:

411411

2 Panels Mode

310310

1 Column Mode

345345

Tabs Mode


Did this page help you?