SAPUI5 button - change backround color with css class

[antonette_oberholster]

Hallo guys

We have an SAPUI5 app which does validation and on failure some of the controls need to be colored red. So far we have had success with dropdowns and textfields.

There is however 1 button that needs to turn red. We were able to get it working in IE9, but the class does not seem to apply in IE11. Any ideas?

We use the following css:

.myRedButton.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS.sapUiBtn{

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efc2bf',endColorstr='#ffffff',GradientType=0);

color: red;

border-width: 1px;

border-style: Solid;

border-color: #CC0000;

}

Any ideas how to get it working in IE11 aswell?

Regards

Antonette

[Former Member]

Hello,

I created this example JS Bin - Collaborative JavaScript Debugging

The button and dropdown change the color if the dropdown is selected on the empty option.

It should work on IE also because I used only the fiori functionalities.

Regards

[antonette_oberholster]

Here is my code:

//Validation in Controller

var createWorkPlace = sap.ui.getCore().getControl("WorkPlace").getText();
if ( ! sap.ui.controller("healthservices.NoiseExposure").isTextFieldValid(createWorkPlace) ){
      errorExist = true;
      sap.ui.getCore().getControl("WorkPlace").addStyleClass("myWorkArea"); // only works in IE9
      //sap.ui.getCore().getControl("WorkPlace").setValueState(sap.ui.core.ValueState.Error); // not supported for buttons
      //sap.ui.getCore().getControl("WorkPlace").setStyle("Reject") ; //does not work

     errorData.push({ field : "Work Place",
          text : "Must be selected",
          type : "Error",
          icon : "sys-cancel-2"});
}

//Create button in View

btnWorkPlace = new sap.ui.commons.Button({
     id : "WorkPlace",
     text : "",
     width: "90%",
     tooltip : "Select Work Area",
     press : function(oEvent) {
          //this.setValueState(sap.ui.core.ValueState.None); // not supported for buttons
          this.removeStyleClass("myWorkArea");
          oController.getWorkAreaNMiss(oEvent,"WorkPlace", "WorkPlaceView");
     },   
});

//CSS in Index file

.myWorkArea.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS.sapUiBtn{
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#efc2bf',endColorstr='#ffffff',GradientType=0);
     background-image:linear-gradient(to bottom, #efc2bf,#ffffff);
     color: red;
     border-width: 1px;
     border-style: Solid;
     border-color: #CC0000;
}

Regards    

Antonette

[nandishm]

Hi Antonette Oberholster

Use Button property   type="Reject"

[antonette_oberholster]

Thank you Nandish! Will try and let you know.

Antonette

[antonette_oberholster]

Thanks guys

Still no luck...

Look at the pics below, there you will see what I mean with the 2 buttons are "different".

For the dropdowns and textfields we use .setValueState(sap.ui.core.ValueState.Error); to make them go red, but it's not allowed for buttons.

Regards

Antonette

[seVladimirs]

Right, now we need to support *gradients* in new Internet Explorer as well...

Gradient in CSS snippet below should work in IE11, try it by adding a new line to your CSS class attribute ".myRedButton.sapUiBtnStd.sapUiBtnNoGradient.sapUiBtnNorm.sapUiBtnS.sapUiBtn"

background-image:linear-gradient(to bottom, #efc2bf,#ffffff);

[Former Member]

Hello Antonette

From my experience, UI5 has its issues with custom CSS styles. I assume you use addStyleClass() to apply your custom css style. Try one of the following:

• Use setStyle("Reject") to apply UI5 default button style. Big advantage of this is, that you always have a theme dependent style.
• Set property "styled" to false. This will make a plain HTML button w/o UI5 styling. Therefore you need to update your css style accordingly (remove all "sapUi*" specifics).
• Use "!important" for your custom CSS style property (border-color: #CC0000 !important;). This is not recommended by SAP, because it could break themed styles. But it works 99% of the time.

[antonette_oberholster]

Thanks Philipp

I have tried all 3. No luck. In IE 11 the entire look and feel of the button is different. I had a look at this post How to overcome the css problems in IE | SCN, and tried it but also no luck.

Any other ideas?

Regards

Antonette

[Former Member]

Dear Antonette

Please review my example here: https://jsbin.com/febifuhave/edit?html,output

It showcases all three possibilities tested with IE11. If it still doesnt work for you, you might want to share your code

What do you mean with "the entire look and feel of the button is different"?

Regards

Philipp