Technical Articles
How to filter data in SAP Build Apps using record collection
As we are all aware, SAP AppGyver has greatly accelerated application building through its drag-and-drop feature, which enables us to incorporate our oData services either via BTP destination (as thoroughly explained by Daniel Wroblewski) or by utilizing a direct oData URL. In this blog, our focus will be on the process of adding SAP AppGyver classic data entities and making them accessible through record collection, simplifying their binding to lists or items. Furthermore, we will showcase how to execute oData queries within the record collection, encompassing tasks such as filtering, ordering, and searching data to meet specific requirements.For our demo app , I will be using Northwind oData V4 as a source and Customers as an entity.
you can also refer to previous blog where I have performed filtering using formula in AppGyver.
How to use filters in SAP AppGyver
Solution
Add Data Source
To add our Data source in AppGyver we need to add classic data entity. For that we need to click on create data entity and select OData integration as per below figure.
Figure 1: Create data entity
Figure 2: Provide OData url and select your entity
You can do a test run to verify your data.
Figure 3: Test run to verify your data
Now click on ‘Save data resources‘. We have successfully created a Data resource for our application. now it’s time to bind it our list and see the data.
Filtering
For filtering we need to create a custom list using container. Now switch to View and create a custom card using drag and drop.
Figure 4: Create card using data variable
For data load we will pull customer record using Get collection record into flow logic. Once data is loaded we are going to store them in a Page variable and use it in our custom list. I have already created a page variable name CustomerList with two properties for this example.
Figure 5: Create page variable
Figure 6: Store data into page variable
Bind your fields with current item.
Figure 7: Bind fields
Now save your app and see the preview. It will look like this.
Figure 8: Data preview
Till here we learned how to bind your OData to your list and show the values. Now our next step is filter the list based on selected values. For that I will create a selection field for city and apply filter on our data variable.
Figure 9: City selection
Now we have to create a Page variable to save selected city and assign it to record collection filter.
Figure 10: Page variable creation
Now go back to Flow logic and add Filter condition under Get record selection. Here I am assigning filter condition as City equal to PV_CITY which is my page variable.
Figure 11: Filter condition
Now save and run your application.
Figure 12: OData filter preview
Ordering
To get the list in ascending or descending order click on Ordering in Get record collection and add below condition. As we were already getting the filtered value in ascending order we are setting the sort direction to descending order.
Figure 13: Sort condition
Now save and preview application.
Figure 14: Sorting preview
Search
It is very starlight forward and easy to use search in AppGyver. First we will add a search box in our UI and then assign its value to a text variable PV_SEARCH. Now we need to bind it with Get record collection.
Figure 15: Search query
Now save and run the application.
Figure 16: Search query preview
Conclusion
Now we can perform Filter, Sort and search in using oData. For pagination you can refer below url where it has been explained already in detail.
Handling oData pagination in AppGyver
For more informtaion you can check these links too.
Thanks for the plug, and great blog 😺
Thanks Daniel for the Appreciation. Trying to learn and improve more after reading your blogs.