Handling OData Pagination in SAP AppGyver

[Murali_Shanmu]

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.

[SergioG_TX]

thanks for the blog Murali. It is easy to read and implement.

Have you had to use an odata navigation (from main entity to an association) - AppGyver does not show the  to_ChildEntity value and I am trying to use that navigation to show the dependent object details in the secondary page after navigation.

[SergioG_TX]

spoke too soon... when setting up the base URL... if I scroll down, there is a switch control to enable the expand navigation!

[Darius]

Thanks for the blog, I got the total count work in the formula when setting it to true in the paging settings:

[BillGiotDel]

Hi Darius,

 

could you share with us how you did this, please?

 

Kind regards,

Bill Giot

[Darius]

Hi Giot, you can see this step-by-step in my exercises for SAP Business One:

https://dam.sap.com/mac/u/v/WaXhif4.htm?rc=10

See the OData Pagination chapter.

Best regards,
Darius

[ayushpattnaik]

Helpful

[ayushpattnaik]

Did the formula total count not work if we set this to false?

[Summitt12]

Great blog

We followed the blog but not able to add filter and URL parameter 

Also posted here

https://community.sap.com/t5/sap-builders-discussions/build-apps-basic-tbale-with-data-adapter-page-...

Anyone has been able to achieve filteration and url parameter in S4 API in Build Apps

Hppe SAP Build team will publish a blog using "Basic Table with Data Adaptor"

Cheers