Building a mobile app with data pagination

What are we going to build

We are going to create a mobile app that uses prev/next buttons to load only needed data from a database. The app is going to look like this:

Before you start

Tutorial level: advanced

Creating the UI

Create the following UI:

There are two Grid components on the page

The first grid has one row and one column. Inside the cell is a Label component.

The second grid has one row and two columns. The two buttons are named prevButton and nextButton.

Creating state database

We are going to use United States states as data.

1. Download states data file (States.csv file).
2. Inside the builder, click Backend Services button.
3. Create a new database (or use any existing one)
4. Click Import button to load a new collection from a file
   
5. Enter collection name, for example: States
6. For Data file, point to the file you downloaded.
7. Click Import button to create the collection. The result will look like this:
   

Creating REST API service to load states

1. Using Create New > Database Services, add the List API service to the app:
   
2. Open the created service
3. Open Request tab and add limit and skip parameters:
   
   
   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 actual curl command behind this request is:

   curl -X GET
    -H "X-Tiggzi-Database-Id: xxxxxxxxxxxxxxxxxxxxxxxxxxx" 
    -G 
    --data-urlencode 'limit=5' 
    --data-urlencode 'skip=5'
   https://api.tiggzi.com/rest/1/db/collections/States

   Docs for other curl commands.

4. You can now go to Test tab and try this API.

Binding the service to the page

1. Open Data tab and add this service to the page
2. Rename the service instance to: get_states
   
3. Open Data Mapping
4. Define request mapping:
   
5. Define request mapping:
   
6. Save.

Adding events to page and buttons

1. Open Design view
2. Add 2 events on page load
   1. Run JavaScript with the following code:

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

      This code set the initial values for limit and skip.
      The initial values are pre-set but you can of course make them dynamic. For example, run a service to count how many objects there are.
      The last line of code hides the previous button as we are at the start of the list (nothing to show for previous)

   2. Invoke service (get_states)
3. On previous button, run this JavaScript:

   var skip = parseInt(localStorage.getItem('skip'));
   var limit = parseInt(localStorage.getItem('limit'));
   var total = parseInt(localStorage.getItem('total'));
   if (limit + skip > 0){
      localStorage.setItem('skip', skip-limit);
      get_states.execute({});
      if (skip - limit == 0){
         Tiggzi('prevButton').hide();
      }
      if (skip - limit < total - limit ) {
         Tiggzi('nextButton').show();
      }
   }

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

4. On next button, run this JavaScript:

   var skip = parseInt(localStorage.getItem('skip'));
   var limit = parseInt(localStorage.getItem('limit'));
   var total = parseInt(localStorage.getItem('total'));
   if (limit + skip < total){
      localStorage.setItem('skip', limit+skip);
      get_states.execute({});
      if (limit + skip == limit) {
         Tiggzi('prevButton').show();
      }
      if (limit + skip == total - limit) {
         Tiggzi('nextButton').hide();
      }
   }

5. Save.

Testing the app

Go ahead and test the app in the browser. and use the Previous/Next buttons to load the next (or previous) states. The result will look like this (first screen, second screen, last screen):

One final note. The code in this tutorial should be used a sample or starting point. The code can be greatly optimized.