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">&lt;Text class=&quot;myTextColor&quot;&gt;
  &lt;customData&gt;
    &lt;core:CustomData writeToDom=&quot;{= ${HintTable&gt;IS_ENABLED} === 'TRUE' ? 'data-green' : 'data-red'}" key="color" value="" /&gt;
  &lt;/customData&gt;
&lt;/Text&gt;</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!