以 Fiori Elements 为代表的生成式企业级前端开发应用，即开发人员在后台 CDS View 视图上进行业务逻辑的编写，然后加上 @UI 开头的注解。Fiori 框架会解析视图上的这些注解，自动生成 Fiori UI 的工程文件。

下图是基于 Fiori Elements 开发而成的一些应用的界面：

尽管 Fiori Elements 大大提高了企业级前端应用的开发效率，但随之而来的一个问题是：如果有客户需求，没办法通过 Fiori Elements 提供的标准模版来实现，如何进行二次开发？

本文就来聊聊这个话题。

我们首先仔细查看 Fiori Elements 生成的项目文件里，发现只有一个光秃秃的 Component.js, 里面声明了一个 json 格式的元数据描述文件 manifest.json. 而我们知道 json 格式的文件，里面是无法编写应用逻辑的。

Fiori Elements 框架的官方建议是，根据需求实现的难易程度不同，可以采取 Adaptation 和 Extension 的方式来完成二次开发。

• 所谓 Adaptation，就是修改 Fiori Elements 应用的 manifest.json 文件，来实现一些复杂度较低的需求。

• 所谓 Extension，就是通过 Jerry 之前的文章 产品增强技术回顾 里介绍的 UI5 ExtensionHook 技术，创建 Fiori Elements Extension 并进行 JavaScript 的定制代码开发。

先看 Adaptation 的一个实际例子。

Fiori Elements 框架默认生成的 List Report 应用的表格部分，只支持单选，即下图表格行项目最左端的圆形选择控件。

下面我在 Visual Studio Code 里通过 Adaptation 方式，将该表格改成支持多项选择。

Ctrl+Shift+P，打开 Guided Development，这也是 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": {
                ".ui.controllerExtensions": {
                    ".suite.ui.generic.template.ListReport.view.ListReport": {
                        "controllerName": "com..jerry.jerryfioriapp.WangZiXi"
                    }
                }
            }
        },

现在表格的选择模式已经变成多选了：

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

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

下图的语义是，开发人员希望定义一个由字段 controllerName 指定的 controller extension，来扩展 Fiori Elements List Report 标准的 controller.

Fiori Elements ListReport 标准的 controller，其实现代码位于 .suite.ui.generic.template.ListReport.controller 的 ControllerImplementation.js 里。

这个标准的 Controller 里，第 641 行代码调用 onBeforeRebindTableExtension 方法。假设我们想重新实现该方法，在表格渲染前执行一些自定义逻辑，则可以将这些自定义逻辑，实现在 manifest.json 注册的 controller extension 里。

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

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

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

总结

本文笔者通过两个实际的例子，分别介绍了 Fiori Elements 这个企业级前端 Web 应用界面生成框架，基于 Adaption 和 Extension 两种不同的二次开发方式。