SAP Fiori里的Adapt UI按钮,神出鬼没的奥秘

简介: 今天是2020年2月2日鼠年大年初九,这是Jerry鼠年的第9篇文章,也是汪子熙公众号总共第208篇原创文章。这几天大家在家一日游的感觉如何?

今天是2020年2月2日鼠年大年初九,这是Jerry鼠年的第9篇文章,也是汪子熙公众号总共第208篇原创文章。


这几天大家在家一日游的感觉如何?


image.png


工作中Jerry的同事曾经问过我一个问题,Fiori界面上这个Adapt UI的按钮,为什么有的系统上有,有的系统上没有?Fiori Key User正是通过点击该按钮,进入Fiori UI的Adaptation模式,从而实现在屏幕上新增扩展字段的目的。


比较下面两个不同系统的截图:


image.pngimage.png



为什么这个Adapt UI按钮,如此神出鬼没,有的系统上有显示,有的没有?


自己动手,丰衣足食。假设你的身边找不到Fiori专家,如何通过自己在系统里调试的方法找到问题的答案呢?


Jerry之前的文章 Jerry的Fiori原创文章合集 ,搜集了很多案例,讲述了如何通过单步调试,去分析和处理Fiori开发工作中的一些常见问题。


现在我们再次通过单步调试的方式来分析这个Adapt UI按钮动态显示与否的逻辑。


首先根据Jerry这篇博客介绍的SAP UI5控件在浏览器端的渲染逻辑的知识,找出是一个ID为sap.ushell.plugins.rta的插件,负责管理该Adapt UI按钮。我个人把rta理解成Run Time Adaptation.


https://blogs.sap.com/?p=133359


image.png


这个插件从哪里来呢?在Chrome开发者工具里对sap.ushell.config和sap-ushell-config这组关键字进行全文搜索,找到了下面的代码片段:


image.png


由此可见,rta这个插件实例,存储在sap-ushell-config这个全局对象的bootstrapPlugins属性里。

image.png



在Adapt UI按钮能够显示的系统上调试,发现全局对象sap-ushell-config的值,来自oServerSideConfig这个JSON对象,而后者的值,是从SAP Fiori Launchpad的html页面里一个硬编码的字符串反序列化而成:


image.png


把FioriLaunchpad.html里这个硬编码的字符串拷贝下来:


image.png


decode之后,发现其层级结构同我们之前在Chrome开发者工具里观察到的sap-ushell-config全局对象完全一致,说明我们找对地方了。


image.png


下一步就是要弄清楚FioriLaunchpad.html里这个硬编码的字符串到底来自何方。标准开发人员一个字符一个字符敲进去的?SAP软件没有这么傻。


SE80打开Fiori Launchpad Shell对应的BSP应用:

/ui2/ushell, 发现字符串的值来自变量:


${SERVER-SIDE-CONFIG}


image.png


因此SE80里我们找到的这个FioriLaunchpad.html只是起到一个模板文件的作用,里面第76行出现的${SERVER-SIDE-CONFIG}, 也只是一个占位符,会被运行时该变量的实际值替换,最后就成了我们在Chrome开发者工具里观察到的那个长长的字符串。


那么变量${SERVER-SIDE-CONFIG}的值从哪里来?在BSP应用里查找,发现get_server_side_config_json方法返回的值,注入到该变量里。


image.png


所以现在的问题转化为,通过单步调试get_server_side_config_json方法,弄清楚里面的逻辑:


image.png


当我单步调试进入该方法时,发现上图第18行lr_data->mt_plugin这个内表里,已经包含了需要返回并注入到变量${SERVER-SIDE-CONFIG}里的当前系统上所有可用的Fiori Launchpad插件实例了,本文关注的sap.rta.plugin也赫然在列。


image.png


那么为什么本文开头提到的另一个系统里,没有显示Adapt UI按钮呢?


问题就出在下图第22行的CHECK语句。第18行的mt_plugin内表,存储了当前系统所有可用的Fiori Launchpad插件,每个插件都对应一个catalog ID.


第21行的内表it_catalogs, 存放的是当前登录用户通过分配的PFCG角色所拥有的catalog ID集合。


image.png


上图这段代码的语义是,遍历当前系统所有可用的Fiori Launchpad插件,如果其对应的catalog ID,没有出现在登录用户所拥有的catalog ID集合里,那么该插件对于该登录用户来说就是无效的(invalid), 应该将其从Fiori Launchpad上隐藏。


从上图的调试窗口,我得知Run Time Adaptation这个插件对应的catalog ID为/UIF/SAP_RTA_PLUGIN, 然后我到ABAP后台SU01去检查,发现在看不到Adapt UI按钮的那个系统里,我的用户果然没有分配这个catalog. 于是将其分配上去:


image.png

问题得以解决,现在Fiori UI里,这个久违的Adapt UI又回来了。


这就是一个实际的“自己动手,丰衣足食”的例子——我通过单步调试,没有求助Fiori专家,也解决了工作中遇到的实际问题。


image.png


更多阅读


Jerry的通过CDS view + Smart Template 开发Fiori应用的blog合集


SAP Fiori应用的三种部署方式


Jerry的Fiori原创文章合集


SAP成都C4C小李探花:浅谈Fiori Design Guidelines


SAP Fiori + Vue = ?


Fiori Fundamentals和SAP UI5 Web Components


30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用


SAP Fiori应用索引大全


介绍一种Fiori标准应用的增强方式


揭开SAP Fiori编程模型规范里注解的神秘面纱 - @ObjectModel.readOnly工作原理解析


为什么SAP GUI里的传统事务码能通过Fiori Launchpad启动并运行在浏览器里


一步步把SAP GUI的事务码配置到SAP Fiori Launchpad里


相关文章
|
1月前
|
数据库 API
启用SAP Fiori之前的一些注意事项
启用SAP Fiori之前的一些注意事项
14 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
1月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
1月前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
16 0
|
2月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
16 0
|
2月前
|
UED
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
什么是 SAP Fiori 的 Technical Catalog 和 Business Catalog
38 0
|
2月前
|
前端开发 UED
SAP Fiori 到底指什么
SAP Fiori 到底指什么
49 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
35 0