Binding in Control with "class" Attribute

Issue

I want to handle the colors of the values in Text control (sap.m). If the value is "TRUE", the color is green. Otherwise it will be red if the value is "FALSE".

<Text
  class="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'greenTextColor' : redTextColor'}"
  text="{HintTable>IS_ENABLED}"
/>

But it doesn't seem to be working. I mean, the class cannot receive the "greenTextColor" nor "redTextColor".

Did I make something wrong?

Solution

UI5 does not support binding for class in XML view directly as it's not a valid property of ManagedObject. However, there is a workaround by adding custom data:

1. Add CustomData with the property writeToDom to your control. Use your expression binding there:

   <ControlXYZ class="myControl">
     <customData>
       <core:CustomData xmlns:core="sap.ui.core"
         writeToDom="{= expression }"
         key="green"
         value=""
       />
     </customData>
   </ControlXYZ>

   Depending on the outcome of your expression binding, data-green will be added to the control's HTML element. The browser can then manipulate the color corresponding to the attribute selector.

2. Your CSS should thus include the selector accordingly:

   .myApp .sapControlXYZ.myControl[data-green] { /* ... */ }

Here is an example: https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

Of course, you can define a binding in value="{...}" too in order to increase the CSS specificity.

.myApp .sapControlXYZ.myControl[data-green="someBoundValue"] { /* ... */ }

To learn more about how to leverage custom data in DOM, check out the documentation topic Writing Data to the HTML DOM as DATA-* Attribute.

---

⚠️ Before using custom CSS..

There might be controls which don't require custom CSS. For example:

• Text with semantic or industry-specific colors: sap.m.ObjectStatus, .ObjectNumber, etc.
• Text with custom format: sap.m.FormattedText.

SAP explicitly warns not to use custom CSS styles.

The HTML and CSS generated by OpenUI5 isn't part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time OpenUI5 is updated. [...] As such, SAP Fiori launchpad apps shouldn't override styles.

Generally, the importance of adding custom CSS styles should be always questioned and double-checked with your stakeholders to improve the UI consistency across Fiori apps as well as to reduce the overall TCO.

Answered By - Boghyon Hoffmann