Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Problems with CSS Style - Color

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 Member
Not what you were looking for? View more on this topic or Ask a question