Recently I get a customer requirement to remove the background color of edit button in footer toolbar:
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.
(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.
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.