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