Skip to Content

Set class dynamically via odata binding


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

Add comment
10|10000 characters needed characters exceeded

  • Follow
  • Get RSS Feed

1 Answer

  • Best Answer
    avatar image
    Former Member
    Apr 25, 2018 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



    Add comment
    10|10000 characters needed 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.