携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

SAP Fiori Elements 本地项目里的 Annotations.xml，可以定义一些本地 annotations，来覆盖掉来自后台 OData 服务里的注解。

例如：我在 Annotations.xml 里重新定义 List Report 里应该显示的表项：

 <Annotations Target="SAP.SEPMRA_C_PD_ProductType">
                <Annotation Term="UI.LineItem">
                    <Collection>
                        <Record Type="UI.DataFieldForAction">
                            <PropertyValue Property="Label" String="点我"/>
                            <PropertyValue Property="Action" String="SEPMRA_PROD_MAN.SEPMRA_PROD_MAN_Entities/SEPMRA_C_PD_ProductCopy"/>
                            <PropertyValue Property="InvocationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="ProductForEdit"/>
                             <PropertyValue Property="Label" String="12345"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                        <Record Type="UI.DataField">
                            <PropertyValue Property="Value" Path="MainProductCategory"/>
                            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
                        </Record>
                       
                        
                    </Collection>
                </Annotation>
            </Annotations>

上面的代码重新定义了 Copy 按钮的标签，同时 List Report 默认只显示两个表项：Product 和 MainProductCategory，同时将 Product 的 Label 更改为 12345，运行时效果：

但是我们仍然可以通过配置的方式，将其他 column 一起显示出来：

如图所示：

正则表达式：

{{foo}}

在 sap.ui.core.Component.js 里，执行 loadManifests 进行加载：

我们的 controller extensions 在这里也能看见：

在 Manifest 构造函数里，执行 _processI18n, 处理 i18n 相关逻辑：

成功加载的文本资源，位于 ResourceBundle 中：

从 Resource Bundle 中，根据 resource key 拿到文本的逻辑，位于方法 getText 里：

如下图所示，这是 SAP Fiori Elements List Report 一个例子，我们想在表格工具栏里，新增一个自定义按钮：

实现方式

在 SAP Fiori Elements 项目工程里，修改 manifest.json，添加如下代码：

"extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {
                      "controllerName": "com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension",
                        "sap.ui.generic.app": {
                          "SEPMRA_C_PD_Product": {
                            "EntitySet": "SEPMRA_C_PD_Product",
                            "Actions": {
                              "ActionName1": {
                                "id" : "ActionName1",
                                "text" : "Action Name One",
                                "press" : "onCustomAction1",
                                "requiresSelection": false
                              }
                            }
                        }
                    }
                }        
            }
            }
        },

我们需要创建一个 sap.ui.controllerExtensions 的具体实现，该扩展的 id 为 com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension：

这个 controller 里包含了自定义的按钮点击处理函数：onCustomAction1.

实现 sap.ui.controllerExtensions. 两处的 controller extension id 要一致。

Controller 的完整实现代码：

sap.ui.define("com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension", [], function() {
    return {
        onCustomAction1 : function(oEvent) {
            debugger;
            alert('Hello');
        },
        onCustomAction2 : function(oEvent) {
            debugger;
        },
    }
  });

运行时，这个自定义按钮被渲染如下：

点击之后，弹出了 onCustomAction1 里调用的 alert 语句：

查看运行时该按钮渲染的 HTML 代码，发现是 Fiori Elements id + 应用类型(sap.suite.ui.generic.template.ListReport.View.ListReport) + manifest.json 里定义的 entitySet + manifest.json 里定义的 Action 名称拼装而成。

sap.suite.ui.generic.template.ListReport.view.ListReport

这种自定义按钮，在 SAP Fiori Elements 世界里有个术语叫做 Breakout action，其 id，即我们 controller extension 里定义的 action ID，在 AnnotationHelper.js 的 getBreakoutActionButtonId 里被解析出来：

SAP Fiori Elements 本地项目的 annotations.xml 文件

实现方式