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/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
Super! Thanks Wouter for sharing this.
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?
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.