Modification dynamique de la couleur du titre

Type de déclencheur : Type d' Actions simples : Schéma de composant de fusion

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é ( Property Names) lorsque vous les utilisez dans votre logique avancée.
2. Dans l'onglet Affichage (Display) du composant de champ de texte, définissez une Classe CSS personnalisée ( Custom CSS Class) 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. Pour le composant Radio , ajoutez deux valeurs pour les couleurs green et red.
4. Accédez à l'onglet Logique (Logic) du composant Champ de texte (Text Field ).
5. Ajoutez une logique et nommez-la "color selection".
6. Sélectionnez le type de déclencheur simple .
   1. À partir du menu déroulant Lorsque le composant de formulaire , sélectionnez Radio ({radio_field_key}).
   2. Dans le champ A la valeur ( Has the value ), entrez "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. Sélectionnez le type Actions de composant de schéma ( Merge Schema Component Actions ) et saisissez l'extrait suivant :

   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.