这是 Jerry 2021 年的第 33 篇文章，也是汪子熙公众号总共第 309 篇原创文章。
Jerry 的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后，算是领略到了这个风行前端框架凋敝生态圈的风采：在开发过程中遇到 Angular 技术问题时，很容易在社区里找到大量相干文章。除了每天我都要浏览的 Angular 官网之外，我也常常浏览一些国内外大神写的对于 Angular 源代码剖析的博客。
同 Angular 相比，应用 SAP Fiori Elements 的从业者的相对人数没有 Angular 多，除了 SAP 官网文档之外，介绍 Fiori Elements 源代码实现和工作原理的文章不多，中文资料就更少了。
因而 Jerry 试着用中文写了一些 SAP Fiori Elements 应用和工作原理介绍的文章，心愿对这个开发框架的中文生态圈奉献一点微薄之力：
在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用
答网友发问：应用 SAP Fiori Tools 创立的 Fiori Elements 利用，如何进行二次开发？
本地开发好的 SAP Fiori Elements 利用，如何部署到 ABAP 服务器上
深刻把握 SAP Fiori Elements 工作原理的前提条件：了解 Smart Field
本文持续通过 SAP Fiori Elements 利用一个理论加强的例子，来论述其工作原理。
Jerry 上述列举的文章，介绍了如何基于 SAP ES5 Demo 零碎上部署的一个 OData 服务，创立一个类型为 List Report 的 SAP Fiori Elements 利用。其界面如下：
其中表格区域的工具栏里，彩色高亮框内为 Fiori Elements 表格控件自带的按钮，提供了表格行我的项目的复制，创立，删除等性能。而红色的按钮则是我通过 Fiori Elements 利用加强的形式绘制进去的。
本文咱们会分享：如何在 SAP Fiori Elements 表格控件的工具栏里，增加新的自定义按钮。
本系列后续文章，Jerry 会介绍，如何在自定义按钮的点击事件处理函数里，用代码获得以后选中行我的项目的明细信息。
Jerry 之前的文章 答网友发问：应用 SAP Fiori Tools 创立的 Fiori Elements 利用，如何进行二次开发？，已经提到了在 Fiori Elements 我的项目工程的 manifest.json 文件里，通过申明并实现 sap.ui.controllerExtensions 的形式来进行二次开发。sap.ui.controllerExtensions 能够了解成 ABAP 里的 BAdI definition，而咱们基于 sap.ui.controllerExtensions 创立的自定义控制器 (controller.js), 则可类比成 ABAP BAdI 加强的具体实现。
在 manifest.json 的 extends 区域里保护如下代码：
上述代码的关键点解释：
- 为该我的项目申明一个 sap.ui.controllerExtension 的实现，其源代码位于咱们新建的控制器里。
- 申明自定义控制器的 id，稍后咱们会手动创立这个控制器：com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension.
- 申明这个自定义控制器工作的 OData EntitySet 名称。
- 申明按钮明细，在 SAP Fiori Elements 里按钮实现的模型称为 Action.
上图申明了自定义 Action 的若干属性：
id 属性值，最初会作为渲染出的 HTML 原生代码中 button 标签 id 值的一部分。
text 属性值，即 UI 显示按钮的标签值。
press 属性值即该按钮的点击处理函数的名称，咱们稍后须要在自定义控制器里实现一个同名函数。
requiresSelection 属性，顾名思义，如果为 true，表明该按钮只有当表格某行我的项目被选中时才可能被点击。例如下图所示，表格区域没有任何一行被选中，此时我的自定义按钮，处于不可点击状态。
manifest.json 里的加强定义结束后，接着咱们新建一个控制器 ListReportExtension.controller.js，在这个文件里编写 manifest.json 里申明的函数，即按钮点击事件处理函数
onCustomAction1
目前，点击自定义按钮后，只是弹出一个对话框而已：
如上图所示，点击自定义按钮之后，看到了冀望的弹出框。咱们再批改按钮的属性，进行一些额定的测试。
给自定义按钮增加一个 global 为 true 的属性：
从新关上页面，发现该按钮跑到利用右上方，成为一个全局按钮了。
把 global 属性换成 determining，这次自定义按钮跑到 footer 区域了：
想晓得我是如何晓得 global，determining 这些属性的名称吗？答案是浏览 SAP Fiori Elements XML 视图的源代码实现。
Jerry 之前的文章 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用 已经提到，SAP Fiori Elements 预置了很多页面模板：
List Report Object Page
Worklist
Analytical List Page
Overview Page
这些页面模板的布局，均采取 XML 视图实现。
以调试模式启动 SAP Fiori Elements 利用，即可在 Chrome 开发者工具 network 标签页里，察看到这些 XML 视图的加载：
下面这张图信息量很大。首先右边列表里，红色高亮的 ListReport.view.xml, 当然就是 List Report 模板的 XML 视图实现了。这个 XML 视图实现里蕴含了两个页面片段 (fragment)，即上图左边标号为 1 和 2 的元素：
FullscreenPage.fragment.xml
CreateWithDialog.xml
一个页面片段又能够蕴含若干个页面片段。换言之，List Report (以及 SAP Fiori Elements 的其余页面模板) 的 XML 视图实现，是以 ListReport.view.xml 为根节点的一棵树状构造，叶节点为不同的页面片段。
上图不同高亮色彩的页面片段，均和 SAP Fiori Elements 自定义按钮的渲染相干，绘制成树状构造如下：
箭头符号示意蕴含关系，比方 SmartTable.fragment.xml 源代码里，蕴含了名为 SmartTableToolbar 的视图片段。
为什么本文之前提到的在 manifest.json 里增加的 determining = true 的自定义按钮，会呈现在 List Report 的 footer 区域？答案就在 FullscreenPage 页面片段的源代码里。
如上图所示，在绿色的 footer 标签里，应用 XML 视图指令，template:repeat，遍历绑定到该页面片段的 Actions 构造，将构造里每一个元素，赋给模板变量 customaction, 该变量此时蕴含的就是 manifest.json extends 区域里申明的自定义按钮的明细。而后用另一个模板指令，template:if, 判断以后自定义按钮的属性，如果 determining 属性为 true，且 global 属性为 false，则在以后区域即 footer 区域渲染该自定义按钮。
因而最初在 footer 区域渲染的自定义按钮成果如下：
而 List Report 表格的工具栏区域的按钮，实现在页面片段 BreakoutActions.fragment.xml 里：
第 7 行的正文写得很分明了，应用 template: if 指令，判断下列布尔表达式的值：
!${customaction>determining} && !${customaction>global}
如果表达式的值为 true，则渲染被 template: if 包裹的 button 元素。
上图 template:if, 是 SAP UI5 针对 XML 视图实现的自定义指令，在须要满足依据某种判断条件来显示或暗藏 UI 元素此类需要时特地有用。其成果和应用形式，和 Angular 里的结构型指令 ngIf 十分相似。
比方下图是 SAP Commerce Cloud (Spartacus UI) Organization Unit 明细页面视图实现的局部截图，54 行的 div 标签上，施加了一个 ngIf 指令，调配的布尔表达式是 model.approvalProcess.name, 语义是：当且仅当 model.approvalProcess.name 的值不为空时，才渲染这个 div 标签及其子元素。
最初一个问题：例如 BreakoutActions 页面片段里，UI5 自定义指令绑定的这些 Actions 模型，数据来自哪里？
当然是来自 Fiori Elements 工程里的 manifest.json 文件里定义的同名属性 Actions：
在 SAP Fiori Elements 利用启动时，manifest.json 文件会被框架代码 Component.js 的 loadManifests 办法加载，其文本内容会被反序列化成 JSON 对象：
manifest.json 文件的 Actions 区域的内容，会被绑定到 List Report 相干的页面片段里，参加各种自定义指令 template: xxx 的执行流程中。
心愿通过本文的介绍，大家对于 SAP Fiori Elements List Report 里自定义按钮的渲染逻辑，可能有进一步的了解。
本系列后续文章，Jerry 会介绍，如何让 SAP Fiori Elements 利用表格区域里，选中的行我的项目的明细信息，蕴含在自定义按钮点击后显示的弹出对话框里。敬请期待。
更多浏览
- 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用
- 答网友发问：应用 SAP Fiori Tools 创立的 Fiori Elements 利用，如何进行二次开发？
- 本地开发好的 SAP Fiori Elements 利用，如何部署到 ABAP 服务器上
- 深刻把握 SAP Fiori Elements 工作原理的前提条件：了解 Smart Field
更多 Jerry 的原创文章，尽在：” 汪子熙 ”: