这是 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 的开发和扩展知识，敬请持续关注。感谢阅读。

更多阅读

SAP Fiori应用索引大全
Fiori Fundamentals和SAP UI5 Web Components
为什么SAP GUI里的传统事务码能通过Fiori Launchpad启动并运行在浏览器里
一步步把SAP GUI的事务码配置到SAP Fiori Launchpad里
SAP UI5应用开发人员了解UI5框架代码的意义
SAP UI5 module懒加载机制
SAP UI5 控件渲染机制
HTML原生事件 VS SAP UI5 Semantic事件
SAP UI5控件元数据的元数据实现
SAP UI5控件的实例数据修改和读取逻辑
SAP UI5控件数据绑定的实现原理
SAP UI5控件数据绑定的三种模式：One Way, Two Way和OneTime实现原理比较
SAP UI5 OData谣言粉碎机：极短时间内发送两个Odata request,前一个会自动被cancel掉吗
SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
SAP UI渲染模式：客户端渲染 VS 服务器端渲染
SAP UI的加载动画效果和幽灵设计(Ghost Design)
介绍一个能开发简单SAP UI5应用的在线IDE：StackBlitz
SAP CRM Fiori 应用和 SAP Commerce Cloud (电商云) UI 如何通过调整CSS来改变UI显示风格
SAP 产品一脉相承的 UI 增强思路，在 SAP Commerce Cloud(电商云) UI 增强实现中的体现
如何分辨 SAP Fiori Launchpad 里的真假 Fiori 应用
在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用
SAP Fiori 应用里图标(Icon)的渲染原理和使用技巧

更多Jerry的原创文章，尽在：“汪子熙”:

2021-6-8

用户点击 Fiori Elements Smart table 后，如何在 extension controller.js 里获得当前 table 的数据？

var oTable = oEvent.getSource().getParent().getParent().getTable();var content = oTable.getAggregations("plugins")[0].getSelectedIndices();

答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？相关推荐

Jerry答网友提问：SAP CRM WebClient UI里的EXT，STRUCT等含义
2020年,Jerry会做一个新的尝试,选择部分朋友向我提出的问题,在公众号,知识星球或者微信圈子这些平台上公开回答,这样或许能帮助到更多的朋友. 具体说明参见我前一篇文章:2020年关于SAP知识问 ...
SAP UI5 Tools 运行了 fiori add deploy-config 命令之后，工程文件发生了哪些变化
我使用这篇文章使用 generator-easy-ui5 快速创建 SAP UI5 应用的工程结构介绍的工具,创建了一个 SAP UI5 应用,然后运行了 SAP UI5 Tools 提供的命令 ...
网友提问：SAP FUNCTION使用cl_http_client POST REQUEST的问题
网友提问: 请教大家个问题: SAP FUNCTION 使用cl_http_client POST REQUEST 给对方的API,包含多个参数以及一个JSON放在body里,对方服务器发现我们的RE ...
答网友提问，ABAP post调用外部接口遇到405 not allow
公众号粉丝提问: 有个问题想咨询一下,我是做ABAP开发的,现在要跟外部系统做接口,外部系统发布了一个公网的地址,我去调用,用post方法,客户指定要用post,遇到的问题就是一直返回code 405 ...
单片机应用编程技巧---MCU专家答网友问
单片机应用编程技巧---MCU专家答网友问单片机应用编程技巧 Holtek MCU专家--邓宏杰答网友问 (转自电子工程专辑网站) 1. C语言和汇编语言在开发单片机时各有哪些优缺点? 答:汇 ...
SAP 2019 TechEd Key Note解读：云时代下SAP从业人员如何做二次开发？
刚刚过去的在巴塞罗那举行的2019 SAP TechEd,SAP照例向全球广大的SAP生态圈从业者们传达了一些重要的信息,其中一条为:Building Extensions for the Intel ...
使用O2OA二次开发搭建企业办公平台（十五）流程开发篇：创建报销审批流程
本博客为O2OA系列教程.O2OA使用手册,教程目录和各章节天梯将在连载完后更新. 使用O2OA二次开发搭建企业办公平台(一)平台部署篇:平台下载和部署使用O2OA二次开发搭建企业办公平台(二)平台 ...
使用O2OA二次开发搭建企业办公平台（十二）流程开发篇：报销审批流程需求和应用创建
本博客为O2OA系列教程.O2OA使用手册,教程目录和各章节天梯将在连载完后更新. 使用O2OA二次开发搭建企业办公平台(一)平台部署篇:平台下载和部署使用O2OA二次开发搭建企业办公平台(二)平台 ...
使用O2OA二次开发搭建企业办公平台（十二）流程开发篇：报销审批流程需求和应用创建...
本博客为O2OA系列教程.O2OA使用手册,教程目录和各章节天梯将在连载完后更新. 使用O2OA二次开发搭建企业办公平台(一)平台部署篇:平台下载和部署使用O2OA二次开发搭建企业办公平台(二)平台 ...

答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？

2021-6-8

答网友提问：使用 SAP Fiori Tools 创建的 Fiori Elements 应用，如何进行二次开发？相关推荐

最新文章

热门文章