How to Dynamically Apply Colors to SAP.m Text Control Based on Boolean Values?

Binding in Control with "class" Attribute - A Workaround with Custom Data

This question addresses the challenge of dynamically applying colors to values in an SAP.m Text control based on their Boolean values. While the following XML code seems logical, it fails to alter the control's class:

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

UI5 does not allow direct class binding in XML views. However, a workaround exists using custom data:

1. Add Custom Data with writeToDom Set:
   Include a custom data element in your control:

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

2. Define CSS Selector:
   Add a corresponding selector in your CSS:

   <code class="css">.myApp .sapControlXYZ.myControl[data-green] { /* ... */ }</code>

This will add data-green to the control's HTML element based on the expression binding in writeToDom. The browser can then alter the color accordingly.

Example:

<code class="xml"><Text
  class="myControl"
  text="{value}"
>
  <customData>
    <core:CustomData xmlns:core="sap.ui.core"
      writeToDom="{= ${value} === 'TRUE' }"
      key="green"
      value=""
    />
  </customData>
</Text></code>

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

Caution:

SAP recommends against using custom CSS, especially for controls with predefined colors or formats. Customizing styles may impact app consistency and increase maintenance effort. Consult with stakeholders before modifying styles.

The above is the detailed content of How to Dynamically Apply Colors to SAP.m Text Control Based on Boolean Values?. For more information, please follow other related articles on the PHP Chinese website!