深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮

简介: 深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮

这是 Jerry 2021 年的第 33 篇文章,也是汪子熙公众号总共第 309 篇原创文章。


Jerry 的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流行前端框架繁荣生态圈的风采:在开发过程中遇到 Angular 技术问题时,很容易在社区里找到大量相关文章。除了每天我都要浏览的 Angular 官网之外,我也经常阅读一些国内外大神写的关于 Angular 源代码分析的博客。

image.png

同 Angular 相比,使用 SAP Fiori Elements 的从业者的绝对人数没有 Angular 多,除了 SAP 官网文档之外,介绍 Fiori Elements 源代码实现和工作原理的文章不多,中文材料就更少了。


因此 Jerry 试着用中文写了一些 SAP Fiori Elements 使用和工作原理介绍的文章,希望对这个开发框架的中文生态圈贡献一点微薄之力:


在没有任何前端开发经验的基础上, 创建第一个 SAP Fiori Elements 应用


答网友提问:使用 SAP Fiori Tools 创建的 Fiori Elements 应用,如何进行二次开发?


本地开发好的 SAP Fiori Elements 应用,如何部署到 ABAP 服务器上


深入掌握 SAP Fiori Elements 工作原理的前提条件:理解 Smart Field


本文继续通过 SAP Fiori Elements 应用一个实际增强的例子,来阐述其工作原理。


Jerry 上述列举的文章,介绍了如何基于 SAP ES5 Demo 系统上部署的一个 OData 服务,创建一个类型为 List Report 的 SAP Fiori Elements 应用。其界面如下:

image.png

本文我们会分享:如何在 SAP Fiori Elements 表格控件的工具栏里,添加新的自定义按钮。


本系列后续文章,Jerry 会介绍,如何在自定义按钮的点击事件处理函数里,用代码取得当前选中行项目的明细信息。


Jerry 之前的文章 答网友提问:使用 SAP Fiori Tools 创建的 Fiori Elements 应用,如何进行二次开发?,曾经提到了在 Fiori Elements 项目工程的 manifest.json 文件里,通过声明并实现 sap.ui.controllerExtensions 的方式来进行二次开发。sap.ui.controllerExtensions 可以理解成 ABAP 里的 BAdI definition,而我们基于 sap.ui.controllerExtensions 创建的自定义控制器 (controller.js), 则可类比成 ABAP BAdI 增强的具体实现。


在 manifest.json 的 extends 区域里维护如下代码:


image.png

相关文章
|
XML 移动开发 开发框架
SAP Fiori Elements propertyAnnotations 举例讲解
SAP Fiori Elements propertyAnnotations 举例讲解
|
XML 数据格式
SAP Fiori Elements SemanticKey 的语法
SAP Fiori Elements SemanticKey 的语法
关于 SAP Fiori Elements 应用的 ResponsiveTableColumnsExtension 扩展
关于 SAP Fiori Elements 应用的 ResponsiveTableColumnsExtension 扩展
|
IDE 搜索推荐 API
什么是 SAP Fiori Elements 的 extensionAPI
什么是 SAP Fiori Elements 的 extensionAPI
|
XML Web App开发 开发框架
深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
深入理解 SAP Fiori Elements 工作原理系列之二:如何给 SAP Fiori Elements 应用添加自定义按钮
|
前端开发
SAP Fiori Elements 应用里和 Fiori 3 相关的外观设置
SAP Fiori Elements 应用使用了 SAP Fiori 3 的外观。这一点从 Fiori Elements 应用里使用的 css 规则所在的 css 实现文件路径可以发现: http://localhost:8080/resources/sap/m/themes/sap_fiori_3/library.css 修改 css class .sapFAvatarSquare 的 border-radius 属性,能调整图标圆角的弧度。
SAP Fiori Elements 应用里和 Fiori 3 相关的外观设置
|
XML 存储 JSON
SAP Fiori Elements 学习笔记 - 2021年4月19日
订阅专栏 SAP Fiori Elements List Report 里 Smart Table 模板的设计原理: sap.suite.ui.generic.template.fragments.TableColumns 和 sap.suite.ui.generic.template.fragments.TableColumnListItem 分别显示表头和表的行内容。
SAP Fiori Elements 学习笔记 - 2021年4月19日
|
前端开发 IDE JavaScript
SAP Fiori Elements 概述
SAP Fiori elements provide designs for UI patterns and predefined templates for common application use cases.
SAP Fiori Elements 概述
使用 SAP WebIDE 创建 SAP Fiori Elements 应用
使用 SAP WebIDE 创建 SAP Fiori Elements 应用
使用 SAP WebIDE 创建 SAP Fiori Elements 应用