Outils de développement

La propriété Outils de développement de l'activité Créer un formulaire (Create Form) permet aux utilisateurs de déboguer leurs formulaires et d'expérimenter les styles CSS. Lorsqu'il est activé, l'outil de développement Dev Tools s'ouvre au moment de l'exécution.

Ce tutoriel montre comment expérimenter les styles CSS dans les outils de développement.

Important : les personnalisations ajoutées dans les outils de développement sont temporaires. Pour appliquer de manière permanente les styles CSS au formulaire, vous devez créer une classe CSS personnalisée dans un composant Élément HTML, où vous saisissez le code que vous expérimentez dans les outils de développement.

Tutoriel

Pour utiliser les outils de développement :

Dans le panneau Propriétés de l'activité Créer un formulaire ( Create Form) , vérifiez :
1. Outils de développement
2. DisableSanitize. Cette propriété améliore les performances du formulaire.
Ajoutez des composants de formulaire dans le Concepteurde formulaires . Pour cet exemple, glissez-déposez un composant Élément HTML . Vous utilisez ce composant pour personnaliser l'apparence d'autres composants de formulaire
1. Dans l'onglet Affichage du composant Élément HTML, accédez à la section Contenu .
2. Saisissez une classe CSS <style>qui modifie l'apparence des autres composants. Écrivez la balise <style> , puis un nom pour la classe.
  
  N'oubliez pas le nom de la classe CSS, car vous l'utiliserez pour appliquer des styles CSS à d'autres composants de formulaire.
3. 2.3. Ajouter des propriétés à la classe CSS qui correspondent à votre cas d'utilisation Pour cet exemple, ajoutez la propriété background-color et définissez-la sur green. Voir le code CSS ci-dessous :
```
<style> .customclass{background-color: green;} </style><style> .customclass{background-color: green;} </style>
```
4. 2.4. Enregistrez le composant.
Faites glisser et déposez un composant Champ de texte dans le Concepteur de formulaires.
1. Dans l'onglet Affichage (Display), accédez au champ Classe CSS personnalisée ( Custom CSS Class ) et saisissez le nom de la classe CSS créée dans l' élément HTML. Pour cet exemple, tapez customclass.
2. Enregistrez le composant et la fiche.
Exécutez le fichier. La fenêtre Outils de développement (Dev Tools) s'ouvre.
1. Cliquez sur l'icône suivante puis sélectionnez le composant Champ de texte (Text Field ) dans le Rendu de formulaire ( Form Renderer). La classe de CSS créée s’affiche dans l’onglet Styles des outils de développement. Dans cet exemple, le customclass s'affiche.
2. Accédez à la classe CSS créée dans Dev Tools et commencez à expérimenter les styles CSS en temps réel. Pour cet exemple, ajoutez une propriété border-style à l'intérieur de customclass et définissez-la sur solid.
3. Ajoutez une autre propriété border-color et définissez-la sur deeppink.
Après avoir expérimenté les styles CSS, vous pouvez les appliquer définitivement à votre formulaire. Accédez à la section Contenu du composant Élément HTML et ajoutez les propriétés que vous avez expérimentées dans la classe CSS.

Pour cet exemple, ajoutez les propriétés border-style et border-color dans customclass:
```
<style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style><style> .customclass{background-color: green;
  border-style: solid;
  border-color: deeppink;}
</style>
```
Enregistrez le composant et la fiche.