SAP Build Apps VCF advanced data access capabilities: sorting, filtering and paging

SAP Build Apps provides the capability to create and deploy application backends. This capability is named Visual Cloud Functions (VCF) and here you can find a good documentation for this feature.

The VCF capability can be used for designing and deploying into your SAP Business Technology Platform (BTP) subaccount a data model that can be filled with your data and than accessed by the applications developed with SAP Build Apps, for retrieving, editing and saving data.

In the article of today, I’ll explain how data stored into a VCF backend can be accessed using the capabilities provided that allows the developer to perform sorting, filtering and paging activities.

For the purpose of writing this article, I implemented a simple VCF backend that stores some basic information about cars: a description, including brand & model, the engine type and the power:

After the design and the deployment of the VCF backend, I loaded some data, using the approach I described in a previous article.

And then I started developing an application, named CarExplorer, that consumes the data stored into the VCF backend.

The application is supposed to load data from the backend and to display a list of cars in its graphical user interface.

After creating a new SAP Build Apps project from the lobby, at first we need to define a connection to the backend. This blog post explains how to complete this task (please see the Enabling the Backend from the UI section).

The next step consist in the definition of a Data Variable, named Car, for storing the information retrieved from the VCF backend, as a collection of records

Please notice that, when the Data Variable is defined, SAP Build Apps automatically generates the access logic for retrieving all the data when the initial page is loaded.

Now we can easily display all the data, just adding to the initial page of our app a Card and configuring it for repeating with the Car variable and showing the basic information.

For the Content property, I used the following formula:

"Engine type: " + repeated.current.engineType + "   Power: " + repeated.current.power + " HP"

Now you can just run the app in the preview and look at the cars that are displayed:

As you can see, the list of cars is not sorted and you need to slide down to browse all the cars. In addition, the list contains all the cars we have in the backend. When accessing a backend that contains hundreds (or thousands) record, the app probably won’t work, because the system is not able to allocate to a single variable, all the memory required to store all those records.

Here it’s time to start exploring the advanced access capabilities, in order to make our application user friendly and also able to work with whatever number of records are stored into the backend. Using those capabilities you’ll be able to access backends that contains many data and to filter and sort those data based on your requirements.

Sorting

The first capability I want to explore is the Sorting. Thanks to that capability, you’ll be able to sort your list on one or more criteria.

Setting the sorting criteria is very easy: you just need to come back to the Data Variable definition screen and select the Ordering property:

This property should be bound to a List of Values:

and then you can add your preferred sorting options:

In this case I decided to sort my car list by Brand/Model in the ascending order. Just running again the app in the preview, you’ll see that now the list appears to be sorted.

You can make your sort criteria more sophisticated using formulas and involving other components of you application. Just as an example, I added to my screen a check box for selecting an alternative sort criteria (by Power) and I defined a boolean variable (sortByPower) bound to that object. Then I changed the Ordering property of the Car Data variable, binding it to a formula, instead of a list:

IF(pageVars.sortByPower, [{property: ["power"], direction: "asc"}], [{property: ["brandModel"], direction: "asc"}] )

Now when previewing the application, checking and unchecking the box changes dynamically the sort order by Power or Brand/Model.

Filtering

The filtering capability allows you to extract from the backend only the records that satisfy your selection criteria.

In order to implement record filtering, in the Data Variable definition page you need to set the Filter condition property:

and to bind it to an Object with properties:

Then you can add your filtering criteria.

For providing an example, I added to my application a Search Bar and I’ve bound it to a variable named searchFor. Now I can use it for defining a filtering criteria:

Also in this case, you can make your filtering criteria more flexible just using a formula instead of an object binding:

{type: "and", conditions: [{type: "contains", property: ["brandModel"], value: pageVars.searchFor}]}

After doing that, when previewing your application, you can type a text into the search box and only the Brand/Models containing that string will be extracted from the VCF and displayed in your app.

Paging

The Paging capability is very useful when accessing backends containing many records: it allows you to read only a page of records of a given size, making simple to display the information and avoiding to allocate too much memory to the Data Variable used to store the records.

The Paging capability can be configured from the Data Variable definition page and setting the Paging property as a binding to an Object with properties, in the same way we did for the Filtering.

After doing that, we can setup the paging options:

We can left unchanged the Basis for the pagination property.

The Page size should be set with the number of records we want to read for each page

The Page number should be set with with the number of the page we want to read.

The Include total count property should be set to True, binding it to a Static true/false value. When enabled, every time a read activity is performed, the total number of records available in the backend (and that eventually satisfies the filtering criteria) is calculated. This can be used for implementing the paging logic, as I’m about to explain.

First of all, let’s define two App Variables:

Variable Name: pageNumber

Variable Type: Number

This variable contains the number of the page to be read. We can bind this variable in the Paging binding screen. In the same page I’m setting to 5 the page size.

The next variable:

Variable Name: numberOfPages

Variable Type: Number

This variable contains the total number of pages to be navigated and must be calculated using the  totalCount mentioned before.

Then we need to change the logic of the Data Variable:

At the beginning we set the pageNumber variable to 1. At the end we set the numberOfPages variable using the formula:

INTEGER(outputs["Get record collection"].totalCount/5) + 1 

In this formula, I’ve put the number 5 because I decided to set that page size. If you want to set a different page size, you need to change also the formula.

For moving back and forth between pages, we can add two buttons at the bottom of our application:

The logic for the two buttons is very simple: each time the Next button is clicked, the value of the variable pageNumber must be increased by 1. And each time the Prev button is clicked, the value of the variable must be decresed by 1. This can be easily done adding to the logic of the buttons a Set App Variable block for modifying the value of the pageNumber variable using these formulas:

appVars.pageNumber + 1

for the Next button and:

appVars.pageNumber - 1

for the Prev button.

But our app is not yet completed: we need to avoid that, when we get the last page, the Next button is pushed again and again, setting the pageNumber variable to a value that does not correspond to an existing page. And, at the same time, we need to avoid that when we’re displaying the first page, clicking on the Prev button sets the pageNumber variable to 0 and below.

This can be achieved disabling the Next button when the last page is displayed: the Disabled property of the Next button must be bound to the formula:

appVars.pageNumber == appVars.numberOfPages

(Here is when the numberOfPages variable we defined before becomes relevant).

And then we can disable the Prev button when the first page is displayed, binding its Disabled property to the formula:

appVars.pageNumber == 1

We can also add at the bottom of the page a text box that provides information about the current page number and the the total number of pages. Here the formula I used for the content of that Text box:

"Pag. " + appVars.pageNumber + "/" + appVars.numberOfPages

Now our app is finished: we can browse the list of cars extracted from the VCF backend, setting different sort criteria (by Brand/Model or by Power), using the search bar for extracting only the records that match our search criteria and using the Prev and the Next buttons to navigate back and forth between the pages. The total number of pages displayed at the bottom of the page will change dynamically depending on the number of records that match the search criteria.

After reading this article you’ll be able to access data in your VCF backend, using the Sorting, Filtering and Paging capabilities, and then making your apps more user friendly and accessible.

And that’s all for today!  Now you can continue to follow the SAP Build Apps environment Topic page (https://community.sap.com/topics/build-apps), post and answer questions (https://answers.sap.com/tags/6cfd8176-04ae-4548-8f38-158456e1a47a), and read other posts on the topic (https://blogs.sap.com/tags/6cfd8176-04ae-4548-8f38-158456e1a47a/).

Have a good time with SAP Build Apps! And please continue following my profile for new blogs and let me have your feedbacks.