Skip to Content
Author's profile photo Wouter Lemaire

Dynamic cell color in sap.ui.table.Table using XML views

Dear UI5 Developers,

I was looking for a way to set the color of cell in a sap.ui.table.Table dynamically. First thing I did was searching for an example on SCN. Most of them were using javascript to create the table. For example:

Changing color of table cells | SCN

http://scn.sap.com/community/developer-center/front-end/blog/2014/10/07/coloring-table-cells-conditionally-in-sap-ui5

http://scn.sap.com/message/16816288

All of them are good examples but I’m using XML views with bindings to a JSON model. I was looking for a smoother and cleaner way to do this. This is my solution:

1) Create the JSON model

Add a property to control the color for every column to you JSON model. For example:

     First column “col1”           ==> Property to manipulate the color “col1Color”

     Second column “col2”      ==> Property to manipulate the color “col2Color”

I can give this property a different color for every row.

This is how my JSONModel looks like:





onInit:function(){
        var data =
        {
          data:[
          {col1:"red cell",col1Color:"red",col2:"orange cell",col2Color:"orange"},
            {col1:"no color cell",col1Color:"",col2:"green",col2Color:"green"}
            ]
        };
        var json = new JSONModel(data);
        this.getView().setModel(json);



}

2) XML View

Create your table using colums and templates. In every template you add your preferred control, in my example “sap.m.Text”. In this control I’ve added “CustomData” to add the color property. I give it a key and a value. The value is connected with my JSON model using bindings to the color property.


<Text text="{col1}">
                <customData>
                <core:CustomData key="colorClass" value="{ path:'col1Color'}" writeToDom="true" />
                </customData>
</Text>

This code will generate a custom attribute into the HTML SPAN element.

span data colorclass.png

Full code of my XML view:


<t:Table id="table" visibleRowCount="17" rows="{/data}" >
  <t:columns>
  <t:Column id="col1"  >
  <Label text="Col1"/>
  <t:template>
     <Text text="{col1}">
       <customData>
   <core:CustomData key="colorClass" value="{ path:'col1Color'}" writeToDom="true" />
  </customData>
     </Text>
  </t:template>
  </t:Column>
  <t:Column id="col2"  >
  <Label text="Col2"/>
  <t:template>
     <Text text="{col2}">
       <customData>
   <core:CustomData key="colorClass" value="{ path:'col2Color'}" writeToDom="true" />
  </customData>
     </Text>
  </t:template>
  </t:Column>
  </t:columns>
  </t:Table>

3) CSS Style

This custom attribute in the span element can be used to access the span element from CSS.

For example:


span[data-colorclass="red"] {
background-color:#F00000 !important;
}

The result and full example of my code at Plunker:

https://embed.plnkr.co/3hOFL1hLaIKr1FMzXLrj/

/wp-content/uploads/2016/08/result_1006944.png

Now you have another option for dynamic cell colors in sap.ui.table.Table 🙂

Kind regards,

Wouter

Assigned tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Super! Thanks Wouter for sharing this.

      Author's profile photo Taras Kutovyi
      Taras Kutovyi

      Interesting idea, thank you!

       

      It worked for me. It’s good to have a possibility to change the color of the cell’s background.

      @Wouter Lemaire, how to add a custom attribute to the “TR” HTML element?

       

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      It's not possible to choose the dom elements to add the custom data. This depends on the control that you're using. But you can use css tricks to find and change children dom elements. For the TR tag, you could try adding it to the column control.

       

       

      Author's profile photo Ayaz Shah
      Ayaz Shah

      Great Blog Wouter! It really helped me. Thank you

      Wouter Lemaire How can I use this method on sap.m.Input control?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      It can be used on every control! 🙂

      Author's profile photo Blas _
      Blas _

      Thanks Wouter Lemaire it helped me, but like Ayaz Shah  i have an Input control, not Text, and doesn't work. Have you tried with this control?  any ideas why doesn't work?

      Regards

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      You have to check the DOM element that's rendered by the input control. This is probably not a "span" so you should use other css ...

      Author's profile photo Blas _
      Blas _

      True. Now with the input the DOM element that's rendered is an DIV, so the css changes ... and work! 🙂

       

      Do you know why this error in console " CustomData with key mydata should be written to HTML of Element sap.m.Input#application-Test-url-component---object--__clone116 but the value is not a string. " ??

      I have a String in value CustomData in the model: <core:CustomData key="mydata" value="{val}" writeToDom="true"></core:CustomData>

      It works well but appears this error.

       

      Thanks Wouter Lemaire

      Regards.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      I think this is due to the binding. In the initial load, before "{val}" is filled, it's not a string. As soon as the binding fills the value, it solves. I have them as well... Not sure how to get rid of it..

      Author's profile photo Blas _
      Blas _

      Ok, sure. I tried create a formatter for the initial load if val is null,... is the same, The important  is everything always works fine.

      Thanks Wouter Lemaire Regards

      Author's profile photo Mathew Davis
      Mathew Davis

      Great Blog...!!

      Can we implement this in combo box?

       

      Regards

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Normally yes. But each control has a different rendering and you maybe need to use something else then "span" in the css.

      Author's profile photo Sergey Kochetkov
      Sergey Kochetkov

      I got an error: CustomData with key mydata should be written to HTML of Element sap.m.Text#__text5-__clone3 but the value is not a string. -

      I am sure that I bind string to the "value"

      Is there any idea how to solve it?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      I think this happens when you're using bindings and the binding is not completed yet. I sometimes have this too but everything always works fine. I think you can just ignore this..

      Author's profile photo Sergey Kochetkov
      Sergey Kochetkov

      Thanks for the reply!