UI5 doesn’t support binding for class
in XML view directly as it’s not a valid property of ManagedObject
. Nevertheless, there is a workaround by adding custom data:
-
Add
CustomData
with the propertywriteToDom
to your control. Use your expression binding there:<ControlXYZ class="myControl"> <customData> <core:CustomData xmlns:core="sap.ui.core" key="green" value="foo" writeToDom="{= expression}" /> </customData> </ControlXYZ>
Depending on the outcome of your expression binding,
data-green
will be added to the control’s HTML element. The browser can then manipulate the color corresponding to the attribute selector. -
Your CSS should thus include the selector accordingly:
.myApp .sapControlXYZ.myControl[data-green] { /* ... */ }
Here is an example: https://embed.plnkr.co/LAv1qfsUjX0Anu7S/
Of course, you can also bind anything you want to the value
property of the CustomData
in order to react on more granular CSS selectors. To learn more about how to leverage custom data in DOM, check out the documentation topic Writing Data to the HTML DOM as DATA-* Attribute.
⚠️ Before using custom CSS..
-
There might be controls which don’t require custom CSS. Especially when it comes to styling
sap.m.Text
for example, there is:- Text with semantic colors:
sap.m.ObjectStatus
or.ObjectNumber
. - Text with custom format:
sap.m.FormattedText
.
- Text with semantic colors:
-
SAP explicitly warns not to use custom CSS styles.
As stated in the Compatibility Rules, the HTML and CSS generated by SAPUI5 is not part of the public API […]. As such, SAP Fiori launchpad apps should not override styles.
Generally, the importance of adding custom CSS styles should be always questioned and double-checked with stakeholders to improve UI consistency across Fiori apps as well as to reduce the maintenance costs and TCO that would otherwise rise significantly with custom CSS.