How can I bind text color in UI5 controls using the `class` attribute?

Binding in Control with "class" Attribute

Binding the color of text values in UI5 can be tricky, as directly binding the class via XML is not supported. However, a workaround exists using custom data:

Custom Data Approach:

1. In your control, add a CustomData element with writeToDom property set to your binding expression. This will add an HTML attribute based on the binding result:

   <code class="xml"><Text class="myControl">
     <customData>
    <core:CustomData writeToDom="{= ${HintTable>IS_ENABLED} === 'TRUE' ? 'green' : 'red'}" key="green" value="" />
     </customData>
   </Text></code>

2. In your CSS, target the control by its class and the HTML attribute:

   <code class="css">.myApp .sapText.myControl[data-green='green'] { color: green; }  </code>

Example:

https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

Additional Considerations:

• UI5 warns against using custom CSS due to potential breaking changes in future releases.
• For certain controls, such as sap.m.ObjectStatus or sap.m.FormattedText, semantic or industry-specific colorings are already applied, eliminating the need for custom CSS.
• Always consider the implications of using custom CSS and consult with stakeholders to ensure UI consistency and reduce technical debt.

The above is the detailed content of How can I bind text color in UI5 controls using the `class` attribute?. For more information, please follow other related articles on the PHP Chinese website!