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 :

Customizations added in Dev Tools are temporary. To permanently apply the CSS styles to the form, you have to create a custom CSS class in an HTML Element component, where you input the code that you experiment with in Dev Tools.

Tutoriel

Pour utiliser les outils de développement :

1. In the Properties panel of the Create Form activity, check:

   1. Outils de développement
   2. DisableSanitize. Cette propriété améliore les performances du formulaire.

2. Add form components in the Form Designer. For this example, drag and drop a HTML Element component. You use this component to customize the appearance of other form components

   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. Ajoutez 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>
      

   4. Enregistrez le composant.

3. Drag and drop a Text Field component in the Form Designer.

   1. Dans l'onglet Affichage , accédez au champ Classe CSS personnalisée 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.

4. 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 dans le générateur de formulaires. La classe CSS créée s'affiche dans l'onglet Styles des outils de développement. Pour 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.

5. After experimenting with CSS styles, you can apply them to your form permanently. Go to the Content section of the HTML Element component and add the properties you experimented with in the CSS class.

   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>
   

6. Enregistrez le composant et la fiche.

Exemple de workflow

Pour vérifier le workflow complet ou pour avoir une référence future, téléchargez l’ exemple XAML