Skip to Content
avatar image
Former Member

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Jan 06, 2015 at 05:25 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 06, 2015 at 05:40 PM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 07, 2015 at 08:46 AM

    HI Domenik

    In this example, it works fine.

    Thanks

    -D

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 07, 2015 at 09:07 AM

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

    Add comment
    10|10000 characters needed characters exceeded