如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色
Recently I get a customer requirement to remove the background color of edit button in footer toolbar:
The expected behavior:
The screenshot is made from CRM Fiori application “My Opportunity”. Customer are using it in their Android device. They complained since the button in Android platform will have blue as its background color automatically when clicked, so it is difficult to judge whether a button with blue background itself is actually clicked or not.
Here below is my analysis process how to achieve the customer requirement.
(1) First of all, we need to figure out how the blue background color is implemented in the standard application. Check related controller code regarding footer toolbar button definition, and there is no style definition regarding Edit button. So it must definitely be done by UI5 framework.
Use Chrome development tool, figure out which native html element is responsible for edit button rendering.
And then we find this CSS class div.sapMBtnInner.sapMBtnEmphasized has controlled the button style.
It should easily be verified, since we de-select the checkbox for property “background-color” and the appearance of Edit button is just what we expect.
(2) Now we need to know how this CSS style is added by UI5 framework. Search by keyword “Emphasized” and I just find what I look for in a second. In line 80 there is an IF evaluation to check the availability of oEditBtn of variable oController._oHeaderFooterOptions, whose value is filled by we application code. It means if application has explicitly declared the edit button, it is set with style = Emphasized automatically in line 87.
Then solution is found: just manipulate the oHeaderFooterOptions by implementing extension hook:
extendHeaderFooterOptions : function(oHeaderFooterOptions) {
var that = this;
oHeaderFooterOptions.buttonList.splice(0, 0, {sI18nBtnTxt : "EDIT",
onBtnPressed : function(evt) {
that.onEdit();
},
bEnabled : true
});
oHeaderFooterOptions.oEditBtn = null;
},
The idea is to clear the oHeaderFooterOptions.oEditBtn manuall so that the IF evaluation in line 80 will not succeed, and then we jut define the Edit button as “normal” button by inserting it into the array oHeaderFooterOptions.buttonList. However while testing, it is found that every time you navigate to Edit mode and then back, there will be a new Edit button generated in toolbar.
The solution is to simply introduce a Boolean variable to ensure the Edit button insertion is only executed once:
extendHeaderFooterOptions : function(oHeaderFooterOptions) {
if( this.bEditButtonDefined)
return;
this.bEditButtonDefined = true;
var that = this;
oHeaderFooterOptions.buttonList.splice(0, 0, {sI18nBtnTxt : "EDIT",
onBtnPressed : function(evt) {
that.onEdit();
},
bEnabled : true
});
oHeaderFooterOptions.oEditBtn = null;
}
If you would like to change the button’s background color to any other color, please refer to this blog: How to change the background color of button in Footer area
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring Boot 特性之 Fluent Builder API
- 一文搞懂 Flink Timer
- DATE类型的“小陷阱”
- 简单聊下 Java Agent
- Byte Buddy 基础知识
- 两种在SAP Cloud Application Studio里通过编程对C4C UI字段赋值的方法
- 如何使用 BTrace v.2.0.1
- 三分钟写一个 Java 多线程
- 使用纯粹的ABAP位操作实现两个整数相加
- 如何给SAP Cloud for Customer UI上的字段添加自定义校验逻辑
- guide-rpc-framework 源码学习
- 如何参与一个开源项目(多图)
- 微信小程序支付服务端.net core实现,简单直接
- PBE加密 .net 实现
- .net Core 图片验证码 基于SkiaSharp实现