Implement pagination for the REST service in Oracle Visual Builder.

In this article, I am demonstrating how to Implement pagination for the REST service in Oracle Visual Builder.

A table is one of the useful components in Oracle Visual Builder that allows the listing of data(Employees, Invoices, Clients, etc.). The table component in Oracle Visual Builder (VBCS) can be populated in three ways.

Service Data Provider (SDP)
Array Data Provider (ADP)
Multi-Service Data Provider (MSDP)

Here in this article, I am using Array Data Provider (ADP) to populate the table data and explain how to add pagination to Rest service.

Following are the steps to complete this use case:

Develop a VB Application by entering the application name and choosing the Redwood Starter Template from the available options as shown in the following screenshot:

2. When crafting a VB application utilizing the Redwood Starter Application template, it generates a ‘vbredwoodapp’ with the default flow set to ‘main’.

3. Click on +icon beside the main and select Create Page as shown in the following screenshot:4. A dialog box will prompt us to input the page ID. Upon scrolling to the bottom, we’ll encounter the Welcome Page template. Select it and click on the Create button as shown in the following screenshot:
5. Now click on main flow, switch to the settings tab, and change the default page from main-start to main-paginate as shown in the following screenshot:
6. Before we start with the UI let’s create an Employee business object, create the required fields, and add data to it.

7. Before we create a table, navigate to Types in the navigation tab of the main-paginate page, click on +Types, and select From Endpoint.

This will open a popup with all the available BOs, service connections, and Process Objects. As we are using BO, expand Business Objects, click on Employees BO select GET Employees/Employees_Id endpoint, and click on the Next button as shown in the following screenshot:

8. Select the fields from the response that we wish to show in the table and click on the Finish button.
9. Go to the Variables tab, click on + Variable, and create variables as follows:
1. offset – type (Number) – default value (0)
2. limit – type (Number) – default value( 25)
3. hasMore – type(Boolean) – default Value (false)
4. EmpADP -type(ADP) – Item Type(EmployeesType)-Key Attributes(id)
as shown in the following screenshot:

10. Now we need to create an Action chain to fetch employees. Switch to Action chains and click on +Action chain as shown in the following screenshot:
Enter the ID for the action chain and click on the Create button as shown in the following screenshot:

11. Go to the FetchEmployees action chain, and add call Rest action as shown in the following screenshot:

Select the GET /Employees BO endpoint from the Employees BO and click on the Select button.

12. In call Rest Action we have Input Params where we need to give the limit and offset to fetch data of our choice. For that, we need to click on Assign beside the Input Params and this will open the mapper to assign the variable.
Map the variables limit and offset to the Input prams limit and offset and click on the save button as shown in the following screenshot:

13. Drag and drop Assign Variable action after call rest action and assign the rest response to the EmpADP data and the hasMore from response to the hasMore Variable as shown in the following screenshot:

14. Now Switch to Event Listeners and create a VB enter event to tag the FetchEmpoyees action to it.

15. Now To start on our UI, Go to Page Designer and enter the Page title and Description(optional) as shown in the following screenshot:

16. Drag and drop the Table, and Two buttons from the component pallet to the Design area and arrange them as shown in the following screenshot:

17. In Table properties add the EmpADP in data and select columns you wish to show on UI as shown in the following screenshot:
18. Now rename the buttons as Previous and Next.

We need to add action chains for both buttons to assign the limit and offset values to pass it to the rest service.

Let’s start with Next button and in the properties of the Next button add an ojAction as shown in the following screenshot:

19. In the `NextBtnAction`, we should verify whether the `hasMore` variable is currently `true`. If it is, we need to update the offset to retrieve the next set of data and then invoke the `FetchEmployees` action chain, as illustrated in the screenshot below:

20. Similarly, create an action chain for the Previous button. In this action chain, we will check if the offset value is greater than 0. If it is, we can decrease the offset from limit and trigger the `FetchEmployees` action chain, as shown in the following screenshot:

With this, we are done with implementing the pagination to rest service in Oracle Visual Builder and the final output would be as shown in the following screenshot:
If you liked the article, please like, comment, and share.