Skip to Content

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.
/wp-content/uploads/2015/09/clipboard1_795906.png

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

/wp-content/uploads/2015/09/clipboard2_795907.png

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.

/wp-content/uploads/2015/09/clipboard3_795914.png

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.

/wp-content/uploads/2015/09/clipboard4_795915.png

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.

/wp-content/uploads/2015/09/clipboard5_795916.png

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

/wp-content/uploads/2015/09/clipboard6_795917.png

Update on 2015-09-24

I have discussed this requirement and my implementation with my colleague Wu, Ji 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.

/wp-content/uploads/2015/09/clipboard11_796361.png

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 Wu, Ji to point it out to come to a better solution.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply