Dynamisches Ändern der Titelfarbe

Trigger-Typ: Einfach Actions : Komponentenschema . zusammenführen

Diese erweiterte Logik ändert die Beschriftungsfarbe einer Textfeldkomponente, wenn der Benutzer die gewünschte Farbe aus einer Liste auswählt. Die Änderung wird mithilfe einer benutzerdefinierten CSS-Datei angewendet.

Voraussetzungen: Fügen Sie die CSS-Klassen hinzu, die die neue Farbe für das Textfeld im Eigenschaftsfeld Benutzerdefiniertes CSS des Formulars enthalten.

Das folgende CSS-Snippet enthält beispielsweise eine Klasse, die die Beschriftungsfarbe auf Grün oder Rot festlegt:

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

Nachdem Sie im Eigenschaftsfeld „Benutzerdefiniertes CSS“ auf die CSS-Klassen verwiesen haben, entwerfen Sie Ihr Formular mit den folgenden Schritten:

1. Fügen Sie eine Textfeldkomponente und eine Optionsfeldkomponente hinzu. Achten Sie auf deren Eigenschaftsnamen, wenn Sie diese in Ihrer erweiterten Logik verwenden.
2. Legen Sie auf der Registerkarte Anzeige der Textfeldkomponente eine standardmäßige benutzerdefinierte CSS-Klassefest. Um beispielsweise Rot als Standardfarbe für das Textfeld festzulegen, verwenden Sie die textFieldLabel-red -Klasse. Die Klasse muss in der CSS-Datei definiert sein, die Sie für den Abschnitt Voraussetzungen erstellt haben.
   
   

   

   
   
3. Für die Komponente Radio fügen Sie zwei Werte für die Farben green und redhinzu.
4. Wechseln Sie zur Registerkarte Logik der Komponente Textfeld .
5. Fügen Sie eine Logik hinzu und nennen Sie sie "color selection".
6. Wählen Sie den Triggertyp Einfach aus.
   1. Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die Option Radio ({radio_field_key})aus.
   2. Geben Sie im Feld Hat den Wert "green"ein.
   Die obige Konfiguration erkennt, ob der Benutzer "green" aus den Optionsfeldern auswählt und löst die Actions aus, um die Farbe der Textfeldbeschriftung zu ändern.
7. Fügen Sie eine Actions und nennen Sie sie "change color using css".
8. Wählen Sie den Aktionstyp Schemakomponente zusammenführen aus und geben Sie das folgende Snippet ein:

   return { customClass: "textFieldLabel-green" }

9. Speichern Sie die Aktion und die Logik.
10. Speichern Sie die Komponente.

Wenn der Geschäftsanwender zur Runtimedas Optionsfeld "green" auswählt, wird die Beschriftung des Textfelds grün. Wenn der Benutzer das Optionsfeld "red" auswählt, wird die Beschriftung des Textfelds rot.