SAP Fiori Elements里的Smart Table工作原理解析

简介: The appearance of smart table rendered looks like below:

The appearance of smart table rendered looks like below:



image.png

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:


image.png



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:


image.png


In this context, most of the properties come from the definition in XML view:


image.png


All the input parameters for table provider creation are listed below:


image.png


In function _intialiseMetadata, the five fields of entityType Product is parsed:


image.png


Pay attention that these fives fields are not final table columns rendered.


image.png


Instead, only those fields defined under annotation “com.sap.vocabularies.UI.v1.LineItem” would be rendered as table columns:


image.pngimage.png



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:


image.pngimage.png



Once executed, you could observe the response returned by Mock server from console and the table is now filled with data from Products.json.


image.png


How “currency” filter works

Since currency code is marked as filterable = true in metadata.xml,

image.png


so we could switch it on in “More Filters”:

image.png



Suppose we would like to filter by currency code = EUR.


image.png


Once we select the checkbox and click OK button:


image.png


Another OData request will be sent by FilterBar from sap.ui.comp.FilterBar:


image.png


The filter condition is defined in aFilters:

image.png



Again you could observe this filter request’ url and response in console tab:


image.png

相关文章
|
1月前
|
XML 存储 JavaScript
Fiori Elements 框架里 Smart Table 控件工作原理的深入解析
Fiori Elements 框架里 Smart Table 控件工作原理的深入解析
17 0
|
6月前
|
XML 数据格式
SAP Fiori Elements SemanticKey 的语法
SAP Fiori Elements SemanticKey 的语法
37 0
|
6月前
关于 SAP Fiori Elements 应用的 ResponsiveTableColumnsExtension 扩展
关于 SAP Fiori Elements 应用的 ResponsiveTableColumnsExtension 扩展
32 0
|
7月前
|
XML 测试技术 数据格式
SAP UI5 Fiori Elements Smart Control 组成部分介绍
SAP UI5 Fiori Elements Smart Control 组成部分介绍
65 0
|
XML 数据格式
SAP Fiori Elements里的Smart Table工作原理解析
SAP Fiori Elements里的Smart Table工作原理解析
132 0
SAP Fiori Elements里的Smart Table工作原理解析
|
XML 存储 JavaScript
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章。 Jerry 前一篇文章 深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fiori Elements 应用添加自定义按钮 介绍了如何给 SAP Fiori Elements 应用的 Smart Table 工具栏里,新增自定义按钮,并实现其点击事件处理函数。
131 0
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
|
XML 数据格式
SAP Fiori Elements里Smart Link工作原理介绍
SAP Fiori Elements里Smart Link工作原理介绍
130 0
SAP Fiori Elements里Smart Link工作原理介绍
|
XML 前端开发 JavaScript
深入掌握 SAP Fiori Elements 工作原理的前提条件:理解 Smart Field
深入掌握 SAP Fiori Elements 工作原理的前提条件:理解 Smart Field
深入掌握 SAP Fiori Elements 工作原理的前提条件:理解 Smart Field
|
XML Web App开发 开发框架
深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
SAP Fiori element框架smart control运行时的生成原理
Created by Wang, Jerry, last modified on Dec 13, 2016
117 0
SAP Fiori element框架smart control运行时的生成原理