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

What are we going to build?

In this tutorial, you’ll learn how to build an app that searches data stored in Appery.io backend services.

The app will look like:

Before you begin

Tutorial level: intermediate.

Creating a new app

Create a new app in the Appery.io app builder; from the Apps page, enter an app name and click “Create”. Go to Pages > startScreen.

Building the UI

Open startScreen, and create the following UI:

  • For the Input component, delete the Text Input, and in Placeholder, type Maker name.
  • Below the button, place a grid with two columns with a label inside each.

Creating the database

Create a new database and import data into it:

  1. Click Database inside the builder.
  2. For the Database Name, enter phoneDB and click “Create”.
  3. In the Collections tab, click “Import a collection”.
  4. For the Collection Name, enter Phones, then upload the Phones CSV file to the database by clicking “Import”. Once the collection is created, it should look like:

Creating a REST service

  1. From the Appery.io builder: CREATE NEW > Database Services.
  2. Select the PhoneDB just created.
  3. Check the Query service, and click “Import selected services”:

If you look under Services, you’ll see two created files. One is a REST service, the other is a Settings service that holds the service URL and database key. Open the phoneDB_Phones_query_service:DB_Phones_query_service

The Request tab under Headers:Headers

The Request tab under Query String:QueryString

As you can see, everything was automatically created.

Testing the service

Click on the TEST tab, and test the service. Since you didn’t specify anything for the where parameter, you should get all the phones in the collection.

You don’t need to create the response parameters, as the response was automatically created when you imported the services.

Add & bind the service to the page

  1. Open startScreen and switch to the DATA tab.
  2. For datasource, select Service > PhonesDB_Phones_query_service, and click “Add”.
  3. Rename the service to: search_service.

Now map the service:

1. Click “Mapping” for Before send event and define the following mapping:

2. Click “JS” for the where input, and enter the following code:

3. Click “Save and return” to go back.

4. Open the Success tab.

5. Create the following mapping:

6. Save and go to the DESIGN tab.

Invoking the service

1. Select the “Search” button.

2. Open the EVENTS tab.

3. For action, select Invoke service (the component and event will already be selected):

4. Click “Save”.

Testing the app

Click “Test,” to run the app in the browser.

For example; enter “Apple”:

“No records found” message

1. In DESIGN view, add a new Label to the page:

Change the label name to no_records and uncheck Visible.

2. Select the button, and add a run JavaScript event on click with this code and save:

This will hide the label on every new search.

3.The events should look like the following screen shot:Mobilebutton_3

4. Open the DATA tab.

5. Open the EVENTS tab, if it’s closed.

6. Select search_service (component) > Complete (event) > Run JavaScript (action) with this code:

If nothing is returned, show the message.

7. Click “Save”.

For example; searching for “Nokia” will display: