Dynamisches Ändern der Titelfarbe

Triggertyp: Einfach Aktionstyp: 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 auf die CSS-Klassen im Eigenschaftsfeld Benutzerdefiniertes CSS verwiesen haben, entwerfen Sie Ihr Formular mit den folgenden Schritten:

1. Fügen Sie eine Textfeld- Komponente und eine Radio- Komponente hinzu. Achten Sie auf deren Eigenschaftsnamen, da Sie diese in Ihrer erweiterten Logik verwenden.

2. Legen Sie auf der Registerkarte Anzeige der Textfeldkomponente eine standardmäßige benutzerdefinierte CSS-Klasse fest. Um beispielsweise Rot als Standardfarbe des Textfelds festzulegen, verwenden Sie die Klasse textFieldLabel-red . Die Klasse muss in der CSS-Datei definiert sein, die Sie für den Abschnitt Voraussetzungen erstellt haben.

   

3. For the Radio component, add two values for the colors green and red.

4. Go to the Logic tab of the Text Field component.

5. Fügen Sie eine Logik hinzu und nennen Sie sie "color selection".

6. Select the Simple trigger type.

   1. Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die Option Radio ({radio_field_key}) aus.
   2. Geben Sie im Feld Hat der 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. Select the Merge Schema Component action type and enter the following snippet:

   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.