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
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.
Great Blog Wouter! It really helped me. Thank you
Wouter Lemaire How can I use this method on sap.m.Input control?
It can be used on every control! 🙂
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
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 ...
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.
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..
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
Great Blog...!!
Can we implement this in combo box?
Regards
Normally yes. But each control has a different rendering and you maybe need to use something else then "span" in the css.
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?
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..
Thanks for the reply!