SAP Fiori Elements里的Smart Table工作原理解析
The appearance of smart table rendered looks like below:
The source code of this example could be found from this link.
How table related annotation is parsed and table columns are rendered
Unlike the previous three examples, the control instance of SmartTable now is not created dynamically by ODataControlFactory, but statically declared in xml view and created then by XMLTemplateProcessor after xml view is loaded and parsed:
When OData metadata is retrieved asynchronously, the event handler for this Metadata ready event belonging to the SmartTable instance created in previous above is called to create Table provider:
In this context, most of the properties come from the definition in XML view:
All the input parameters for table provider creation are listed below:
In function _intialiseMetadata, the five fields of entityType Product is parsed:
Pay attention that these fives fields are not final table columns rendered.
Instead, only those fields defined under annotation “com.sap.vocabularies.UI.v1.LineItem” would be rendered as table columns:
Then in _reBindTable function, we have already learned in Smart field with value help that this function will send an OData request to ask for table content:
Once executed, you could observe the response returned by Mock server from console and the table is now filled with data from Products.json.
How “currency” filter works
Since currency code is marked as filterable = true in metadata.xml,
<Property Name="CurrencyCode" Type="Edm.String" MaxLength="3"
sap:label="Currency" sap:semantics="currency-code" sap:filterable="true" />
so we could switch it on in “More Filters”:
Suppose we would like to filter by currency code = EUR.
Once we select the checkbox and click OK button:
Another OData request will be sent by FilterBar from sap.ui.comp.FilterBar:
The filter condition is defined in aFilters:
Again you could observe this filter request’ url and response in console tab:
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- SAP UI5 应用元数据文件 manifest.json 的加载和解析原理讲解试读版
- SAP UI5 应用 index.html 里引导 script 属性的解析原理
- SAP UI5 应用的 OData 元数据请求响应的解析原理分析
- SAP CRM 和 SAP Cloud for Customer 的表格列项目宽度调整的原理介绍
- SAP UI5 sap-ui-core.js的加载逻辑
- SAP CRM Fiori My task应用里roundtrip取舍的讨论
- SAP UI5 subscribe event实现原理
- SAP WebClient UI的会话重启原理
- SAP S4CRM和C4C的技术比较
- SAP BRF+ debugger工作原理
- 如何找到 SAP Fiori OData 服务实现的具体 backend 后台系统
- SAP 电商云 Spartacus UI Quick Order 对应的 CMS 内容
- SAP Spartacus unit detail 页面显示后自动 focus 设置的原理
- SAP Spartacus lock focus Directive的工作原理示意图
- SAP Spartacus org unit list和unit detail的分屏显示原理
- SAP Spartacus 重用组件cx-table的设计原理
- SAP Cloud for Customer对UI界面元素文本的调整原理
- SAP Cloud for Customer的Opportunity搜索前台实现原理
- SAP CRM呼叫中心异步搜索功能的实现
- SAP CRM WebClient UI BSP server event
- SAP S/4HANA分层存储仓库原理介绍LREP - Layered Repository
- SAP S/4HANA product search generated SQL statement的生产原理介绍
- SAP UI5 里如何让每次视图显示时都执行某方法
- SAP CRM Fiori 标准应用 My Account - search by ID 根据 ID 进行搜索的标准功能实现原理
- SAP UI5 Negative cache的工作原理
- SAP Cloud Platform上Fiori launchpad tile的读取原理
- SAP Fiori Elements里的Smart Table工作原理解析
- 通过调试获得SAP Fiori gateway系统的系统ID
- Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
- SAP 电商云 Spartacus UI SiteContextParamsService 的实现原理解析