Skip to Content

Set class dynamically via odata binding

Apr 24 at 05:47 AM


avatar image


According to the value of an odata entity property I want to set the css class of a Text control. I tried this:

<Text class="status{oDataModel>StatusSnr}" .../>

In the style.css file I will have some classes with different background-color. For instance:

.status10 {background-color: lightgreen; }

However, it seems that the odata binding will not be evaluated. When I run my app and inspect the elements with F12 the text element is still shown with:

<span id="__text41" data-sap-ui="__text41" class="sapMText sapUiSelectable status{oDataModel>StatusSnr} sapMTextBreakWord" style="width:100%;text-align:right">10</span>

Any suggestions are welcome.

Thanks in advance

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
avatar image
Former Member Apr 25 at 04:48 AM


you can try setting the css property dynamically using the customData property of the control.

give it a try here is an Example



Show 1 Share
10 |10000 characters needed characters left characters exceeded

Hello GB,

thank you very much for this hint. I actually found a solution using customData property. In the view I use:

<VBox class="defaultStyle">
        <core:CustomData key="status-snr" value="status{oDataModel>StatusSnr}" writeToDom="true">

and in the style.css I have an attribute selector:

.defaultStyle {
    background-color: lightgrey;

[data-status-snr="status10"] {
  background-color: lightgreen;

So when {oDataModel>StatusSnr} is evaluated to '10' the attribute data-status-snr will have value of 10 und therefore background-color is lightgreen.