API SC Action - Pagination!

Wappler General How To
#1

Hey all,

Having a bit of a love affair with Wappler today, making great progress.

One thing I’m stuck on, is I have an API returning document data (JSON via ElasticSearch), the documents can be in the hundreds of thousands so naturally need to setup paging.

It’s been easy to setup the number of records to return in the JSON request, and they appear to have a fairly straight forward way of paging:

{
  "from": 5,
  "size": 20,
  "query": {
    "match": {
      "user.id": "kimchy"
    }
  }
}

What I’m stuck on - is that it looks like, and from posts on the forum that the paging generator in Wappler will not support custom API data, there was a post here that @Teodor helped out a user via private message but no other comments on the forum.

I thought I’d be able to use the paging generator, query manager with offset and the same data source as the repeat - but the pager just isn’t working.

I query the API currently via a form submit, so what I’m thinking of doing is a hidden field called ‘offset’ and create an event on a standard paging function - however, without this being connected to the API, it can’t really display to the end user how many pages exist.

Open to any suggestions if someone has paging working on an API.

#2

UPDATE:

I got this working, but with a basic PREVIOUS / NEXT combo.

This is how I have done this basic pagination, and if anyone can advise a more robust solution and/or even working with the Wappler pagination generator - I’m all ears!

Steps:

  1. Create variable set default number to 0
  2. Create new hidden form input - set the dynamic value as the variable value.
  3. Add pagination buttons
  4. Add on-click events to both NEXT and PREVIOUS - set the variable as Current Variable Value + 20 (or the page results number).
  5. On the value - set a dynamic event on value change - resubmit form.
  6. In my JSON request I replace the offset variable (that is default to my API endpoint) to the $POST field input.

That’s it. I’ll continue optimizing this - and trying to find a way to accumulate actual page numbers and/or use Wapplers pagination - but hopefully the above helps for anyone returning large volumes of data from an API.