Performant table list in SAP Build Apps

[merituulimelkko]

Managing and displaying large amounts of data in an application tends to require a lot of consideration, as it is easy to make performance suffer. I recently built a very performant list page for a S/4 HANA Cloud endpoint with 65k+ records using SAP Build Apps which will become available in a template later on, but meanwhile I wanted to share with you my solution so you can already adopt it in your SAP Build Apps application, if you are having performance issues in your list view.

The list page I created has a table type list with sorting, filtering and paging.

Preview of the performance of the table list I created

The main secrets of its great performance are:

1. When page mounts, it begins to load 50 first items from the database to have something to display while it loads all of the items in the background.
2. Even when all data is loaded, only 50 items are shown by default, unless the user goes to show the next 50 items, in which case 100 items are shown, and so forth. The way this is done is important – there is a separate data variable that only contains the items shown (BusinessPartnersFiltered). The sorting and filtering is also done into this data variable from the data variable that contains all the data (A_BusinessPartners1).

The core of this logic is placed on the page's logic canvas. The main logic for loading the data happens when the page is mounted, but there are events for when the user wants to see more data (but all data has not loaded yet) and when the data on the page needs sorting/filtering.

Logic of the list page

The page variables and their purposes are the following:

• dataLoadFail and dataLoadSuccess if the fetching of the full data has failed or succeeded, some logic is run differently, e.g. the "Show more" button will not trigger fetching the next 50 items if all data has already been loaded.
• showSpinner and showFilterSpinner show spinners in the UI, and block some logic from running by disabling buttons etc.
• columns list contains the columns, their titles, order and the name of the fields. I use this page variable to avoid needing to change multiple places if I want to change which columns are displayed, or if I would want to change columns dynamically.
• pageIndex, pageSize, searchQuery, sortBy and sortDirection are used for the implementation of paging, filtering and sorting by column.

As for the logic with which the items from the list containing all the items into the filtered list that is used in the list, I concocted the following formula:

SLICE(ORDER(IF(!IS_EMPTY(pageVars.searchQuery), SELECT<partner>(data.A_BusinessPartner1, SOME<column>(pageVars.columns, CONTAINS(LOWERCASE(ENCODE_JSON(LOOKUP(partner, column.fieldName))), LOWERCASE(pageVars.searchQuery)))), data.A_BusinessPartner1), IF(!IS_EMPTY(pageVars.sortBy), ENCODE_JSON(LOOKUP(item, pageVars.sortBy)), index), pageVars.sortDirection), 0, pageVars.pageSize)

This formula first figures out if there is a filter used (= searchQuery is something other than empty), and if yes, it only selects the items from the master list that contain the search query in one of the fields used in the columns. If no, the full master list goes into the next stage. In the next stage it checks if there is a column to sort by (= sortBy is something other than empty), and sorts the filtered master list based on this field into the desired sortDirection. After that the page is cut into size, which is usually 50, unless the user has pressed the Show more button.

There are many additional small details that make me proud of this particular list page, but this concludes the main ones that contribute towards its great performance. If you have any further questions about creating table lists in SAP Build Apps, please comment below.