cancel
Showing results for 
Search instead for 
Did you mean: 

Color table cells depending on value of entry in row (UI5 & JSON)

0 Kudos

Hello all,

I've stuck here a bit. There have been some discussions about how to color the cells of a table that has been bound to a JSON data model. I found some answers how to color individual cells (http://http://scn.sap.com/thread/3383698), but I have a hard time to fulfill the following requirement (rephrased for simplicity):

Given value "a" in the first cell of a table row, color the row cells 1 - 4 in blue, and 5-7 in red.

Given value "b" in the first cell of a table row, color the row cells 1 - 4 in yellow and 5-7 in green.

This wouldn't be a problem with normal HTML as I could easily assign style classes to every cell, however I can't find the solution for the UI5 table.

Any ideas?

Thanks,
Christian

Accepted Solutions (1)

Accepted Solutions (1)

former_member184867
Active Contributor
0 Kudos

Hi Christian ,

you can use


Option 1 : UI5 formatter + custom data with writeToDom option + css selector

Option 2 : UI5 formatter + addStyleClass method

to achieve this.

Working example at  JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...

where the color of the cells are changing based on male(m) or female(f) indicator in the JSON data.

br,

Atanu

0 Kudos

Thanks a lot Atanu, it works perfect! I chose option 2 because it seems to me the cleaner one.

I had to override a few of the standard styles to be able to change the background.

Thanks again for the helpful answer!

Best regards,
Christian

Former Member
0 Kudos

Hi Christian,

in the formatter function you should remove the previously added classes via "removeStyleClass" - otherwise the classes will stack (which can be observed using firebug or so) and this may result in a strange behaviour.

Greets,

ben

Former Member
0 Kudos

Nice example!

Maybe you got an idea how to color the whole row depending on a cell value?

Greets,

ben

Former Member
0 Kudos

Hi Atanu,

Nice example there, but there is one problem which I have illustrated here...

http://jsbin.com/qutaxixona/1/

Try scrolling the table, you'll see that the conditionally coloured cells do not scroll with the data.

Any clue on how to fix that ?

Regards,

Nishant.

Former Member
0 Kudos

Hi Nishant,

not sure if I undestand you correctly.

When I scroll the table, the data scrolls with the table correctly, but in the "Last Name" column the formatting gets messed up.

To solve this, you need to remove the previously added classes:


  // Approach 2

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

            parts: [

                {path: "sex" },

                {path: "lname" }

            ],

            formatter: function(sex, lname){

               // Remove previously added classes

              this.removeStyleClass("cyan").removeStyleClass("yellow");

              if(sex == "m" ){

                <!-- approach 2 step B : Add Css style class to element -->

                this.addStyleClass("yellow");

          

              }  else  if(sex == "f" )

              {

                   this.addStyleClass("cyan");

          

              }

              return lname ;

        

            }

        

        }) ;

    oTable.addColumn(new sap.ui.table.Column({ label: "Last Name",

            template: template,

     }));

Same for the first approach using where you have to remove the custom data instead if the class.

This should solve the problem. (By the way this is already mentioned in this thread in my post from )

Greeets,

ben

Former Member
0 Kudos

Thanks Ben,

Mea culpa. I did not outline the issue clearly enough.

Now, I have modified the bin to illustrate my point clearly.

http://jsbin.com/powuso/1/

Please notice the row with first name "nishant" in Green and last name "gupta" in Cyan.

Now when I Scroll the table down, such that the row having "Nishant" moves two rows up, I see that the background colour of "nishant" has changed to "Pink", whereas it should have remained "Green" because it was formatted as such.

From the scrolling behavious it looks like the cells remain in place with their formatting, while the data within them is replaced.

Please let me know if I am not still clear ...

Regards,

Nishant.

Former Member
0 Kudos

Hi Nishant,

I think I already gave you the answer - you have to remove the old classes before you add a new one:

               // Remove previously added classes

              this.removeStyleClass("cyan").removeStyleClass("yellow");


Here's a fiddle with 2. approach using CSS-classses:

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

Answers (1)

Answers (1)

Former Member
0 Kudos

Dear Christian, I have the same task and implemented it following your solution. I need to color whole cell in the table though, e.g. td element and not span inside. Do you or anyone on the thread know how to do that. I spent lots of time and failing to achieve that

I can't get parent from formatter function.

0 Kudos

Hi Ella,

I also tried to do it for the full td element and not just the span for some time. I failed and finally settled for "faking" it by reducing the padding and margin to 0 using the css styles. So the end result is what I wanted, but admitted not in any way elegant.

Sorry that I can't be of further help.