Today my colleague asks me one question: it could be observed in S/4HANA Fiori application for example in Product Master application,
Once search button is pressed, by default the first 25 products among totally found 140 are displayed in search result.
This is due to the OData request sent with option $skip=0&$top=25, so only 25 records are fetched from backend. $inlinecount works like SELECT COUNT(*) in ABAP Open SQL to return the total number of matched records.
We can check from Chrome development tool that there are indeed only 25 records returned for the http request displayed in above screenshot.
When you scroll down the search result view to the bottom,
another http request is sent automatically with option $skip=25&$top=25 to retrieve the records starting from index 26 to 50.
Hover mouse to abap.js which sends this http request, the callstack clearly shows that the scroll event will trigger the automatic load of the second batch of 25 products from backend.
And go to GrowingEnablement.requestNewPage, there is a property _iLimit held internally and accumulated each time when "scroll to bottom and load more" event is fired. As this._oControl.getGrowingThreshold returns the constant value 25, so _iLimit looks like 0,25,50,75... and is used as parameter value for option $skip.
Question from my colleague: growingThreshold is hard coded as 20 in sap.m.ListBase.js, why it becomes as 25 in the runtime?
Well it takes me some time to find reason via debugging. As most of Fiori application in S/4HANA, Product Master application is also built on top of Smart Template.
You could refer to my blog My understanding about how object page in Smart Template is rendered about how Smart Template works under the hood.
When the UI component for Product Master Application is loaded and rendered, the template file sap/suite/ui/generic/template/ListReport/view/ListReport.view.xml is loaded:
As mentioned in my blog, inside this ListReport.view.xml there are some view fragment declaraiton which points to other template file which will be loaded in company with ListReport.view.xml.
Here they are:
And growingThreshold is hardcoded in SmartTable.fragment.xml as 25. This fragment view is used to render search result as a table in Product Master Application.
When SmartTable.fragment.xml is loaded and parsed, the growingThreshold is set as control property via setter API so that later it is returned by getter API in the "scroll to bottom and load more" scenario.
Regarding the mechanism about how XMLTemplateProcessor parses the xml view source and create UI control accordingly, please refer to my blog Why my formatter does not work? A trouble shooting example to know how it works
Last by not least, you might not get breakpoint triggered in Chrome even if you exactly follow my steps above. This is because there is a set of cache management logic introduced by UI5 framework for those application built on top of Smart Template:
If the application view to be rendered has already one entry in the cache, UI5 will NOT load Smart template related files from ABAP server any more( branch in line 428 ).
Via debugging I find out that the cache is managed by LRU algorithm using IndexedDB.
The whole merged xml source is already stored in IndexedDB, in this case you could never observe the Smart Template template files loading in Chrome development tool's network tab.
You have to manually clear the cache by pressing button "Delete database":
This will clean the cache and force the UI5 framework to reload template files from ABAP server.
I add this blog as part of my UI5 debugging collection blog: My UI5 debugging tips and experience collection - how to resolve UI5 issues through debugging by you...
Further reading
The knowledge introduced in this blog is a prerequisite to understand the search paging implementation in S/4HANA and CRM Fiori application.
- SAP Managed Tags:
1 Comment
