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:
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);
}
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>
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 :smile:
Kind regards,
Wouter
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
11 | |
9 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |