In this blog, we will discuss why pagination is essential and how you can successfully implement it in the Visual Builder Studio. Let’s start with the problem.
The Problem
How to implement Pagination in VBCS?
The Solution
First drag & drop table components in the required page, after dropping the table, insert required data into the table using SDP(ServiceDataProvider). SDP(ServiceDataProvider) is a variable created using the required endpoint.
There is one Property available in the table component, to achieve this requirement, scroll-policy=”loadMoreOnScroll” is used. Here in this tutorial we will explain to you how to achieve this requirement.
This together with a ServiceDataProvider that is based on a REST service correctly pass the limit and offset parameters to the REST service your table is based on.
Step 1: Create a variable type from the required End point and give the variable type required name.
Step 2: Create a variable and select type as SERVICE DATA PROVIDER (SDP).
For the Current SDP, in the property section click on Select the endpoint and choose the variable type created in step 1.
Step 3: On the required table, set your SDP variable in the Data section as hlighted below.
Choose the required column like Job Title, Company and Status.
Step 4: Under the All property section, set Scroll Policy as loadMoreOnScroll
Step 5: To choose a different .js file, click the Source dropdown and select the file or select Create to create a new .js file, choosing the functions you want to override. The Create Transforms dialog displays.
Step 6: Click File name and enter a new .js file name.
The Base transform dropdown shows the file that supplies the base code for all of your transform functions.
In Override functions, select the function(s) you want to add to the newly created transforms file. Functions that you don’t select won’t be added to the transforms file.
The Result
Count: Total Number of items(rows) returned.
hasMore: hasMore = true when more data(rows) is to be returned and hasMore = false When all the data(rows) is returned.
Limit: determines end point.
Offset: determines starting point.
We hope you liked the blog on pagination in VBCS. If you have any queries or concern, please write to us at [email protected].
You might also like: How to Implement Version Control Using Visual Builder Studio
