Modification dynamique de la couleur du titre

Type de déclencheur : Type d'action simple : Fusionner le schéma de composant

Cette logique avancée modifie la couleur de l'étiquette d'un composant de champ de texte lorsque l'utilisateur sélectionne la couleur souhaitée dans une liste. La modification s'applique à l'aide d'un fichier CSS personnalisé.

Prérequis : ajoutez les classes CSS contenant la nouvelle couleur pour le champ de texte dans le champ de propriété CSS personnalisé du formulaire.

Par exemple, l'extrait de code CSS ci-dessous contient une classe qui définit la couleur du libellé sur vert ou rouge :

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

Après avoir référencé les classes CSS dans le champ de propriété CSS personnalisé , concevez votre formulaire en suivant les étapes ci-dessous :

1. Ajoutez un composant Champ de texte et un composant Radio . Faites attention à leurs noms de propriété, car vous utilisez ceux dans votre logique avancée.

2. Dans l'onglet Affichage du composant de champ de texte, définissez une Classe CSS personnalisée par défaut. Par exemple, pour définir le rouge comme couleur par défaut du champ de texte, utilisez la classe textFieldLabel-red . La classe doit être définie dans le fichier CSS que vous avez créé pour la section Prérequis .

   

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. Ajoutez une logique et nommez-la "color selection".

6. Select the Simple trigger type.

   1. Dans le menu déroulant Quand le composant de formulaire , sélectionnez Radio ({radio_field_key}).
   2. Dans le champ Contient la valeur , saisissez "green".

   La configuration ci-dessus détecte si l'utilisateur sélectionne "green" dans les options radio et déclenche l'action pour modifier la couleur du libellé du champ de texte.

7. Ajoutez une Actions et nommez-la "change color using css"

8. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }
   

9. Enregistrez l'action et la logique.

10. Enregistrez le composant.

Au moment du Runtime, si l'utilisateur métier sélectionne le bouton radio "green" , le libellé du champ de texte devient vert. Si l'utilisateur sélectionne le bouton radio "red" , le libellé du champ de texte devient rouge.