Binding in Control with "class" Attribute

Binding to CSS classes in XML views through the "class" attribute is not directly supported by UI5. However, a workaround using custom data can be implemented:

Using Custom Data for Binding

1. Add custom data to your control, setting the writeToDom property and binding it to the desired expression:

2. Define a CSS selector that targets the control based on the custom data value. For example:

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

Example

In the following example, the "green" class is added to the control when its "enabled" property is true:

.myApp .sapText.myControl[data-green] { color: green; }
.myApp .sapText.myControl[data-red] { color: red; }

Considerations

• While binding to custom data allows for manipulating CSS styles, it is important to consider the following:
• Custom CSS styles should be used cautiously, as they can impact UI consistency and maintenance.
• Explore alternative solutions, such as using semantic classes or custom formatters, before resorting to custom CSS.