If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Appery.io comes with a small JavaScript library to make it easier to select elements in the DOM. It only provides a few functions, so you still need be familiar with the jQuery API.

It’s extremely important that you know how to select elements in the DOM using just the jQuery API.

Apperyio(id)

Apperyio('component_name') is a shortcut to get a reference to a jQuery Mobile component on a screen by using its designated name.

Example:
screenshot211

On a button click, say you’d like to read the value entered into the input field:

  1. Add a click event to the button.
  2. Add a Run Custom JavaScript action to the click event.
  3. Add this JavaScript as the custom JavaScript (assuming the Input component name is “input”):
  4. The app will look like:
    screenshot212

The example above is a quick and easy way to get access to any component in the screen. It’s equivalent to using jQuery directly:

Once you get a reference to an element, you can use the jQuery API to manipulate the element. It’s plain JavaScript and jQuery – nothing else!

Once you get a reference to a component, which part of the jQuery API is available depends on the component.

For example, if you got a reference to an Input component, then you could use this to read or set its value:

If you get a reference to a Label component, then the API is different, and to read the value, you would use:

It’s important to familiarize yourself with the jQuery and jQuery Mobile API.

Apperyio.navigateTo(page, {})

This allows you to navigate to another page using JavaScript.

For example, if you have a page named menuPage, to navigate to this page, you would use:

The second argument may be blank, but you can use it to specify a transition affect. For example:

All available transitions are listed on the jQuery Mobile site.

You can also specify whether the transition should be done in reverse:

Apperyio.getImagePath(name)

Appery.getImagePath('image_name') returns the URL of an image.

For example, say you uploaded an image and placed it on the page. You then set the Image component name on the page to “page_logo.” To get the image URL, you would invoke the following:

It will return something like:

Examples

Show/hide an element

If “component1” is the component name, then to hide/show an element:

Both hide() and show() are standard jQuery functions.

If “component1” is a component ID:

Check if the element is visible

Every component has Visible property in the PROPERTIES panel:
visible_tick

When the Visible property is unchecked there is a CSS rule for this element:

Here is how element visibility can be checked via JavaScript:

Launching the native dialer or SMS app

It’s possible to open the dialer window with a pre-populated phone number. This method works for both native apps and mobile web.

Use the following code:

Android

iOS

It is also possible to open an SMS typing window with pre-populated message text and a phone number:

Learn more how to use telephone links in mobile web and hybrid apps.

Hiding and showing spinner

Use the following code to hide spinner:

Use the following code to show spinner: