SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理-阿里云开发者社区

开发者社区> jerrywangsap> 正文

SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理

简介: SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理
+关注继续查看

In previous blog Currency example – how Smart field works, one simple smart field is introduced:


image.png


In this blog, let’s go further to study how the value help of currency field is implemented by framework:

image.png



Once we open F4 value help of currency field, we could see a new popup. both the value help on currency field itself and this popup dialog are implemented by UI5 framework, there is no application coding at all. The source code of xml view and controller remain unchanged compared with previous example – but indeed the UI element, the currency field, behaves differently – this is actually the meaning of “smart” – the behavior of UI element depends on the annotation defined in OData model metadata.


image.png


How could Framework know the currency field should be rendered as F4 value help?

We set breakpoint on this line which is already discussed in previous blog.


image.png


For the logic how the variable oMetaData.annotations.uom is parsed from metadata.xml, please refer to previous blog.

In OData Metadata, we use the following annotation to tell Framework that the UI element which is bound to “CurrencyCode” field in the model must be rendered as value list.


image.png


And the Target property is parsed in the runtime:


image.png


The calculated annotation from line 495 above is used to enable the original currency field with value help in line 1694 below by control Factory.


image.png


In the function addValueHelp, two new object instances ValueHelpProvider and ValueListProvider are created. They will be used later when F4 is pressed.


image.png


Finally, in the rendering process, since now the currency field has value help assigned, the corresponding UI5 icon is rendered by InputRender so that end user can easily identify the field has value help supported.


image.png


Implementation of F4 value help click

We have just now mentioned ValueHelpProvider. When F4 is pressed, it will react the press event and create an instance of ValueHelpDialog, which is a composite control acting as a container for all UI elements you could see in the popup dialog.


image.png


The controls are created separately as shown below:


image.png



Go button implementation

By default after you click F4 value help, the table is empty unless you click “Go” button.


image.png


The go button is implemented as instance of smartFilterBar created byValueHelpProvider.


image.png


The event handler of search is defined in line 317, the function _onFilterBarSearchPressed. In this event handler, it will delegate to _rebindTable.


image.png

_rebindTable will fire a request to backend to ask for data for currency value list:


image.png


Once the response is available ( from mock data Currency.json in project ), the table is updated with data binding:


image.png


How the item selected from popup dialog could pass back to application

In the metadata, we have defined via annotation that the “Price” field has “CurrencyCode” field as its unit code.


image.png


Here below is the type definition for CurrencyCode, one property CURR for currency code and DESCR for currency description.


image.png

It is this annotation which tells UI framework that once end user selects one currency from popup dialog, the value of field “CURR” in popup dialog must be passed back to field “CurrencyCode” in application.


image.png


How is this annotation parsed in the runtime? They are separately parsed in function addValueHelp we discussed previously and assigned to variable sValueListProprty and sLocalDataProperty.


image.png


image.png

When the first entry in currency list table is selected:


image.png


This selected state is passed into event handler via variable oControlEvent:


image.png


The key is parsed:


image.png


An event is raised with this selected key & text:


image.png


Now we are back to ValueHelpDialog:


image.png

Fire an OK event with selected key & text:


image.pngimage.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10062 0
我的Android进阶之旅------>介绍一款集录制与剪辑为一体的屏幕GIF 动画制作工具 GifCam
由于上一篇文章:我的Android进阶之旅------>Android之动画之Frame Animation实例 中展示的是Frame动画效果,但是之前我是将图片截取下来,不好说明确切的动画过程,因此今天百度了一下gif动画的制作工具,找到了这款不错的软件GifCam。
1126 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2959 0
SAP UI5 jQuery.sap.getModulePath 的工作原理
SAP UI5 jQuery.sap.getModulePath 的工作原理
9 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10882 0
SAP Commerce SmartEdit 如何同 SAP Spartacus 协同工作
SAP Commerce SmartEdit 如何同 SAP Spartacus 协同工作
15 0
使用 mock 数据在本地运行 SAP Fiori Elements 应用的工作原理
使用 mock 数据在本地运行 SAP Fiori Elements 应用的工作原理
12 0
SAP UI5 WebIDE里使用Mock数据的工作原理介绍
Created by Wang, Jerry, last modified on Feb 02, 2015
5 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载