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

時間 2021-05-10

標籤 javascript java json app 函數工具 spa debug code 欄目 JavaScript 简体版

原文原文鏈接

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

實現方式

在 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：java

這個 controller 裏包含了自定義的按鈕點擊處理函數：onCustomAction1.json

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

Controller 的完整實現代碼：app

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 名稱拼裝而成。ui

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

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

更多Jerry的原創文章，盡在："汪子熙":
code