Clickable List jQM App

An app built with jQuery Mobile framework demonstrates using Server Code and database


We highly recommend considering Ionic for creating your new projects: Ionic apps generally perform and look better than jQuery Mobile hybrid apps but would like you to know that still supports the JQuery Mobile framework as it is considered to be a very simple framework and is still used by many developers.

This app displays a list of products. You can click on a product and view its details.

This app uses and demonstrates:

  • jQuery Mobile.
  • Server Code.
  • Database.

App (UI)

To get the app UI:

  1. Create a new jQuery Mobile app based on the Blank template.
  2. Inside the App Builder, select CREATE NEW > From plugin. Under Examples, select Clickable List App.
  3. Click the Import selected plugins button.
  4. Select products as the start page and click Apply settings.


The app backend consists of a database and Server Code scripts.


To get the database:

  1. Create a new database called: ProductsDB under the Databases tab.
  2. Click Import a collection and upload this database backup file - you might need to zip it first. A Products collection should be created with five products.

Server Code Scripts

There are two scripts you need to create under the Server Code tab. One script for loading all the products and another script for getting product details.

  1. Create a new Server Code script called GetProducts and paste the following code:
var dbId = "Enter database API key";
var collectionName = "Products";
var result = Collection.query(dbId, collectionName);
Apperyio.response.success(result, "application/json");
  1. Create another script called ProductDetails and paste the following code:
var dbId = "Enter database API key";
var collectionName = "Products";
var productId = request.get("productId");;
var result = Collection.retrieveObject(dbId, collectionName, productId);
Apperyio.response.success(result, "application/json");
  1. For both scripts, set the database API key in line #1. The database API key can be found on the Database > Settings page.

You can test both scripts by going to the Run tab. For the ProductDetails script, you will need to set the productId parameter: under the Script parameters tab, enter productId for a new parameter name and provide the ID of one of the products on the list (can be found in the Products database collection):


Connecting the UI and the Backend

The last step is to connect the app with the backend.

  1. Inside the App Builder open Services > GetProducts_service.
  2. In the Settings tab, for the URL, replace {servercode} with the GetPtroducts Server Code script ID.
    To find the ID for this script, go to the Server Code editor and open the API information tab. The ID in Service URL is the ID you need:
  1. Repeat the same for the other script​.
  2. Now you can test this sample app. Click the TEST button to launch the app in the browser.