天天看点

如何在 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 表格工具栏里增添新的自定义按钮实现方式

继续阅读