How to change the background color of button in Footer area

[JerryWang]

• Step1. Find a working reference points to "Follow Up" button instance in the controller


• Step2. Create a custom CSS style embedded in the host View


• Update on 2015-09-24

In the blog How to remove the blue background color of Edit button in footer toolbar I explain the trick how to remove the blue background color of edit button. If you would like to render any button with any background color, it is still feasible. See one example below - the background color of "Follow Up" button is changed to red.


The basic idea comes from the UI5 API documentation for button:

Step1. Find a working reference points to "Follow Up" button instance in the controller

We need the reference to call addStyleClass to apply our own CSS style. The normal approach is to obtain the button id first and then call this.getView().byId("<button id>"). The button definition is returned by controller method getHeaderFooterOptions. Unfortunately within this method the button id is not available yet.

However if you continue to debug the UI5 framework about button instance population, you can find a way to get "Follow up" button reference by the path highlighted below.

As a result we can simply write the following code:

onAfterRendering: function() {

         var oEditButton = this._oControlStore.oButtonListHelper.aButtons[1].oButton;

         oEditButton.addStyleClass("jerryButton");

    },

Step2. Create a custom CSS style embedded in the host View

In the view where "Follow Up" button is located, create a new namespace "html" and a new CSS style.

in the runtime, we can see that our custom CSS style takes effect:

Update on 2015-09-24

I have discussed this requirement and my implementation with my colleague jwu01 and I realized the current one is not the best:

1. In the first step, I am using the private attribute _oControlStore of controller, which is not good. The attribute starting with "_" gives a hint that it is not intended to be used outside the context of its definition.

There is a better solution, using "public" getter method:

var oFooter = this.getView().getController().getPage().getFooter(),

    oFollowBtn = oFooter.getContentRight()[1];

2. In the second step, the current way to insert custom CSS style into S3.view.xml is invasive and pollute the view.

According to Separate of Concern principle, the view should only contain the layout definition, but not CSS style.

Having realized the fact that there is already a CSS file in the project, we can simply put our custom CSS style to this file.



This works since the Opportunity.css will anyway be loaded by standard implementation: 

jQuery.sap.includeStyleSheet(jQuery.sap.getModulePath("cus.crm.opportunity.css.Opportunity", ".css"), "sap-ui-theme-sap.crm");

Thank jwu01 to point it out to come to a better solution.