Skip to Content
Product Information
Author's profile photo Murali Shanmugham

Handling OData Pagination in SAP AppGyver

With the support for SAP BTP destinations in SAP AppGyver, it is now easier to connect with any OData services which have been configured within SAP BTP. My colleague Daniel Wroblewski had earlier posted a blog “My first steps with BTP destinations (S/4HANA) in AppGyver” which explains the steps to follow to setup BTP destinations and use them within SAP AppGyver.  I had a customer who asked me to show how to use pagination concepts of OData when dealing with large datasets and how to incorporate that into SAP AppGyver. In this blog post, I would like to share my experience on how to use Pagination concepts when creating an application which would help improve the response time and provide a much better user experience.

For demonstration, I have setup my on-premise S/4HANA system and exposed it to SAP BTP via SAP Cloud Connector. Within the BTP destinations, I have created a new entry similar to the steps as shared in the above blog post.

Within AppGyver, you can connect to this S/4HANA OData endpoint and select the relevant entity. For demonstration, I have selected the Supplier entity available in the Business Partner OData API

For the UI, I have created one page which contains a List with two buttons to control the pagination.

In the Variables view, I have created two variables – One to store the pageNumber (default value is 1) and another to store the total number of records (default value is zero) for the Suppliers entityset.

I have also declared a data variable to store collection of data records. To avoid making any API calls by default, I have removed all the flow logic below. I prefer to make API calls from the page.

In the page flow logic, I am making two calls. The first one is to get the total number of record and storing them in the respective variable. This is currently required as there is a bug in the “Get Record Collection”.  When drafting this blog post, the output node “Total Count” was not working and hence I am using this workaround. Please check if this works when you are trying to work with Total Count.

The second call is to populate the data variable. For the “Get Record Collection”, I have set the paging properties.

I have set the page size as 10 and assigned page number to the variable created earlier.

Saving the application and previewing it would display the first 10 records.

For the pagination to work, we need to set the configuration every time a user clicks on the PREV and NEXT button. We also would need to hide the PREV button when the user is viewing the first 10 records and hide the NEXT button when viewing the last set of records.

PREVIOUS Button Logic:

To hide this button at the start, I have assigned the below formula to the visible property in the properties tab of this button.

In the flow logic for the button, I have performed the below steps:

  • Set the value of the pageNumber variable (by subtracting 1)
  • Make an OData call for the suppliers (setting the pagination objects as shown earlier)
  • Set the value of the data variable (using output value of another node > Get Record Collection)

NEXT Button Logic:

To hide this button at the end, I’ve assigned the below formula to the visible property in the properties tab of this button.

In the flow logic for the button, I’ve performed the below steps:

  • Set the value of the pageNumber variable (by adding 1)
  • Make an OData call for the suppliers (setting the pagination objects as shown earlier)
  • Set the value of the data variable (using output value of another node > Get Record Collection)

This should now add the pagination capabilities to the app and enable the user to retrieve supplier information in the block of 10 records.

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.