如何操作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

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色相关推荐

SAP UI5应用点了search按钮后的实现调试
Created by Wang, Jerry, last modified on Mar 23, 2015 要获取更多Jerry的原创文章,请关注公众号"汪子熙":
点击按钮修改背景颜色及节点操作隔行变色案例
<input type="button" value="点击设置" id="dtn"/><div id="dd& ...
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2023年4月29日为止,目前已经更新了 183 篇,专栏完成度为 61%,完成度已经超过了一半了. 本套 ...
如何使用原生的 JavaScript 代码，触发 SAP UI5 按钮控件的点击事件处理函数
我的技术交流群里,有朋友提问: 我有个 UI5 按钮,想用原生 js 去触发 click 事件.在 dom 上检测到 click 已经触发了,但是按按钮的动作响应没有发生.请问如何解决,谢谢. 解决这 ...
SAP Commerce Cloud Spartacus UI footer 区域的设计模型
本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细. 对应的 HTML markdup 入口:cx-footer-navigation: cx-footer-navigation ...
SAP UI5 sap.ui.vk 命名空间内的控件介绍
SAP 电商云 Spartacus UI 里的 spare part 3D 模型展示,使用的控件来自 SAP UI5 sap.ui.vk 下的控件. sap.ui.vk 库为应用程序中 2D 和 3D ...
深入学习SAP UI5框架代码系列之二：UI5 控件的渲染器
这是Jerry 2020年的第79篇文章,也是汪子熙公众号总共第261篇原创文章. 系列目录 (0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) ...
SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
在Kubernetes上运行SAP UI5应用(下): 一个例子体会Kubernetes内容器的高可用性和弹性伸缩...
2019独角兽企业重金招聘Python工程师标准>>> 上一篇文章在Kubernetes上运行SAP UI5应用(上),我介绍了如何在Docker里运行一个简单的SAP UI5应用 ...

如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色

如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色相关推荐

最新文章

热门文章