Problems with CSS Style - Color

[former_member482840]

Hello Community,

I am currently working on a SAP UI 5 Project and my current issue is to color cells of the table, depending of the content of another cell.

This is in the view:

var template = new sap.ui.commons.TextView().bindProperty("text", {

            parts: [

                {path: "RF_TRANS" },

                //{path: "EXECUTION" },

                //{path: "AVERAGE" },

                //{path: "MAX" },

                //{path: "CNT_1" },

                {path: "CNT_2" },

                {path: "CNT_3" }

                //{path: "PERC_1" },

                //{path: "PERC_2" },

                //{path: "PERC_3" },

                //{path: "PERC_4" }

            ],

           formatter: function(RF_TRANS, CNT_2, CNT_3){    

               this.removeStyleClass();

              if(CNT_2  < 10  ){

                this.addStyleClass("cyan");

              return RF_TRANS ;

              }  else  if(CNT_3 > 1)

              {

                   this.addStyleClass("green");

                    return RF_TRANS ;

              }

              else  if(CNT_3 < 1)

              {

                   this.addStyleClass("red");

                    return RF_TRANS ;

              }

              return RF_TRANS ;

            }

        }) ;

This is in the index.html:

<style>  

.yellow{ background-color : rgba(255, 255, 0, 0.35) }

.red {  background-color : rgba(255, 0, 0, 1) }

.cyan {  background-color : rgba(0, 255, 255, 0.28) }

.green {background-color : rgb(0,255,0) }

</style>

It works quite well and I can color the cells, but all of my cells (of the selected column) are green. If I change the Style Class of the first part into

if(CNT_2  < 10  ){

    this.addStyleClass("yellow");

   return RF_TRANS ;

}

it works. But I have to take the color cyan and not yellow.

Thanks for your help!

Domenik

[former_member482840]

Thank you all for your great help! The use of the removeStyleClass was the problem!

[former_member182862]

HI Domenik

In this example, it works fine.

Thanks

-D

[maximilian_lenkeit]

In the first line of the formatter you're calling removeStyleClass without a parameter. Note that the method is singular, so you'll need to pass the class name. In fact, you'll need to call that method with each custom class that you might assign in the formatter.

Currently, removeStyleClass doesn't do anything. Having said that, the CSS classes are only being added to your control. Let's say your control has .red and .yellow, .yellow will dominate. If it's .red and .green, .green will dominate. The reason for that is the sequence of custom styles in the style tag.

So in a nutshell, if you remove the style classes properly in the formatter, it will solve the problem.

- Max

[SergioG_TX]

sometimes you need to add --  !important at the end of your style as another property may be overriding the original behavior.

Also, change the class name from yellow to cyan and see if that works.