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 : https://stackoverflow.com/questions/42221962/binding-in-control-with-class-attribute

After a small search, i find out that we can attach a key/value pair of custom data attached to an Element : https://openui5.hana.ondemand.com/#/api/sap.ui.core.CustomData

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">
							<customData>
								<core:CustomData xmlns:core="sap.ui.core" key="nodeColor" value="{Class}" 
								writeToDom="true"/>
							</customData>
							</StandardTreeItem>

.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.