Wie wende ich Farben basierend auf booleschen Werten dynamisch auf die SAP.m-Textsteuerung an?

Binding in Control mit dem Attribut „class“ – Eine Problemumgehung mit benutzerdefinierten Daten

Diese Frage befasst sich mit der Herausforderung der dynamischen Anwendung von Farben auf Werte in ein SAP.m-Textsteuerelement basierend auf ihren booleschen Werten. Obwohl der folgende XML-Code logisch erscheint, ändert er die Klasse des Steuerelements nicht:

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

UI5 erlaubt keine direkte Klassenbindung in XML-Ansichten. Es gibt jedoch eine Problemumgehung mit benutzerdefinierten Daten:

1. Benutzerdefinierte Daten mit writeToDom Set hinzufügen:
   Fügen Sie ein benutzerdefiniertes Datenelement in Ihr Steuerelement ein:

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

2. CSS-Selektor definieren:
   Fügen Sie einen entsprechenden Selektor in Ihrem CSS hinzu:

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

Dies wird hinzugefügt data-green zum HTML-Element des Steuerelements basierend auf der Ausdrucksbindung in writeToDom. Der Browser kann dann die Farbe entsprechend ändern.

Beispiel:

<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>

Achtung:

SAP rät von der Verwendung von benutzerdefiniertem CSS ab, insbesondere für Steuerelemente mit vordefinierten Farben oder Formaten. Das Anpassen von Stilen kann sich auf die App-Konsistenz auswirken und den Wartungsaufwand erhöhen. Konsultieren Sie die Beteiligten, bevor Sie Stile ändern.

Das obige ist der detaillierte Inhalt vonWie wende ich Farben basierend auf booleschen Werten dynamisch auf die SAP.m-Textsteuerung an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!