如下圖所示，這是 SAP Fiori Elements List Report 一個例子，我們想在表格工具欄裡，新增一個自定義按鈕：

![](https://img-blog.csdnimg.cn/img_convert/23245b0e5c49e107bfbf89e4138c87ad.png)

# 實現方式

1. 在 SAP Fiori Elements 專案工程裡，修改 manifest.json，新增如下程式碼：

![](https://img-blog.csdnimg.cn/img_convert/c959f9cd0bea908ba2e0f6149bb2bb4e.png)

```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：

![](https://img-blog.csdnimg.cn/img_convert/8a8dc4a870304eed3bca9894fa02853f.png)

這個 controller 裡包含了自定義的按鈕點選處理函式：onCustomAction1.

2. 實現 sap.ui.controllerExtensions. 兩處的 controller extension id 要一致。

![](https://img-blog.csdnimg.cn/img_convert/81ed8b00b7f751b07b3dc1fc6ffee917.png)

Controller 的完整實現程式碼：

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

執行時，這個自定義按鈕被渲染如下：

![](https://img-blog.csdnimg.cn/img_convert/6da09a17b2c5fd9024c9e64ccfcce549.png)

點選之後，彈出了 onCustomAction1 裡呼叫的 alert 語句：

![](https://img-blog.csdnimg.cn/img_convert/a08c1a78c7c6bb899d775dc854e4e859.png)

檢視執行時該按鈕渲染的 HTML 程式碼，發現是 Fiori Elements id + 應用型別(sap.suite.ui.generic.template.ListReport.View.ListReport) + manifest.json 裡定義的 entitySet + manifest.json 裡定義的 Action 名稱拼裝而成。

![](https://img-blog.csdnimg.cn/img_convert/96c359cc3fcb0088e0a0eef5095684ff.png)

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

這種自定義按鈕，在 SAP Fiori Elements 世界裡有個術語叫做 Breakout action，其 id，即我們 controller extension 裡定義的 action ID，在 AnnotationHelper.js 的 getBreakoutActionButtonId 裡被解析出來：

![](https://img-blog.csdnimg.cn/img_convert/9bf3af9d84385786fcaabd7035c0d61d.png)

如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕

相關文章