Infinite Scrolling
Constellation Table supports “infinite scrolling” as a UI design approach when the data source is a Report Definition or a REST API (that supports pagination). As the user scrolls down, the table automatically loads additional content from the data source. This allows the user to explore a large amount of data without having to fetch all content in one shot.
There is additional configuration required when the data source is a REST API. The purpose of this guide is to provide all the steps required.
REST API Pagination
It’s important to note that infinite scrolling in Constellation Table works only with REST APIs that supports pagination. REST API pagination is a technique that allows you to segment the endpoint’s response into smaller more manageable units.
The two most common types of REST API pagination you will see are:
- Offset pagination, which uses two parameters, offset and limit, to describe the data segment to fetch
GET /api/v3/objects/contacts?limit=10&offset=20
- Page-based pagination, which uses two parameters, page and pagesize, to describe the data segment to fetch
GET /api/articles?page=3&pageSize=10
Constellation Table supports both types of pagination and potentially other less known techniques as well. We’ll see in the later section how we Constellation Table ultimately “communicates” with the REST API to fetch the next set of content.
End-to-end Overview
To start with, let’s use a sequence diagram to understand how it works end-to-end.
On the far left-hand side, Constellation Table runs in the browser and communicates with Pega Infinity server via DX API. Based on the user’s scrolling, Constellation Table determines how much more data to load by sending pagination information to DX API. In the example shown in the diagram, Constellation Table has requested the first page (pageNumber: 1) and 20 items in that page (pageSize: 20).
On the far right-hand side, Pega Infinity access the REST API with pagination parameters: offset=0&limit=20.
In the middle, we configure a Data Page and REST Connector for the REST API. The critical part of the configuration is in Request Data Transform where we translate pagination information from DX API into specific pagination parameters for the REST API.
Configuration Steps
We are going to describe each step to configure infinite scrolling in a Constellation Table that can progressively display Pokemon information. PokeAPI is available from https://pokeapi.co/
Step 1: Configuring REST Connector
The first step is to build a REST Connector to PokeAPI at https://pokeapi.co/. The exact steps on creating a standard REST connector is well documented and can be found on https://academy.pega.com/challenge/creating-rest-integration-interface/v6.
Pagination for PokeAPI is implemented using offset pagination with the following query parameters: offset and limit
An example of fetching first page: https://pokeapi.co/api/v2/pokemon?offset=0&limit=20”
An example of fetching second page: https://pokeapi.co/api/v2/pokemon?offset=20&limit=20”
A screenshot of the PokeAPI documentation is shown below:
Step 1.1 Enable Advanced Query Options
The purpose of this step is to prepare the REST Connector for pagination.
The Connect REST rule needs to have “This endpoint supports advanced query options” enabled to support pagination as shown below:
This is documented in https://docs.pega.com/bundle/platform-241/page/platform/data-integration/creating-connect-rest-rule.html
Step 1.2 Configure Offset Pagination Query Parameters
PokeAPI’s offset pagination query parameters need to be configured on the GET request.
The limit and offset values needto be dynamic so they can be mapped in the request data transform in Step 1.3.
In your specifical REST API, pagination can be implemented differently and the parameters could have different names and meaning.
Step 1.3 Pagination Instruction Data Mapping
This step converts pagination instructions from the Constellation Table into pagination query parameters for the PokeAPI.
You would create a data transform in the integration class as describe in https://docs.pega.com/bundle/platform-241/page/platform/data-integration/data-transforms-queryable.html
The data transform needs to define QueryPage in Pages&Classes
QueryPage, being an instance of class Pega-API-DataExploration-Request, stores pagination instructions from Constellation Table, i.e. pageNumber and pageSize.
In the main configuration of the request data transform, we have to configure the following:
- The table page number is stored in QueryPage.paging.pageNumber
- The table page size is stored in QueryPage.paging.pageSize
- In step 4, we calculate .request.query_GET.limit for the REST API
- In step 5, we calculate .request.query_GET.offset for the REST API
Step 2: Configure Data Model
As part of standard Constellation architecture, we have to create a data model to represent the entities we want to show in a Table .
The steps of this are well known so we will not go into any detail here.
Step 3: Configure List Data Page
As per Constellation architecture, you need a List Data Page with the REST Connector as the Source. The steps of this are well known so we will not go into any detail here.
Step 3.1 Enable List Data Page options
In the List Data Page, the following options need to be enabled:
- Allow querying any column
- Support paging
- Page size (optional)
Step 4: Configure Record Lookup Data Page
As per Constellation architecture, you need a Record Lookup Data Page in order to use the data model as a data reference.
The steps of this are well known so we will not go into any detail here.
Step 5: Configure View
The List Data Page must be specified in the Table View.
Debugging
Using Browser Developer Tools, we can see when the Table invokes the DX API.
In the Payload we can see paging information to make sure the correct pages are fetched.
Constellation 101 Series
Enjoyed this article? See more similar articles in Constellation 101 series.
