How to Bind Color Changes to a Control\'s Class Attribute in XML View?

Binding in Control with "class" Attribute: Workaround for XML View

In XML view, binding the class property of a control directly is not supported. To achieve the desired color change based on a value, you can leverage custom data as a workaround.

Step 1: Add Custom Data with writeToDom

Within your control, add custom data with the writeToDom property set to the expression binding that determines the color. For example:

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

Step 2: Customize CSS with Attribute Selector

In your CSS, use an attribute selector to manipulate the color based on the data-green or data-red attribute added to the control. For instance:

<code class="css">.myTextColor[data-green] {
  color: green;
}

.myTextColor[data-red] {
  color: red;
}</code>

Additional Considerations:

• Consider using controls with built-in semantic or industry-specific colors instead of custom CSS.
• Note that SAP advises against overriding default styles to ensure UI consistency and reduce TCO.
• Refer to the documentation on Writing Data to the HTML DOM as DATA-* Attribute for more information on using custom data.

The above is the detailed content of How to Bind Color Changes to a Control\'s Class Attribute in XML View?. For more information, please follow other related articles on the PHP Chinese website!