jQM UI Components

UI components available in App Builder for jQuery Mobile.

Components

The App Builder for jQuery Mobile provides a large number of UI components for building your mobile app. The components fall into one of the following categories:

  • jQuery Mobile components;
  • HTML components (including HTML for writing custom code);
  • YouTube, Vimeo, Google Maps component.

Additional Resources

As the Visual App Builder uses standard jQuery Mobile and HTML components, if you need additional help using these components or their other properties, it's best to visit the following resources:

Link

The Link component renders an HTML link control.

Property nameProperty description
TextThe link label/text.
URLThe link URL.
NameComponent name. Used to reference via Appery.io JavaScript API.
VisibleDetermines if the component is visible on the page.
MarginSets the component margins (top, bottom, left, right).
Font FaceLabel font face: Georgia, Gisha, Gulim, or Helvetica.
Font ColorLabel color.
Font SizeLabel size.
FontLabel font.
AlignLabel alignment.
Class NameCustom CSS class for this component.

Button

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

Property nameProperty description
Mini versionCheck to make a button smaller.
InlineCheck to put several buttons in a line.
IconSelect the icon to be added to the button.
PositionSelect the position of the icon on the button. It can be right, left, top, bottom, or notext.
CornersCheck to make a button with rounded corners.
Tab indexAllows you to change item order by using the Up and Down buttons.

Group Buttons

The Group Buttons component includes several buttons in a group, each button has properties similar to those listed above.

Property nameProperty description
Mini VersionCheck to make all the buttons in a group smaller.
OrientationSelect vertical (by default), or horizontal placement for the buttons.
ItemsSelect how many buttons you need in the group.

Input

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

Property nameProperty description
TextWrite the text to appear in the input field once the page has loaded. Leave this property empty if you need the input field to have placeholder text.
PlaceholderIf you want the text to disappear once the user starts typing, enter the placeholder text in this field.
TypeSelect the type of the input text. If the password is selected, the entered text is shown as dots.
Tab indexAllows you to change item order by using the Up and Down buttons.

Text Area

The Text Area component allows the app user to enter text.

Property nameProperty description
TextWrite the text to appear in the text area. This text may not be a placeholder so it may not disappear by itself, but it can be cleared if needed.
PlaceholderWrite the placeholder text you want to appear in the text area; the Text property should be empty.
Mini VersionCheck if you want to decrease the text size.
Tab indexAllows you to change item order by using the Up and Down buttons.

Dialog

Dialog is a page that can be opened as a pop-up window. Because it is a page, it can contain any UI components. The dialog is not presented in the UI components palette so to create a dialog select CREATE NEW > Dialog. It’s a good idea to set a name for the dialog in PROPERTIES to make it easier to refer to.

Datepicker

The Datepicker component is very helpful when the app user needs to enter a date.

Property nameProperty description
Date FormatYou can change the standard mm/dd/yy order of the elements to any you like, but there are some notes you should know:
1. Only slash / or dash - may be used as separators.
2. Only two symbols must be specified to each date component, although in your app you will see a four-digit year.
3. Appery.io database date format corresponds to yy-mm-dd.
Default DateBy default, the current date is set but this setting can be changed.
Min DateThe dates before the one set in this field will be unselectable.
Max DateThe dates after the one set in this field will be unselectable.
First DayYou can select the first weekday: Sunday (default) or Monday.
Day NamesYou can change day names to symbols or other names if your language differs from English.
Month NamesYou can also change month names if your language isn’t English.
Tab indexAllows you to change item order by using the Up and Down buttons.

Label

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

Property nameProperty description
TextWrite the text to appear when the page loads.
Font FaceSelect the font face family to be used for the text of the Label component.
Font Color/SizeSpecify the color and the size of the symbols in the Label component.
FontDefine if the text font will be bold, italic, underlined.
AlignDefining the text alignment in the component will be either: left, center, right, or justify. By default, it is left.

Radio

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

Property nameProperty description
Options CountDefine the number of alternatives from which to choose.
OrientationSelect vertical* (default) or horizontal placement of the options. When vertical orientation is chosen a circular hole precedes the description, and the selection is marked with a dot in it. When the horizontal orientation is chosen, a circular hole is absent and the selected item is highlighted.
Mini VersionCheck to make all the options in a group smaller.
ValueThe value which will be set if the option is selected.
TextThe description of the selection, by default it is the same as the value.
SelectedCheck if you want this option to be selected by default. Once Selected is checked for one option, it will become unchecked for the rest of the options.
Tab indexAllows you to change item order by using the Up and Down buttons.

Checkbox

The Checkbox component is a group of options where one or more options may be checked.

Property nameProperty description
Options CountDefine the number of alternatives from which to choose.
OrientationSelect vertical (default) or horizontal placement of the options. When the vertical orientation is chosen a circular hole precedes the description, and the selection is marked with a dot. When the horizontal orientation is chosen, a circular hole is absent and the selected item is highlighted.
Mini VersionCheck to make all the options in a group smaller.
ValueThe value which will be set if the option is selected.
TextThe description of the selection; by default it is the same as the value.
SelectedCheck if you want this option to be selected by default. Once Selected is checked for one option, it will become unchecked for the rest of the options.

Slider

The Slider component allows choosing a numeric value by moving an indicator.

Property nameProperty description
Max ValueThe value set when the indicator is on the right end of the slider.
ValueThe default value.
Min ValueThe value set when the indicator is on the left end of the slider.
Mini VersionCheck to make the Slider component smaller.
Tab indexAllows you to change item order by using the Up and Down buttons.

Toggle

The Toggle component allows switching between two values.

Property nameProperty description
ToggledCheck to switch the toggle component on.
Label On TextText appearing when the toggle component is switched on.
Label Off TextText appearing when the toggle component is switched off.
Tab indexAllows you to change item order by using the Up and Down buttons.

Select

The Select component allows choosing one item from a predefined set of values.

Property nameProperty description
IconSelect the icon to be shown on the component, or remove the icon. The selected icon appears only on the main component, not on the lines of the list.
PositionSelect the icon position.
OptionsClick Change to set labels and values of the list.
SelectedChoose the option to be selected by default.
Native MenuCheck to make the list look like a menu.
Mini VersionCheck to make the Select component smaller.
InlineCheck to locate several components in line.
Tab indexAllows you to change item order by using the Up and Down buttons.

Working with Long List

The jQuery Mobile Select component opens a full-page dialog if there are many items on the list. When the dialog closes, the component will generate a Page show event for the main (parent page). This means that any Page show events will be fired on the parent page.

The following is a solution to manage

  1. Add the Page show event handler with action Run JavaScript.
  2. Add the following JavaScript code:
var data = arguments[1];
var prevPage = data.prevPage;
var isFromSelect = jQuery(prevPage).is('[data-role="dialog"]');

//debug
//console.log("isFromSelect  = " + isFromSelect);

//No action is this a "Page show" event triggered from "select" component.
if(isFromSelect) {
    return;
}

//Any other "Page show" event logic
console.log("Page show logic goes here");

List

The List component shows a list of items.

Property nameProperty description
NumberedCheck to make the list ordered.
Round CornersUncheck to make the list square and screen wide.
Data FilterCheck to add a filter field.
Auto DividerCheck to add a divider to the list. The divider shows the first letter of the item (or group of items, if they start with one letter).
Split ButtonCheck to split each button into two parts: label and icon. If the property is checked, each part has specific properties (these properties will be listed below) and can have their own events.
Buttons IconSelect the default icon for list items.
Buttons SwatchSelect the default swatch for list icons. This property appears only when Split Button is checked.
Placeholderenter the text for the filter field. This property appears only when Data Filter is checked.
Divider SwatchSelect the swatch for dividers.
Counter SwatchSelect the swatch for counters.
ItemsSet the number of items in the list.
LinkedMakes the list items active (checked by default).
Tab indexAllows you to change item order by using the Up and Down buttons.

List items have the following properties:

Property nameProperty description
Image TypeSelect whether you want to have images on the list items. You can select thumbnail image, icon image, or no image - none.
ImageClick Change to upload or select the image.
IconClick Inherit to choose an icon.
Counter ValueThe counter appears if the Counter Visible box is checked.
Counter VisibleCheck to make the Counter Value property accessible.
TextEnter the text for the list item.
DividerCheck to highlight the item as a divider. When the Auto Divider list property is checked, this checkbox becomes inactive. If the Divider property is checked, the following changes will appear:
The button icon and image are hidden on the divider item.
If the Split Button list property is checked, the divider item will not be split because it has no icon.
If the list is numbered, the numbering starts from 1 after every divider.
If the Split Button list property is checked, you can define it for every list item’s unique icon and swatch.
LinkedMakes the list items active or passive. This property is inherit by default (takes value from List linked value). To turn off the inherit mode switch the toggle.
Tab indexAllows you to change item order by using the Up and Down buttons.

Image

The Image component allows adding custom images to your app.

Property nameProperty description
Preserve RatioUncheck to change the image ratio.
AssetClick Change to upload or select the image, or Clear image to clear it.

Grid

The Grid component allows formatting page content into rows and columns.

Property nameProperty description
RowsNumber of rows.
ColsNumber of columns.
DimensionGrid width and height. Allowed values are <num>px, <num>pt, <num>%, or auto.
Border ThicknessThe default value is 0 (it is invisible), but you can set a different value.
Border ColorSelect the color for the border.

Every Grid cell has the following properties:

Property nameProperty description
Background TransparentUncheck, if you want the cell background to be colored.
Background ColorSelect the color for the cell background if Background Transparent is unchecked.

Navbar

The Navbar component may be dragged and dropped on the page header or footer. It can consist of several buttons with optional icons. The Navbar component has only one main property – Items. The number of items in a Navbar can vary from 1 to 10. If the number of items you set doesn’t exceed 5, the buttons will be on one line. If you set more than 5 items, they will be placed on several lines – two buttons in a line (regardless of the page size). This doesn’t look very professional, which is why we don’t recommend using the Navbar component with more than 5 items.

Property nameProperty description
IconYou can select any icon from the list or none.
TextEnter the text to appear on the button (this field may be left empty).
ActiveCheck to make the button highlighted on this page.

Search

The Search component is an input field with a search icon, and a clear text icon that appears once the app user begins typing.

Property nameProperty description
TextEnter the text that should appear in the input field. This text may not be a placeholder so it may not disappear by itself, but can be cleared if needed.
PlaceholderWrite the placeholder text you want to appear in the text area; the Text property should be empty.

CollapsibleSet

CollapsibleSet is a complex component that, when tapped, allows you to expand and collapse content. The CollapsibleSet component consists of one or several blocks, and each block has a header and content area. The header stays visible even when the content is collapsed. Using the CollapsibleSet component saves space on your mobile page.

Property nameProperty description
ItemsNumber of blocks.
Mini VersionCheck if you want the block headers be smaller.
Data InsetUncheck to make the component full width, without corner styling.
Data Collapsed IconSelect the icon that appears on the header of the collapsed block.
Data Expanded IconSelect the icon that appears on the header of the expanded block.
Data IconposSelect the position of the icon on all block headers.
SwatchSelect the component swatch if you want it to differ from the inherited.
Data Content ThemeSelect the block contents’ swatch if you want it to differ from the inherited.
Tab IndexAllows you to change item order by using the Up and Down buttons.

The CollapsibleSet block properties are as follows:

Property nameProperty description
CollapsedUncheck to make this block expanded by default. You can uncheck the box to fill the content area of the block, and then check it again.
SwatchSelect the block swatch if you want it to differ from other blocks. If you set the block swatch it will not change after changing the component swatch.
Tab indexAllows you to change item order by using the Up and Down buttons.
Mini VersionCheck if you want the block headers to be smaller.

The CollapsibleSet block header properties:

Property nameProperty description
Icon PositionSelect this block headers icon position.
CollapsedUncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
TextEnter the block header text.
SwatchSelect the block header swatch if you want it to differ from the inherited.

Collapsible

The Collapsible component differs from the CollapsibleSet component only in the number of items – it has only one block, which has a header and content area, it may be collapsed or expanded by default, and can be of standard or mini size.

The Collapsible block properties are as follows:

Property nameProperty description
CollapsedUncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
SwatchSelect the block swatch if you want it to differ from other blocks. If you set the block swatch it will not change after changing the component swatch.
Tab IndexAllows you to change item order by using the Up and Down buttons.
Mini VersionCheck if you want the block headers be smaller.

The Collapsible block header properties:

Property nameProperty description
Icon PositionSelect this block header’s icon position.
CollapsedUncheck to make this block expanded by default. You can uncheck it to fill the content area of the block, and then check it again.
TextEnter the block header text.
SwatchSelect the block header swatch if you want it to differ from the inherited.

Spacer

The Spacer component is used to make space between other components. You can resize it with mouse cursor or by changing the Dimension properties (allowed values are <num>px, <num>pt, <num>%, or auto).

Video

The Video component allows embedding a video on your app page.

📘

The video file can be uploaded into the App Sources files WEB_RESOURCES/app/... folder. On the screen is shown the configuration when a SampleVideo.mp4 file has been uploaded into this directory. Keep in mind that uploading big files into the App sources will increase the overall size of the final binary app, we strongly encourage you to keep such files in the backend.

Video Component PropertiesVideo Component Properties

Video Component Properties

Property nameProperty description
Auto PlayCheck to make the video start once the page loads.
SrcSpecify the location of the video file.
TypeSpecify the MIME-type of the video file. There are 3 pairs of Src/Type properties so that you can specify 3 different video locations and types because different browsers support different video formats.
Show ControlsCheck to show play/stop/pause controls (they will be different depending on the browser).
LoopCheck to make the video start over every time it is finished.
MuteCheck if you want the audio output of the video to be muted.
PosterSpecify the image to be shown when the video loads (but isn’t playing yet). It’s also used if the video isn’t available.
PreloadSelect whether the video should be loaded as soon as the page loads. Possible values are:
none – the video should not start loading when the page loads.
metadata – only the metadata for the video should be loaded once the page loads.
auto – the video should start loading when the page loads.

Audio

The Audio component allows embedding a sound on your app page.

📘

The audio file can be uploaded into the App Sources files WEB_RESOURCES/app/... folder. On the screen is shown the configuration when an Audio.mp3 file has been uploaded into this directory.

Property nameProperty description
Auto PlayCheck to make the audio start playing as soon as it is ready.
SrcSpecify the URL of the audio file.
TypeSpecify the MIME-type of the audio file. There are 3 pairs of Src/Type properties, so that you can specify 3 different audio locations and types because different browsers support different audio formats.
LoopCheck to make the audio start over every time it is finished.
PreloadSelect if/how the audio should be loaded when the page loads. Possible values are:
none – the audio file should not start loading as soon as the page loads.
metadata – only the metadata for the audio should be loaded once the page loads.
auto – the entire audio file should start loading as the page loads.

For more ways of handling audio with JavaScript check out our JQM example here.

Map

The Map component allows embedding Google Maps into your app page.

Property nameProperty description
LatitudeSpecify the coordinate which should be shown on the map when the page loads.
LongitudeSpecify the coordinate which should be shown on the map when the page loads.
AddressSpecify the address which should be shown on the map when the page loads.
ZoomSpecify the zoom level of the map.
Show markerCheck if you want the markers to be visible.

The Map component contains a marker, which is an info window. The Map marker has the following properties:

Property nameProperty description
Show Info WindowCheck if you want it to appear.
LatitudeSpecify the default coordinate of the info window.
LongitudeSpecify the default coordinate of the info window.
AddressSpecify the default address of the info window.
TextEnter some text.

API Key

The Map (Google Maps) component API key is required for the component to work properly. Read how to get an API key. The API key can be set in Project > App settings > Components. The same API key will be used for all Map components in an app. If you are creating a hybrid app, you don't need to set any API key restrictions.

HTML

The HTML component allows inserting custom HTML code inside the div and span tags.

Property nameProperty description
TypeYou can select either div, span, html, or form.
HTMLThe Edit HTML button is enabled when the Type property is set to HTML. On clicking the Edit HTML button, the HTML Editor pop-up opens, where any custom HTML, JavaScript or CSS code can be entered.
DimensionComponent width and height. Allowed values are <num>px, <num>pt, <num>%, or auto.

Carousel

The Carousel component allows creating a list of frames, which can be scrolled horizontally back and forth.

Property nameProperty description
FramesSet the number of frames in the Carousel component.
IndicatorsSet the name of the component to which indicators of the carousel will be outputted. If it is empty, indicators will be displayed at the top of the carousel block.
Show indicatorUncheck to hide indicators.
Show titleUncheck to hide the title of the carousel.
Title Built InAllows for the formatting of the frame title. If it is checked the title text is wrapped in two divs with class ui-carousel-title, and an inside div with class ui-carousel-title-inside. Otherwise, the title text is wrapped in only one div with class ui-carousel-title.
Title Is TextIf checked then an attempt to pass html-code as a text will lead to the HTML being displayed as plain text with tags. Otherwise, the title is interpreted as HTML (e.g. you can pass <b>Text</b> and the text will be displayed as bold).
Animation DurationYou can set the duration of an animation (in milliseconds).
Use Legacy AnimationIf checked, the JS code will be used for animation; otherwise, it will try to use the built-in browser mechanisms for animation through CSS3-styles.
EnabledIf unchecked, carousel won’t work (frames won’t change, only the first frame will be accessible).

The Carousel item has the following properties:

Property nameProperty description
TypeYou can select HTML or image type:
* HTML – provides other components to be added to the frame (including the Image component).
* image – provides only the image to be shown at the carousel frame (other components dropped to the frame will be invisible).
TitleSet the frame title.
Image URLThis property appears when the image frame type is selected.

Panel

The Panel component allows creating sliding panels that appear from the left or right.

Property nameProperty description
SwatchBy default, this property inherits the screen swatch property value.
PositionThe panel can slide out from the left or right side of the screen.
DisplaySelect one of the following modes:
* Overlay– the panel appears over the page content.
* Reveal – the page content moves and the panel appears from under it.
* Push – the panel pushes the page content aside.

Popup

The Popup component allows presenting any data as a pop-up. All the pop-ups are listed under OUTLINE. You can manage (delete or hide/show) certain pop-ups from the OUTLINE tab by clicking the corresponding link. You can also hide pop-ups by clicking the small down arrow above the pop-up.

Property nameProperty description
SwatchSelect the button swatch if you want it to differ from the default type specified in the app settings.
Overlay ThemeWhen pop-up is opened, it can overlay UI in the background with a different swatch.

YouTube

The YouTube component has the following built-in events:

  • YouTube state change – fires whenever the player’s state changes. The value specifies an integer that corresponds to the player state. Possible values are:
    -1 (unstarted)
    0 (ended)
    1 (playing)
    2 (paused)
    3 (buffering)
    5 (video cued)
    This event returns a state object that can be handled.
  • YouTube video ended – fires when the player’s state changes to 0 (ended); this event is based on the YouTube state change event; it does not return any object.
  • YouTube video playing – fires when the player’s state changes to 1 (playing); this event is based on the YouTube state change event; it does not return any object.
  • YouTube video paused – fires when the player’s state changes to 2 (paused); this event is based on the YouTube state change event; it does not return any object.
  • YouTube video buffering – fires when the player’s state changes to 3 (buffering); this event is based on the YouTube state change event; it does not return any object.
  • YouTube playback quality change – fires whenever the video playback quality changes. The value is a string that identifies the new playback quality. Possible values are:
    small
    medium
    large
    hd720
    hd1080
    *highest**
    YouTube playback rate change – fires whenever the video playback rate changes. The value is a number that identifies the new playback rate.
    YouTube error – fires if an error occurs in the player. The value is an integer that identifies the type of error that occurred.
    YouTube playback quality change – fires whenever the video playback quality changes. The value is a string that identifies the new playback quality. Possible values are:
    2 – The request contains an invalid parameter value.
    100 – The video requested was not found.
    101– The owner of the requested video does not allow it to be played in embedded players.
    150 – This error is the same as 101. It’s just a 101 error in disguise!

Vimeo

The Vimeo component allows embedding video from Vimeo.

Property nameProperty description
Auto PlayCheck to make the video start once the page loads.
Video IDEnter the video ID from vimeo.com.
LoopCheck to make the video restart every time it is finished.
Show titleChecked by default; uncheck if you want to hide the video title.
Show portraitChecked by default; uncheck if you want to hide the author’s portrait.
Controls colorChange the color of the component controls to make it more appropriate to your application appearance.