Skip to Content
Personal Insights
Author's profile photo Saad Igueninni

A small tip to binding model to ‘class’ attribute

I came across a problem that i guess many of you faced or can face one day.I had a requirement to dynamically change font color of an Item in sap.m.tree.

Naively, I tried to bind the ‘class’ attribute like this :


<StandardTreeItem title="{Description}" selected="{selected}" class="{Class}">


But i realised that this canno’t be done, UI5 doesn’t support binding for class in XML view directly as it’s not a valid property of ManagedObject :

After a small search, i find out that we can attach a key/value pair of custom data attached to an Element :

Th idea is to attach a key/value having the value binded to my model, and with CSS selectors, target this dom element to change style.

This was achieved like this :

<StandardTreeItem title="{Description}" selected="{selected}" class="treeItem">
								<core:CustomData xmlns:core="sap.ui.core" key="nodeColor" value="{Class}" 
.treeItem[data-nodecolor='orangeMandatory'] {
    color: #ff5c00;
    font-weight: bold;

.treeItem[data-nodecolor='blueChildMandatory'] {
    color: #009db8;
    font-weight: bold;



I hope this can help someone.

If someone have a better or more elegant idea, it will be great if he can share it with us.






Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Nice job!!!  We are slowly getting into more web type development.  This will help me.  I won't need to search for the answer like you did.