🚧

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.

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 Appery.io Examples, select Clickable List App.
3. Click the Import selected plugins button.
4. Select products as the start page and click Apply settings.

Backend

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

Database

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");

2. 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");

3. 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:

3. Repeat the same for the other script​.
4. Now you can test this sample app. Click the TEST button to launch the app in the browser.