Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Dasig
Participant
1,615
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.

 

 

 

 

 
1 Comment
Labels in this area