天天看點

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

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

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

實作方式

  1. 在 SAP Fiori Elements 項目工程裡,修改 manifest.json,添加如下代碼:
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    我們需要建立一個 sap.ui.controllerExtensions 的具體實作,該擴充的 id 為 com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension:
如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式

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

  1. 實作 sap.ui.controllerExtensions. 兩處的 controller extension id 要一緻。
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    Controller 的完整實作代碼:
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    運作時,這個自定義按鈕被渲染如下:
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    點選之後,彈出了 onCustomAction1 裡調用的 alert 語句:
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    檢視運作時該按鈕渲染的 HTML 代碼,發現是 Fiori Elements id + 應用類型(sap.suite.ui.generic.template.ListReport.View.ListReport) + manifest.json 裡定義的 entitySet + manifest.json 裡定義的 Action 名稱拼裝而成。
    如何在 SAP Fiori Elements List Report 表格工具欄裡增添新的自定義按鈕實作方式
    sap.suite.ui.generic.template.ListReport.view.ListReport

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

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

繼續閱讀