What are we going to build?

In this tutorial, you’ll learn how to build a mobile app that uses “prev”/”next” buttons to load data from a database.

The app will look like:

Before you begin

Tutorial level: advanced.

Prerequisites: at least one intermediate tutorial.

Building the UI

Create a new app from the app builder, and create the following UI:

• Appery.io comes with a number of default themes and you can change the way your app looks. To change your theme and swatch settings, you need to import the available default themes via plug-ins first: CREATE NEW > From Plug-in (or click “Add more Themes” from App settings > General), which will open a window with the list of available themes for importing. Select the theme to import (Gelato) and click “Import selected plug-ins”.
• To apply the imported theme to all the pages in the app, go to Project > App settings. Select gelato for Theme and then select A for Swatch.
• Rename the caption to States.
• There are two Grid components on the page.
  • The first grid has one row and one column. Inside the cell there is a Label component.
  • The second grid has one row and two columns. The two Buttons inside the grid are named prevButton and nextButton.

Creating a database

We are going to use the United States as data:

1. Download the states data file (States.csv file).

2. Inside the builder, click Database.

3. Create a new database (or use an existing one).

4. Click “Import a collection” to load a new collection from a file:

5. Enter a collection name. For example: States.

6. For “Choose file”, point to the file you downloaded.

7. Click “Import” to create the collection.

The result will look like:

Creating REST API service

1. Using CREATE NEW > Database Services > StatesDB > List, import the list service to the app:

2. Open the created service.

3. Open the Request tab, and add limit and skip parameters under Query String tab:

Where: 

limit – sets how many to display. For example, display 5 records at a time.

skip – sets at what record to start (or skip). For example, start at record 41 (skip 40).

The curl command behind this request is:

View our docs for other curl commands. You can now go to the Test tab and try this API.

Binding the service

Before you invoke the service you’ve created, you need to add the service to the page:

1. Project > Model and Storage and open the Storage tab.

2. Add two local storage variables: limit and skip. Save.

Now you can bind the service to the page:

1. Go back to the startScreen, open the DATA tab, and add the list service to the page.

2. Rename the service instance to get_states:

3. Define the following mapping action for Before send event:

4. Define the Success event mapping, and save:

Adding events to the page & buttons

1. Open the DESIGN view.

2. Add two events on page load:

1. Run JavaScript with the following code:
   
   1 2 3 4

   localStorage.setItem('limit', 5); localStorage.setItem('skip', 0); localStorage.setItem('total', 50); Apperyio('prevButton').hide();

2. Invoke service (get_states).

This code sets the initial values for limit and skip. The initial values are pre-set, but you can make them dynamic. For example: run a service to count how many objects there are. The last line of code hides the “Previous” button, since we’re at the start of the list.

3. On the “Previous” button, run this JavaScript:

The code for the “Previous” button, (as well as code for next button below) retrieves the current values for skip and limit. Based on these values, we determine what records to display for previous (or next) button click. Also, decide whether to show the buttons based on where you are in the list.

4. On the “Next” button, run this JavaScript, and save:

Testing the app

Test the app in the browser and use the “Previous”/”Next” buttons to load the next (or previous) states.

The result will look like (first screen, second screen, last screen):

The code in this tutorial should be used as a sample or starting point.