Creating App UI: PALETTE

Overview of the components PALETTE

Introduction

The first step in building an app is usually creating its pages with the desired UI. This is done in the Appery.io visual App Builder.

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:

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:

📘

Note

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

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

Adding Components

To start work, you need to locate the needed UI component on the PALETTE and add it to the App Builder 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:

OUTLINE View

Clicking on the OUTLINE tab opens the components tree view where all the added components can be viewed and/or edited. 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. It will be also shown in the Breadcrumbs 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:

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 tab (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.

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

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:

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

Here is the description of the properties that can be defined for most PALETTE components.
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 properties are provided with their corresponding ? tooltips: by hovering over them, you can get information on the property and how to use it.

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

Class

List classes here.

Color

Color to use from your application's color palette.
Value types: primary, secondary, tertiary, success, warning, danger, light, medium, dark).

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

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.