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:
- PHP实用功能——modern PHP读书笔记(一)
- ModernPHP读书笔记(二) ——PHP开发标准
- iBatis.Net(6):Data Map(深入)
- iBatis.Net(5):Data Map(了解)
- ModernPHP读书笔记(三)——PHP的良好实践
- PHP开发过程的那些坑(一) ——对象拷贝
- PHP开发过程的那些坑(二) ——PHP empty函数
- Thinking in SQL系列之数据挖掘Apriori关联分析再现啤酒尿布神话
- PHP开发过程的那些坑(三) ——PHParray_shift函数
- CSS3弹性盒布局
- iBatis.Net(4):DataMapper API
- PHP开发过程的那些坑(四) ——PDO bindParam函数
- iBatis.Net(3):创建SqlMapper实例
- PHP开发过程的那些坑(五) ——PHP的empty()
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法