如何在 SAP Fiori Elements List Report 表格工具栏里增添新的自定义按钮

简介: 如何在 SAP Fiori Elements List Report 表格工具栏里增添新的自定义按钮

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

image.png

实现方式

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

image.png

"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:


image.png


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


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


image.png

Controller 的完整实现代码:

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

运行时,这个自定义按钮被渲染如下:


image.png


点击之后,弹出了 onCustomAction1 里调用的 alert 语句:


image.png


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


image.png


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


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

image.png


image.png

相关文章
|
2月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
|
2月前
|
网络安全
实战分析 - 为什么有些 SAP ABAP 程序,启动之后界面有些按钮是灰色的试读版
实战分析 - 为什么有些 SAP ABAP 程序,启动之后界面有些按钮是灰色的试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
|
2月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
SAP Fiori Elements 应用里图片字段(Image)的显示原理介绍试读版
|
2月前
|
API
SAP Fiori Elements 针对 OData V2 和 V4 的 Extension API
SAP Fiori Elements 针对 OData V2 和 V4 的 Extension API
|
2月前
|
设计模式 前端开发 JavaScript
关于 SAP Fiori Elements List Report Go 按钮的实现
关于 SAP Fiori Elements List Report Go 按钮的实现
|
2月前
|
SQL JSON Java
Java【问题记录 02】对象封装+固定排序+list All elements are null引起的异常处理+Missing artifact com.sun:tools:jar:1.8.0
Java【问题记录 02】对象封装+固定排序+list All elements are null引起的异常处理+Missing artifact com.sun:tools:jar:1.8.0
52 0
|
8月前
|
前端开发 开发者 容器
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍