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.

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/

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

Kind regards,

Wouter