Binding in the control to the class attribute

Question

I want to handle the colors of values ​​in Text control (sap.m). If the value "TRUE" , the color is green. Otherwise, it will be red if the value is "FALSE" .

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

But it does not seem to work. I mean, the class cannot get "greenTextColor" and "redTextColor" .

Did I do something wrong?

Answer 1

UI5 does not support binding for a class in an XML representation directly, since it is not a valid ManagedObject property. However, there is a workaround by adding user data :

1. Add CustomData with the writeToDom ^api property to your writeToDom control. Use your binding expression there:

    <Text xmlns="sap.m" class="myText" text="..."> <customData> <core:CustomData xmlns:core="sap.ui.core" key="green" value="foo" writeToDom="{= expression}" /> </customData> </Text> 

   Depending on the result of the binding of your expression, DATA-green will be added to the HTML control. Then the browser can manipulate the color corresponding to the attribute selector .

2. So your CSS should include a selector accordingly:

    .myApp .sapMText.myText[data-green] { /* ... */ } 

Here is an example: https://embed.plnkr.co/LAv1qfsUjX0Anu7S/

Of course, you can also bind everything you want to the value property of CustomData to respond to more CustomData CSS selectors. To learn more about how to use the user data in the DOM, read the section of documentation recording the data in the HTML DOM as a DATA- * Attribute .

---

The note

• SAP recommends avoiding specifying colors using custom CSS classes.

  Fiori apps should not redefine styles. [...] Do not specify colors in custom CSS, but use standard theme-dependent classes instead.

• There are alternatives when it comes to sap.m.Text style:
  • Text with semantic colors : sap.m. ObjectStatus sap.m. ObjectStatus sap.m. ObjectStatus sap.m. ObjectStatus .ObjectNumber
  • Text with custom formats: sap.m. FormattedText sap.m. FormattedText sap.m. FormattedText sap.m. FormattedText .

As a general rule, the importance of adding custom CSS styles should always be questioned and cross-checked with interested parties, not only for consistency of the user interface in Fiori applications, but also to reduce maintenance costs that would otherwise increase significantly if you use custom CSS.

Answer 2

• If you use a local JSONModel for HintTable, and the IS_ENABLED property is at the root level of the model, you need to access it using the slash "HintTable>/IS_ENABLED" . Give it a try.
• I'm not sure if class attributes can be linked. Never tried it.

Answer 3

Using existing style classes

The current decision is applicable only if the style classes can be defined independently. UI5, however, also supports predefined CSS classes that can be used directly. The next approach is more or less a trick.

 <FlexBox renderType="Bare"> <Input> <layoutData> <FlexItemData styleClass="{= ${property} ? 'sapUiTinyMargin' : 'sapUiLargeMargin'}"/> </layoutData> </Input> </FlexBox> 

There are only a few modules that support binding CSS classes directly as a property (e.g. styleClass ). sap.m.FlexItemData is one of them and can be applied to all controls.

necessary condition

The target control must be inside the <FlexBox> container. Be careful to apply renderType="Bare" . Otherwise, a <div> -element will be added between the target control and the FlexBox container, resulting in unexpected behavior.

restriction

• Predefined background colors, such as sapThemeHighlight-asBackgroundColor , do not work because the FlexBox has its own class that defines the background color of its children.
• Because the target control needs to be packaged, the above approach cannot be applied to aggregates with a type other than sap.ui.core.Control . For example: you cannot wrap sap.m.StandardListItem sap.m.FlexBox if the element should be used as a <items> template control for binding <items> in sap.m.List . The list expects a control of type sap.m.ListItemBase .

Answer 4

The answer of Bogion Hoffman is magnificent!

But if none of its options work for you, you can always resort to using two different copies of the Text element along with the visible attribute (which supports expression binding):

 <Text class="greenTextColor" text="{HintTable>IS_ENABLED}" visible="{= ${HintTable>IS_ENABLED === 'TRUE'} }" /> <Text class="redTextColor" text="{HintTable>IS_ENABLED}" visible="{= ${HintTable>IS_ENABLED !== 'TRUE'} }" /> 

Tipp:
Simplify your expressions if your model contains strings instead of strings:

  visible="{= ${HintTable>IS_ENABLED} }" 

and

  visible="{= !${HintTable>IS_ENABLED} }"