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

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

The appearance of smart table rendered looks like below:image.pngThe 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.pngimage.pngWhen 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.pngIn this context, most of the properties come from the definition in XML view:image.pngAll the input parameters for table provider creation are listed below:image.pngIn function _intialiseMetadata, the five fields of entityType Product is parsed:image.pngPay attention that these fives fields are not final table columns rendered.

image.pngInstead, only those fields defined under annotation “com.sap.vocabularies.UI.v1.LineItem” would be rendered as table columns:image.pngimage.pngThen 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.pngOnce 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.pngso we could switch it on in “More Filters”:image.pngSuppose we would like to filter by currency code = EUR.image.pngOnce we select the checkbox and click OK button:image.pngAnother OData request will be sent by FilterBar from sap.ui.comp.FilterBar:image.pngThe filter condition is defined in aFilters:

image.pngAgain you could observe this filter request’ url and response in console tab:image.png




相关文章
|
3天前
|
Java
并发编程之线程池的底层原理的详细解析
并发编程之线程池的底层原理的详细解析
15 0
|
27天前
|
安全 Java 数据安全/隐私保护
【深入浅出Spring原理及实战】「EL表达式开发系列」深入解析SpringEL表达式理论详解与实际应用
【深入浅出Spring原理及实战】「EL表达式开发系列」深入解析SpringEL表达式理论详解与实际应用
64 1
|
2天前
|
缓存 JavaScript 前端开发
|
3天前
|
SQL 分布式计算 资源调度
一文解析 ODPS SQL 任务优化方法原理
本文重点尝试从ODPS SQL的逻辑执行计划和Logview中的执行计划出发,分析日常数据研发过程中各种优化方法背后的原理,覆盖了部分调优方法的分析,从知道怎么优化,到为什么这样优化,以及还能怎样优化。
|
3天前
|
JSON Java Maven
Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析
Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析
8 0
Javaweb之SpringBootWeb案例之 SpringBoot原理的详细解析
|
3天前
|
前端开发 JavaScript 编译器
深入解析JavaScript中的异步编程:Promises与async/await的使用与原理
【4月更文挑战第22天】本文深入解析JavaScript异步编程,重点讨论Promises和async/await。Promises用于管理异步操作,有pending、fulfilled和rejected三种状态。通过.then()和.catch()处理结果,但可能导致回调地狱。async/await是ES2017的语法糖,使异步编程更直观,类似同步代码,通过事件循环和微任务队列实现。两者各有优势,适用于不同场景,能有效提升代码可读性和维护性。
|
14天前
|
机器学习/深度学习 分布式计算 BI
Flink实时流处理框架原理与应用:面试经验与必备知识点解析
【4月更文挑战第9天】本文详尽探讨了Flink实时流处理框架的原理,包括运行时架构、数据流模型、状态管理和容错机制、资源调度与优化以及与外部系统的集成。此外,还介绍了Flink在实时数据管道、分析、数仓与BI、机器学习等领域的应用实践。同时,文章提供了面试经验与常见问题解析,如Flink与其他系统的对比、实际项目挑战及解决方案,并展望了Flink的未来发展趋势。附带Java DataStream API代码样例,为学习和面试准备提供了实用素材。
37 0
|
9天前
yolo-world 源码解析(六)(2)
yolo-world 源码解析(六)
18 0
|
9天前
yolo-world 源码解析(六)(1)
yolo-world 源码解析(六)
12 0
|
9天前
yolo-world 源码解析(五)(4)
yolo-world 源码解析(五)
22 0

推荐镜像

更多