Question Re: Set class dynamically via odata binding in Technology Q&A

Set class dynamically via odata binding

Former Member — Tue, 24 Apr 2018 05:47:24 GMT

Hello,

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

Re: Set class dynamically via odata binding

vaibhav_gb — Wed, 25 Apr 2018 04:48:05 GMT

Hi,

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

give it a try here is an Example

regards

Re: Set class dynamically via odata binding

Former Member — Wed, 25 Apr 2018 12:49:21 GMT

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">
    <customData>
        <core:CustomData key="status-snr" value="status{oDataModel>StatusSnr}" writeToDom="true">
    <customData>
... 
</VBox>

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.

Regards

Christian