Components Palette Overview

The components PALETTE is shown to the left of the screen, and includes the following mobile UI components:

Actions with components

Appery.io provides a standard set of tools to copy, paste, clone (duplicate) and remove UI components. All of those actions can be accessed trough the context menu.

Context menu

To add a UI component to your app, locate it on the PALETTE and then drag and drop it to the editor page.

To manipulate it, select the component 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 one more option available from the context menu: + button duplicated by an Add item option on the drop-down, that will add another nested item to the component. For example, it will add another cell to the Grid:

Depending on the situation, some options can also be unavailable.

To delete a component, you can select it using breadcrumbs or OUTLINE view and click Delete.

Cloning components

Cloning existing UI components can be useful and time-saving. A full clone of a UI component with all nested children, including other components will be created. To apply this feature, select the component and, from the menu, click Clone.

Copying and pasting components

Most of the PALETTE components can be copied with all their properties and nested components by using the context menu for the selected component.

To use the copy-paste feature:

1. Click Copy to deposit the selected component in Local storage (which allows copy-pasting for different projects and sessions).
2. Then select any container UI component. The component may be located within the same page or on the other one, it may even be a part of another project of the similar type.
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.

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 for one of the following reasons:

• different project types (e.g. copying from Ionic project and trying to paste into Bootstrap project)
• incompatible components (e.g. trying to paste a Textarea component into Header Controls in Ionic index screen, which accepts only Buttons and Inputs)
• nothing to paste (in this case, the Empty Clipboard message appears)

With Ctrl+V hotkeys (⌘+V for Mac), you can paste a component not only 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, Tool bar or Project view) and applying special hotkeys will result in nothing. Click within the Project tabs: DESIGN, PROPERTIES, PALETTE panels, etc, to make the hotkeys work.

General components properties

Every component contains properties; some are general, others are unique for each component. General properties belonging to most components include:

• Class – set classes here.
• 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 the standard name (e.g. GoogleMap1, Image1 etc.). It’s beneficial to rename the components so you can easily identify them.
• Hidden – every component on the page is visible by default. You may need to hide components. This can be set up for different screen sizes.
• Icon – some components support icons. To choose the icon you want, expand Icon and click No icon right to the Style:
  

• Attribute name – a new attribute value.

All complex and not obvious properties are provided with tooltips: by hovering over them, you can get information on the property and how to use it:

Autocomplete

The intelligent autocomplete mechanism is available for all editable properties in the PROPERTIES panel, with the exception of combo-boxes (they already have predefined set of values).

To access the autocompletion window, in DESIGN view, select a UI component you need and, on the PROPERTIES panel, focus on an editable property. Press Ctrl+Space or simply start typing to invoke the drop-down with the list of available variables and functions with their types.

Code assist will suggest some scope variables and functions matching the entered part:

Now you can navigate among the alternatives using the up and down buttons. To apply the selected value, press Enter or Tab, or click on it with the mouse.

The autocompletion feature is available for custom attribute names. It suggests all known angular directive names, including custom directives:

The autocompletion drop-down is shown after typing the opening double-braces in the properties that accept that binding:

This feature demonstrates intellectual behavior: assume we have a scope variable people with type arr described by the following model:

Having added ng-repeat = person in people to a List item and trying to use person variable in other properties inside of this component, you will see the variable recognized by code assist with the suggested sub-properties.

Accordion

The Accordion component is a list of items, with collapsible bodies that are collapsed or expanded by clicking on the item’s header.

The Accordion component has the following properties:

• closeOthers – determines if expanding an item causes the other items to close.

The Accordion item has the following properties:

• Disabled – determines whether an item can be opened/closed.
• Opened – determines whether an item is opened by default.
• Text – an accordion item text.

The Accordion Item Header has the following property:

• Text – a header text.

Visit the AngularJS documentation page to read more about Accordion.

Alert

The Alert component provides contextual feedback messages for typical user actions.

The Alert component has the following properties:

• Icon:
  • Color – an icon color.
  • Position – left, right.
  • Style – Glyph icons.
• Text – an alert text.
• Type – success, info, warning, danger.
• close – determines if a close button is displayed.
• ng-if – condition for displaying.

Using Alert

You can find an example of using Alert in the Angular-UI documentation: http://angular-ui.github.io/bootstrap/#/alert

They use an array of alerts, a special method for closing an alert. In general, it is also doable within the Appery.io editor. You can use AngularJS directives to control an alert.

To use a single Alert, not as described in the Angular-UI, you can do the following:

1) Add Alert to the screen. Set property ng-if = showAlert1.
2) Open the SCOPE tab and create a new variable showAlert1, Type = Boolean.
3) In init() method, initialize this variable: $scope.showAlert = True.
4) Create a new method closeAlert() that changes this variable to False while clicking on the x button in Alert.
5) Set property close = closeAlert(). It will be invoked while clicking on the x button in Alert.

Visit the AngularJS documentation for the complete Alert component API.

Button

The Button component is one of the most commonly used. It can navigate to a page or link, copy a property to a local storage variable or set the other component’s property, open and close popups, invoke a service, or run JavaScript.

The Button component has the following properties:

• Block – determines if a button is stretched to screen width.
• Icon:
  • Color – an icon color.
  • Position – left, right.
  • Style – Glyph icons.
• Size – extra small, small, default, large.
• Submit button – determines if this is a button to send form data to server.
• Text – a button text.
• Type – default, primary, success, info, warning, danger, link.
• ng-click – an action that happens when you click the button.

Button Group

The Button Group component includes several buttons together on a single line.

The Button Group component has the following properties:

• Block – determines if a button group is stretched to screen width.
• Orientation – horizontal, vertical.
• Size – extra small, small, default, large.

Visit the Bootstrap documentation to read more about Button Group.

Checkbox

The Checkbox component is an option that may be checked.

The Checkbox component has the following properties:

• Block – determines if a checkbox is stretched to screen width.
• Checked – determines if a checkbox is checked by default.
• Text – a checkbox text.
• Value – a checkbox value.
• ng-model – binds a checkbox to a property on the scope.

Visit the Bootstrap documentation to read more about Checkbox.

Collapse

The Collapse component is a combination of a Toggle block Button and Text components that makes it easy to hide and show an element with a CSS transition.

The Collapse Button has the following properties:

• Block – determines if a checkbox is stretched to screen width.
• Icon:
  • Color – an icon color.
  • Position – left, right.
  • Style – Glyph icons.
• Size – extra small, small, default, large.
• Submit Button – determines if this is a button to send form data to server.
• Text – a button text.
• Type – default, primary, success, info, warning, danger, link.
• ng-click – an action that happens when you click the button.

The Collapse Button is set to hide/show the Collapse Text block by default.

If you prefer to enable toggling by using some other component (for example, Checkbox), you must pass the hideCollapse1 variable to the component’s attribute (ng-model = hideCollapse1).

The Collapse Text is the collapsible container where you can add components you need.

The Collapse Text component has the following properties:

• Container – a content type (span, label, p, h1-h6).
• Text – a text content.

You may use several independent Collapse components in your app.

Collapse requires the transitions plugin to be included in your version of Bootstrap.

Dropdown

The Dropdown component is a group of options.

The Dropdown component has the following properties:

• Icon:
  • Color – an icon color.
  • Position – left, right.
  • Style – Glyph icons.
• Menu Opened – opens a menu (works in the Appery.io Visual Builder only and doesn’t affect the preview).
• Menu Up – makes menu toggled from the bottom up instead of top down and flips the arrow direction.
• Size – extra small, small, default, large.
• Splitted – splits a dropdown text and the arrow.
• Text – a dropdown text.
• Type – default, primary, success, info, warning, danger, link.

The Dropdownitem has the following properties:

• Header – determines if this is a header.
• Label – an option text.

To toggle Dropdownitems on visual editor, you should change Menu opened property to true or double click on the component.

Custom Bootstrap widget events

The Dropdown component has the following widget events:

Here is an example:

Google Map

The Google Map component allows you to embed Google Maps into your app page. Google Map is a complex component, containing 5 main components (called directives): Google Map itself, Marker, Markers, Window and Windows.

Each directive in Appery.io contains necessary and unnecessary (only the most commonly used) properties. The latter are added as custom attributes by default and may be deleted. You can add any other properties that are present in Angular-UI documentation and absent in component defaults.

A short description of each directive with their required properties is provided next. To learn more about them, check the AngularJS UI documentation.

This tutorial will show you how to use the Google Map component.

Google Map

The Google Map has the following required properties:

• Center (expression) – expression to evaluate as an object representing the map center. May be in the form of an object containing latitude and longitude properties, or a GeoJSON Point object.
• Pan (string or boolean) – this attribute is a flag to indicate how the map’s centering should behave.

Evaluated on the attribute only. This means it is not watched or followed on the scope.

• Zoom (expression) – expression to evaluate as the map’s zoom level. This must be a number between 1 and 20.

Besides, there are the following extra properties as:

• control – if some object is passed (via scope binding) functionality is appended to that object.
• dragging – dragging state.
• refresh – expression to trigger a map refresh.
• bounds – expression to fit a map in the specified bounds.

Note: If you are adding a Google Map component to Modal screen, add an attribute ng-if = true to the component.

Marker

Marker’s position is defined by coords property. If the property is equal to scope variable, position could be changed programmatically.

For making the Marker draggable, create an object in scope containing property draggable = true, and pass this object name to the options property of the Marker.

Don’t use ng-click to indicate clicking on marker. Use click property instead.

The Marker has the following required properties:

• idKey (expression) – expression to evaluate a field as key/id to identify a marker. Normally this is some identifier which can be used out of your database. Examples: 1,2,3 or “1”,”2″,”3″, or “one”,”two”,”three”. The most important part is that they should be unique! Note that if you use a simple string, you should use quotes (otherwise, AngularJS will search for a variable in scope with a specified name).
• coords (expression) – expression to evaluate as an object representing the marker location. May be in the form of an object containing latitude and longitude properties, or GeoJSON Point object.
• control – if some object is passed (via scope binding) functionality is appended to that object.

Markers

The Markers directive is similar to the marker directive, but it is used when many markers need to be added to the map. It overcomes the high overhead of using the ng-repeatmarker directive.

For making it work in Appery.io, you should specify the models array in scope, which contains objects with coords and ids of each marker.

The Markers has the following required properties:

• Coords (string) – the name of the property in the models array containing the marker coordinates. Must refer to an object containing latitude and longitudeproperties, or a GeoJSON Point object. The special value self can be used to tell the directive that the objects in the array directly contain the marker coordinate object values.
• Models (expression) – an array of objects defining each marker to add to the map.
• idKey (expression) – expression to evaluate a field as key/id to identify a marker. Normally, this is some identifier which can be used out of your database. Examples: 1,2,3 or “1”,”2″,”3″, or “one”,”two”,”three”. The most important part is that they should be unique! Note that if you use a simple string, you should use quotes (otherwise AngularJS will search for a variable in scope with a specified name).
• fit – automatically adjusts to fit the screen size.
• control – if some object is passed (via scope binding) functionality is appended to that object.

Window directive

The window directive is used to display a single InfoWindow object on your map. Its content is set via HTML property, where you can put simple text, HTML tags or scope variables (e.g. Marker title: <b>{{title}}</b> will display title variable from scope).

In Appery.io, it might be used in two ways:

1) Select Marker and click + button inside it. A window will be added into the marker. Thus, all the properties are not required, window will appear after clicking the marker. Variables used in its properties (e.g. HTML property) will be taken first from the marker’s scope.

2) Select Google Maps and click the last + button. A window will be added directly into the map. Thus, it can be displayed without a marker, but its displaying should be controled by the necessary property show and coords should be passed into the coords property. Variables used in properties will be taken first from google-map scope (so using {{title}} in HTML property will lead to the same title displaying in each window).

This case is recommended if you don’t want different windows to be displayed for each marker simultaneously (otherwise use Windows directive). You can use a single window and change its coords and show properties while clicking on each marker. This approach might be useful in pairing with Marker and Markers directive.

The Window doesn’t have required properties. The property HTML is used to type custom HTML to display in a window.

Windows directive

The windows directive is only optimal if you need to render a lot of windows all at once. Thus, different windows will be visible simultaneously after clicking different markers. Otherwise, it is highly suggested to use window,programmatically adjusted to appear at the particular marker. Before using Windows components, please check Angular-UI docs – section windows in Directives list.

Windows doesn’t have required properties. Property HTML is used to type custom HTML to display in each window. Using scope variables in HTML referred to each marker’s scope may help make each window unique.

Grid Layout

The Grid Layout component allows you to format page content into rows and columns.

The Grid Layout component has the following property:

• Fluid Container – determines if a grid expands to fill screen width.

The Grid Cell has the following properties:

• Clearfix – clears the cols if their content doesn’t match in height.
• Columns – columns size: large, medium, small, Xtra-Small.
• Hidden – hides the Grid Cell components on the predefined devices types: large, medium, small, Xtra-Small.
• Offset – centers columns: large, medium, small, Xtra-Small.
• Strictly Visible – shows the Grid Cell components on the predefined devices types: large, medium, small, Xtra-Small.

Working with Bootstrap Grid Layout

As you add the Grid Layout (Grid) component to the page, it has one row with two cells by default:

You can add cells and rows by clicking the green plus icon in the upper right corner of the component.

Working with the Grid component, pay attention to the breadcrumbs above the phone frame.

• If you click plus when the Grid is selected, the row (with two default cells) will be added:
  
• If you click plus when the GridRow is selected, a cell in the selected row will be added:
  

The Grid component has two default properties:

• Component Name – if you change the name, it will appear in the breadcrumbs.
• Fluid Container – determines if the grid expands to fill screen width.

A fluid row (using class row-fluid) will horizontally size a column using a percentage instead of a fixed pixel value. Using a percentage means a fluid row can expand to fill all available horizontal space when it is in a large container, and shrink columns to keep them from vertically stacking as the container shrinks.

The Grid Row has only one default property:

• Component Name – the name that appears in the breadcrumbs.

To set the Grid Cell properties, you can use 4 different grid classes to define your layouts: large, medium, small, Xtra-Small applicable to Columns, Hidden, Offset, and Strictly Visible properties.

Defining these, you can differentiate how you want the grid to be displayed on the different screen sizes.

The Grid Cell has the following properties:

• Clearfix – clears the cols if their content doesn’t match in height.

• Columns – columns size. Bootstrap’s grid system allows up to 12 columns across the page:

• Hidden – defines if the component will be hidden:

If the component is set to hidden, the layout is reorganized to hide the element on the predefined screen type (Xtra-Small) while the other types show it:

• Offset – by using offset, you can move a column to the right of its native position. This is achieved by suitably adding left margin to a column.

• Strictly Visible – forces an element to be shown or hidden on the predefined screen type:

The Checkbox label element won’t be shown on extra small devices and will be shown on the other screen types:

Visit the Bootstrap documentation to read more about Grid Layout.

HTML

The HTML component allows you to insert custom tags.

The HTML component has the following properties:

• Container – html, div, span, h1-h6.

Actually, the HTML component is generated only if html is selected for Container property. Otherwise, it is just a component container.

• HTML – contents of HTML component with html type.

You can use a special keyword %children% to insert child components in the middle of html content.

Image

The Image component allows you to add custom images to your app.

The Image component has the following properties:

• Alt. Text – alternative text to be displayed instead of an image.
• Dimensions:
  • Height.
  • Width.
• Image – uploads an asset.
• Responsive – automatically adjusts to fit the screen size.
• Shape – default, rounded, circle, thumbnail.
• ng-src – an alternative source to dynamically load image. Prevents the browser from loading images before the handlebars get parsed when loading dynamically. To specify the dynamic path, ng-src should be used in {{}} markup. More information about the ng-src directive is here.

Visit the Bootstrap documentation to read more about Image.

Input

The Input component allows you to receive data from the app user. It may be a name, login, email, password, a word, phrase, location or anything else you need in your app.

The Input component has the following properties:

• Add-on Left – enables a prepended add-on.
• Add-on Right – enables an appended add-on.
• Block – determines if an input is stretched to screen width.
• Name – an input name.
• Placeholder – when being replaced, the placeholder text is removed and the actual text is put in its place.
• Size – small, default. large.
• Text – an input text.
• Type – text, password.
• ng-model – binds an input to a property on the scope.

Visit the Bootstrap documentation to read more about Input.

Making the Input required

See this blog post to learn how to make Input required.

Label

The Label component is used to show information to the app user.

The Label component has the following properties:

• Text – a label text.
• Type – default, primary, success, info, warning, danger, or badge.

Visit the Bootstrap documentation to read more about Label.

Link

The Link component is similar to the Label component. The difference is that upon clicking the Link component, the user will navigate to the specified URL. That is, this is just a Href with Bootstrap styles that works as follows:

The Link component has the following properties:

• Href – a link where you need to navigate to.
• Target – _blank, _self.
• Text – a link text.

Using Link

You can use the Link component to navigate between screens.

1) In the page SCOPE tab add a function named goTo (page) with the following code:

2) Go to the page DESIGN tab, open the Link component properties and add the attribute ng-click = goTo('pageName').

3) Empty the Href property (remove #body) to make navigation work. You may leave it if the Link component is inside Navbar or Navs.

Listgroup

The Listgroup component shows a list of items.

The Listgroup component has the following property:

• Linked – makes listgroup items clickable.

The List Group Item has the following properties:

• Badge – enables an item badge with custom text.
• Disabled – determines if an option is disabled.
• Header – enables an item header with custom text.
• Text – an item text.
• Type – default, success, info, warning, danger.

Visit the Bootstrap documentation to read more about Listgroup.

Navbar

The Navbar component contains a Navs with two Links and a Dropdown component by default.

The Navbar component has the following properties:

• Brand:
  • Image – navbar brand image (if absent than brand text is used, if present than brand text is used as image alt).
  • Text – navbar brand text.
• Inverted – determines if inverted.
• Vertical Alignment – None, Fixed on top, Fixed on bottom, Static top (please find more here).

Visit the Bootstrap documentation to read more about Navbar.

Using Navbar

Drag the Navbar component to a page. It already contains a Navs with two Link components and a Dropdown. You can delete them or add more components.

On an XS screen, double click the right button to expand/collapse a Navbar. In this mode it has upper and lower containers with all the components stretched to screen width (except for buttons). On larger screens, containers are displayed in a line and have left-right alignment (you can read here about it).

Only the following components can be added to a Navbar: Navs, Link, Button, Text. You can also add a Form component to implement a search, for example (please find more here).

Bootstrap documentation requires manual body padding to prevent Navbar overlapping other components. Appery.io sets a default padding value of 70px for a needed screen side (instead of body). To change this value, you can set screen styles using custom CSS.

Technical details

On narrow screens, Navbar opening logic is based on setup custom variable and control with predefined AngularJS directives ng-init and ng-click for toggle button, and ng-class for Navbar container.

Variable name is built as componentName and _collapsed postfix. Keep this in mind to prevent intersection when adding other AngularJS directives via Advanced Properties.

Using Navbar on index screen

The steps below describe how to create navigation between screens through the main menu as Navbar on index screen with selection link for a current active screen.

All the steps for index page:

1. In SCOPE tab, add this code to the method init():
   1	$scope.currentPage = {name: 'StartScreen' }; // or other route-name

2. Add method nav() (you can use other name) in SCOPE tab with an argument page_name and the following code:
   1 2	Apperyio.navigateTo(page_name); $scope.currentPage.name = page_name;

3. On index screen DESIGN tab, add a Navbar component above ng-view.
4. For navigation Link component:
   • add property ng-class with the following value:
     1	{active: currentPage == 'routeName_to_page'}

   • add property ng-click with the following value:
     1	nav('routeName_to_page')

If your app needs navigation actions from child screens, you can use the same steps for ng-click on Link:

Navs

The Navs component contains two Links and a Dropdown component by default. All Nav components have shared base markup and styles. Usually, Navs is used to build rich navbars.

The Navs component has the following properties:

• Justified – determines if navs are stretched to screen width.
• Vertical – determines if navs are aligned vertically.

Visit the Bootstrap documentation to read more about Navs.

Using Navs

When you drag the Navs component to a page, it already has two Link components and a Dropdown by default. You can delete them or add more Link and Dropdown components.

To make a Link active, set the property Class = active in PROPERTIES.

To disable a Link or a Dropdown, add a CSS asset with the following code (you can use any name for class, here we used disabled-pointer) and set the property Class = disabled disabled-pointer in PROPERTIES:

To disable a Dropdown, you can also set the property Class = disabled in PROPERTIES and just add a custom attribute Disabled = True.

It’s reasonable to use SCOPE variables for this purpose.

Please find more here.

All advanced attributes and the className that you apply to a nav Link via PROPERTIES panel are in fact applied to <li> wrapping this Link. For example, to apply CSS styles to a link, you would need to set className = my-link and then use this code:

Instead of the following:

Page Header

The Page Header component is a simple shell for an h1 to appropriately space out and segment sections of content on a page.

The Page Header component has the following properties:

• Subtext – a subheader text.
• Text – a header text.

Visit the Bootstrap documentation to read more about Page Header.

Panel

The Panel component allows you to create sliding panels which appear from the left or right.

The Panel component has the following properties:

• Footer Text – a footer text.
• Header – determines if a title has big size.
• Header Text – a title.
• Text – a panel text.
• Type – default, primary, success, info, warning, danger.

Radiobutton

The Radiobutton component is a group of options where only one may be checked.

The Radiobutton component has the following properties:

• Block – determines if a radiobutton is stretched to screen width.
• Checked – determines if a radiobutton is checked by default.
• Name – a radiobutton name.
• Text – a radiobutton text.
• Value – a radiobutton value.
• ng-model – binds a radiobutton to a property on the scope.

Visit the Bootstrap documentation to read more about Radiobutton.

Select

The Select component allows you to choose one item from a predefined set of values.

Table

The Table component allows you to create tables.

The Table component has the following properties:

Tabs

The Tabs component consists of clickable tabs.

The Tabs component has the following properties:

Custom Bootstrap widget events

The Tabs component has the following widget events:

Here is an example:

Text

The Text component allows the app user to enter text.

Textarea

The Textarea component allows the app user to enter multiline text.

The Textarea component has the following properties:

• Block – determines if a textarea is stretched to screen width.
• Content – a multiline text.
• Placeholder – when being replaced, the placeholder text is removed and the actual text is put in its place.
• Rows – a number of rows in text.
• ng-model – binds a textarea to a property on the scope.

Visit the Bootstrap documentation to read more about Textarea.

Also, to apply AngularJS styling to the app platform, the ionic.Platform utility can be used. Learn here, how to use it to dynamically style app elements.