Comment appliquer dynamiquement des couleurs au contrôle de texte SAP.m en fonction de valeurs booléennes ?

Liaison dans Control avec l'attribut "class" - Une solution de contournement avec des données personnalisées

Cette question aborde le défi de l'application dynamique de couleurs aux valeurs dans un contrôle Texte SAP.m basé sur leurs valeurs booléennes. Bien que le code XML suivant semble logique, il ne parvient pas à modifier la classe du contrôle :

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

UI5 n'autorise pas la liaison directe de classe dans les vues XML. Cependant, il existe une solution de contournement en utilisant des données personnalisées :

1. Ajouter des données personnalisées avec writeToDom Set :
   Inclure un élément de données personnalisé dans votre contrôle :

   <code class="xml"><ControlXYZ class="myControl">
     <customData>
       <core:CustomData xmlns:core="sap.ui.core"
         writeToDom="{= expression }"
         key="green"
         value=""
       />
     </customData>
   </ControlXYZ></code>

2. Définir le sélecteur CSS :
   Ajoutez un sélecteur correspondant dans votre CSS :

   <code class="css">.myApp .sapControlXYZ.myControl[data-green] { /* ... */ }</code>

Cela ajoutera data-green à l'élément HTML du contrôle en fonction de la liaison d'expression dans writeToDom. Le navigateur peut alors modifier la couleur en conséquence.

Exemple :

<code class="xml"><Text
  class="myControl"
  text="{value}"
>
  <customData>
    <core:CustomData xmlns:core="sap.ui.core"
      writeToDom="{= ${value} === 'TRUE' }"
      key="green"
      value=""
    />
  </customData>
</Text></code>

<code class="css">.myApp .sapText.myControl[data-green] { color: green; }
.myApp .sapText.myControl:not([data-green]) { color: red; }</code>

Attention :

SAP recommande de ne pas utiliser de CSS personnalisé, en particulier pour les contrôles avec des couleurs ou des formats prédéfinis. La personnalisation des styles peut avoir un impact sur la cohérence de l'application et augmenter les efforts de maintenance. Consultez les parties prenantes avant de modifier les styles.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!