🚧

Important Note!

The option of creating new apps with the jQuery Mobile framework was removed but we still support the projects that were created with it earlier.

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:

• jQuery Mobile docs;
• HTML controls.

Link

The Link component renders an HTML link control.

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.

Group Buttons

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

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.

Text Area

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

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.

Label

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

Radio

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

Checkbox

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

Slider

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

Toggle

The Toggle component allows switching between two values.

Select

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

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.

List items have the following properties:

Image

The Image component allows adding custom images to your app.

Grid

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

Every Grid cell has the following properties:

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.

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.

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.

The CollapsibleSet block properties are as follows:

The CollapsibleSet block header properties:

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:

The Collapsible block header properties:

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.

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.

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.

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

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.

Carousel

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

The Carousel item has the following properties:

Panel

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

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.

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.