How to remove the blue background color of Edit button in footer toolbar

[JerryWang]

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