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

 

 

 

 

 

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.