SAP Fiori里的List是如何做到懒加载Lazy load的

今天一同事问我这个问题：S/4HANA Fiori应用里的列表，一旦Scroll到底部就会自动向后台发起新的请求把更多的数据读取到前台显示。

以Product Master这个应用为例，我点击搜索之后，结果区域显示当前系统一共有140个product，但是只有前25个返回并显示在浏览器里。

这个分页效果是UI5 OData的参数实现的：$skip=0&top=25。

而总数140，是通过参数$inlinecount实现，其原理和ABAP Open SQL的SELECT COUNT(*)类似。

从Chrome开发者工具能观察到头25个product的payload：

当将列表滚动至底部时，第二批共25个product从后台读取出来，显示在前台：

这个http请求的参数：$skip=25&top=25，用于读取从第25个到第50个product。

从调用栈能清楚发现是scroll这个事件触发的第二批product的读取动作。

然后再去GrowingEnablement.requestNewPage这一个调用栈，发现一个属性_iLimit维护了一个开始索引，每次scroll到底部的事件触发之后，该属性值都会被GrowingThreshold累加。因为API this._oControl.getGrowingThreshold每次返回的是一个常量25, 因此_iLimit的值每次scroll到底部之后看起来是这样的：25,50,75,100 … 这些值会被用来作为HTTP请求参数$skip的值传到后台：

我同事的问题：growingThreshold在文件sap.m.ListBase.js里被硬编码成20, 但是运行时在何处被改写成了25？

要回答这个问题，需要了解一些UI5 Smart Template的知识，因为例子里这个Product Master的Fiori应用，也是基于Smart Template开发的。可以参考我的博客My understanding about how object page in Smart Template is rendered 来了解其工作原理。

当Product Master这个应用的UI Component被加载并马上开始渲染时，需要先加载Smart Template的库文件:

在我博客My understanding about how object page in Smart Template is rendered 提到，ListReport.view.xml这个文件里有若干view fragment的声明，每个声明指向了一些其他的Smart Template库文件。

这些库文件一览：

在Chrome开发者工具查看从ABAP后台加载的库文件SmartTable.fragment.xml，能发现属性growingThreshold在此处被硬编码成25。

当SmartTable.fragment.xml被加载之后其内容会被解析， growingThreshold值为25，会通过控件的setter API写入到控件属性里。这样接下来在处理列表的scroll事件是，25这个值就会通过控件的getter API返回并累加到_iLimit上。

关于XML view从ABAP后台加载到浏览器后是如何被解析并生成对应的UI5控件，可以参考我的博客Why my formatter does not work? A trouble shooting example to know how it works

也许您按照我上面描述的步骤操作，但是无法触发断点。原因是因为UI5框架针对基于Smart Template开发的Fiori应用的XML view设计了一套缓存机制。当待渲染的XML view已经在缓存中存在时，不会去ABAP后台加载Smart Template的库文件, 而是直接执行第428行的IF分支。

通过调试我们可以发现缓存是通过IndexedDB加上LRU(Least recently used)算法实现的。

通过Chrome开发者工具可以观察到待渲染的view已经有记录存储在IndexedDB里了：

如果想观察Smart Template库文件的加载，需点击"Delete database"以手动清除缓存。

缓存清除完毕后，即可观察到期望中的Smart Template库文件加载。

这篇文章介绍了如何通过调试找到同事提出问题的答案。我把它加在了我UI5调试文章分享的合集里：My UI5 debugging tips and experience collection - how to resolve UI5 issues through debugging by yourself

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙":

SAP Fiori里的List是如何做到懒加载Lazy load的相关推荐

SAP Commerce Cloud (电商云) UI 的懒加载功能
最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的问题,这里把自己学到的东西做个记录. UI 懒加载,有时又称惰性加载,延迟加载,是 ...
SAP CRM WebClient UI和Hybris Commerce的懒加载机制
在WebUI里,如果不勾上assignment的Display Expanded, 在runtime时就不会有到后台取assignment block数据的roundtrip. 在Hybris ser ...
深入学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制
本文是深入学习SAP UI5框架代码系列的第二篇文章. 系列目录 SAP UI5应用开发人员了解UI5框架代码的意义 UI5 module懒加载机制 UI5 控件渲染机制 HTML原生事件 VS SA ...
webbrowser控件加载为空白_深入学习SAP UI5框架代码系列之一：UI5 Module的懒加载机制...
本文是深入学习SAP UI5框架代码系列的第二篇文章. 系列目录 SAP UI5应用开发人员了解UI5框架代码的意义 UI5 module懒加载机制 UI5 控件渲染机制 HTML原生事件 VS SA ...
SAP Spartacus 懒加载 Customized CMS Component 的问题
Lazy-loaded overriden or custom CMS Components SAP Spartacus 有两种 lazy load 方式: CMS-driven lazy loadi ...
SAP Fiori里的Adapt UI按钮，神出鬼没的奥秘
今天是2020年2月2日鼠年大年初九,这是Jerry鼠年的第9篇文章,也是汪子熙公众号总共第208篇原创文章. 这几天大家在家一日游的感觉如何? 工作中Jerry的同事曾经问过我一个问题,Fiori界 ...
SAP Spartacus CMS Component的lazy loading懒加载方式
代码如下: ConfigModule.withConfig({cmsComponents: {SimpleResponsiveBannerComponent: {component: () => ...
SAP 电商云 Spartacus UI Component 级别的延迟加载实现(Lazy Load)
注:Spartacus 推荐客户尽量使用 feature 级别的 lazy load,而非 Component 级别的 lazy load. 后者的具体实现步骤: app 文件夹下新建一个 cms-c ...
SAP Spartacus B2B Org Unit树状结构的加载机制
list.service.ts里的pagination作为出发点: 我在unit list service里设置一个断点,停下来就行了? 事实证明不行,看来要在effect里设置断点才行.在load里 ...

SAP Fiori里的List是如何做到懒加载Lazy load的

SAP Fiori里的List是如何做到懒加载Lazy load的相关推荐

最新文章

热门文章