Shulou(Shulou.com)06/02 Report--

This article mainly explains "List in SAP Fiori is how to load Lazy Load". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "List in SAP Fiori is how to load Lazy Load"!

Problem: The list in the S/4HANA Fiori app, once Scroll to the bottom, automatically initiates a new request to the background to read more data to the foreground display.

Take Product Master as an example. After I click Search, the results area shows that there are 140 products in the current system, but only the first 25 are returned and displayed in the browser.

This pagination effect is implemented by the UI5 OData parameter: $skip=0&top=25.

The total of 140 is achieved by the parameter $inlinecount, which is similar to SELECT COUNT(*) of ABAP Open SQL.

From Chrome Developer Tools, you can observe the payloads of the first 25 products:

When scrolling to the bottom of the list, the second batch of 25 products is read from the background and displayed in the foreground:

The http request parameter: $skip=25&top=25, used to read from the 25th to the 50th product.

It is clear from the call stack that the scroll event triggers the second batch of product reads.

Then go to GrowingEnablement.requestNewPage and find an attribute_iLimit that maintains a start index. Every time the scroll to the bottom event is triggered, the attribute value will be accumulated by GrowingThreshold. Because API this._ oControl.getGrowingThreshold returns a constant of 25 each time, so the value of_iLimit looks like this each time it scrolls to the bottom: 25,50,75,100... These values are used to pass to the background as the HTTP request parameter $skip:

My colleague's question: growingThreshold is hardcoded to 20 in sap.m.ListBase.js, but where is it rewritten to 25 at runtime?

To answer this question, you need to know some knowledge of UI5 Smart Template, because the Fiori application of Product Master in this example is also based on Smart Template. See my blog My understanding about how object pages in Smart Template are rendered to understand how it works.

When the UI Component of the Product Master app is loaded and rendered immediately, you need to load the Smart Template library file first:

As mentioned in my blog My understanding about how object page in Smart Template is rendered, ListReport.view.xml contains several view fragment declarations, each of which points to some other Smart Template library file.

List of these library files:

Looking at the library file SmartTable.fragment.xml loaded in the background from ABAP in Chrome Developer Tools, you can see that the attribute growingThreshold is hardcoded to 25 here.

When SmartTable.fragment.xml is loaded, its contents are parsed and growingThreshold value of 25 is written to the control properties via the control setter API. So the next scroll event that handles the list is 25, which is returned by the control's getter API and accumulated to_iLimit.

For more information on how XML views are parsed and generated into UI5 controls after loading from ABAP background into browsers, please refer to my blog Why my formatter does not work? A trouble shooting example to know how it works

Maybe you followed the steps I described above, but you couldn't trigger the breakpoint. The reason is because UI5 framework designs a caching mechanism for XML views of Fiori applications based on Smart Template development. When the XML view to be rendered already exists in the cache, the library file of Smart Template will not be loaded in the background of ABAP, but the IF branch of line 428 will be executed directly.

Through debugging we can see that cache is implemented by IndexedDB plus LRU(Least recently used) algorithm.

Chrome Developer Tools can observe that the view to be rendered has been recorded and stored in IndexedDB:

If you want to watch the Smart Template library file load, click Delete database to clear the cache manually.

After the cache is cleared, you can observe the expected Smart Template library file loading.

At this point, I believe everyone has a deeper understanding of "how the List in SAP Fiori is lazy to load Lazy Load." Let's do it in practice! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.