关于abap:答网友提问使用-SAP-Fiori-Tools-创建的-Fiori-Elements-应用如何进行二次开发

8次阅读

共计 3849 个字符，预计需要花费 10 分钟才能阅读完成。

这是 Jerry 2021 年的第 28 篇文章，也是汪子熙公众号总共第 299 篇原创文章。

Jerry 之前的文章 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用，介绍了如何应用 Visual Studio Code，创立 SAP Fiori Elements 利用。

起初有敌人在微信上向我征询，应用文章形容的步骤，生成的 Fiori Elements 利用里，并不存在利用专属的 (Application Specific) View 和 Controller，所以不晓得如何对该利用进行二次开发。

确实，生成的我的项目文件里，只有一个赤裸裸的 Component.js, 外面申明了一个 json 格局的元数据形容文件 manifest.json. 而咱们晓得 json 格局的文件，外面是无奈编写应用逻辑的。

另一个敌人向我询问，SAP 举荐的 Fiori Elements 开发工具，到底是 WebIDE 还是 Visual Studio Code？

Jerry 首先答复第二位敌人的问题。

SAP 社区有一篇如何应用 SAP Business Application Studio 进行 Vue 利用开发的博客，SAP WebIDE 和 Business Application Studio 的产品经理 Yuval，在评论区里答复网友发问时，提供了下列有用的信息：

同之前 SAP 云平台 Neo 环境上传统的 Full Stack WebIDE 相比，SAP Business Application Studio 是 SAP Business Technology Platform 上的云利用开发工具，并不局限于 SAP UI5 技术，而是反对包含 Vue.js, React 在内的任何 HTML5 前端开发技术。

SAP Business Application Studio 反对装置各种 Extensions，因此可能从容适配云时代不断涌现的各种新技术。借助一个被称为 SAP Fiori tools 的扩大包，SAP Business Application Studio 能不便地创立 SAP Fiori Elements 利用。SAP Fiori tools 也能在本地装置的 Visual Studio Code 里应用。

因而，SAP Business Application Studio / Visual Studio Code，都是 SAP 举荐用来开发 SAP Fiori Elements 利用的工具。

对于 SAP Business Application Studio 的更多介绍，请参考 Jerry 的文章：

SAP 新一代全栈开发工具：SAP Business Application Studio

回到本文题目，用 Visual Studio Code 创立的 SAP Fiori Elements 利用，如何对其做二次开发？

依据需要实现的难易水平不同，能够采取 Adaptation 和 Extension 的形式来实现二次开发。

所谓 Adaptation，就是批改 SAP Fiori Elements 利用的 manifest.json 文件，来实现一些复杂度较低的需要。
所谓 Extension，就是通过 Jerry 之前的文章 SAP 产品加强技术回顾里介绍的 SAP UI5 ExtensionHook 技术，创立 SAP Fiori Elements Extension 并进行 JavaScript 的定制代码开发。

先看 Adaptation 的一个理论例子。

通过 Jerry 上一篇文章 在没有任何前端开发教训的根底上, 创立第一个 SAP Fiori Elements 利用 介绍的步骤，创立的 Fiori Elements 利用的表格局部，只反对单选，即下图表格行我的项目最左端的 圆形抉择控件。

上面我在 Visual Studio Code 里通过 Adaptation 形式，将该表格改成反对多项抉择。

Ctrl+Shift+P，关上 Guided Development，这也是 SAP Fiori tools 扩大包里的扩大之一：

该扩大提供了若干向导，指引开发者通过一系列步骤，实现 Fiori Elements 利用的 Adaptation.

因为我想让表格反对多选，所以抉择 List Report Page – Enable Multiple selection in tables:

点击 Start Guide，

Adaptation 向导会主动定位到 manifest.json 对应区域，并显示相应的代码。

下图的含意是，只需在 manifest.json 文件里给 table 字段增加上 multiSelect 为 true 的属性，即可让 Fiori Elements List Report 利用的表格，反对多选。点击 Apply，即可主动实现对 manifest.json 的批改，完结 Adaptation.

批改之后的 manifest.json 区域如下图所示。也就是说，如果对于 manifest.json 里反对的属性设置十分相熟的话，能够间接编辑该文件，无需应用 Fiori Guided Development 扩大。

"extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {"controllerName": "com.sap.jerry.jerryfioriapp.WangZiXi"}
                }
            }
        },

当初表格的抉择模式曾经变成多选了：

而如果想对该 SAP Fiori Elements 利用编写 JavaScript 自定义逻辑，须要采取 SAP UI5 的 Extension 技术。ABAP 开发人员能够把这个技术看作是 JavaScript 版本的 BAdI.

在 manifest.json extends 区域注册一个 extension，类型为 sap.ui.controllerExtensions，子类型为 sap.suite.ui.generic.template.ListReport.view.ListReport.

下图的语义是，开发人员心愿定义一个由字段 controllerName 指定的 controller extension，来扩大 SAP Fiori Elements List Report 规范的 controller.

SAP Fiori Elements ListReport 规范的 controller，其实现代码位于 sap.suite.ui.generic.template.ListReport.controller 的 ControllerImplementation.js 里。

这个规范的 Controller 里，第 641 行代码调用 onBeforeRebindTableExtension 办法。假如咱们想从新实现该办法，在表格渲染前执行一些自定义逻辑，则能够将这些自定义逻辑，实现在 manifest.json 注册的 controller extension 里。

留神 controller extension 的实现文件里，sap.ui.define 的第一个参数申明的 controller 名称，必须和 manifest.json 里注册的 controllerName 字段保持一致。

sap.ui.define("com.sap.jerry.jerryfioriapp.WangZiXi", [], function() {
    return {onBeforeRebindTableExtension: function(oEvent) {debugger;}
    }
}
);

这样，运行时，在 Fiori Elements List Report 表格被渲染之前，咱们的二次开发代码就能被框架调用：

Jerry 后续会分享更多对于 SAP Fiori Elements 的开发和扩大常识，敬请继续关注。感激浏览。

更多浏览