Personnaliser des formulaires à l'aide de fichiers CSS locaux

The LocalCSSFilePath field of the Create Form activity comes to greet the necessity of customizing the form to your preference.

Vous devez tenir compte de certains éléments lorsque vous utilisez le fichier CSS local :

• Les styles globaux s'appliquent immédiatement après la définition du chemin d'accès au fichier CSS.
• Les styles de composants spécifiques doivent être configurés en tant que classes. Utilisez un nom pertinent. (par exemple, .username-label ou .submitButton-color).
• L'aperçu du formulaire n'affiche pas les modifications de style lorsque vous définissez le chemin d'accès au fichier CSS en tant que variable. Pour prévisualiser les modifications, utilisez des valeurs codées en dur pour le chemin de votre fichier CSS.
  Remarque :

  La propriété LocalCSSFilePath est disponible à partir de la version 1.3.0 du pack UiPath.Form.Activities .

Tutoriel

Pour concevoir le formulaire avec des exigences d'apparence spécifiques :

1. Créez un fichier CSS contenant vos paramètres de style et enregistrez-le sur votre appareil local. Par exemple, pour modifier les couleurs des libellés et ajouter un arrière-plan personnalisé au formulaire, nous avons créé le fichier CSS suivant :

   body {
       background-image: url('https://images.pexels.com/photos/6590885/pexels-photo-6590885.jpeg');
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-size: cover;
   }
   .lastname-label
   {
      color : red;
      font-size : 15px;
      font-weight : 10px;
   }
   .firstname-label
   {
      color : green;
      font-size : 17px;
      font-weight : 30px;
   }
   .city-label
   {
      color : blue;
      font-size : 19px;
      font-weight : 50px;
   }
   .eligible-label
   {
      color : purple;
      font-size : 12px;
      font-weight : 30px;
   }
   

2. In the Create Form activity > Format property > LocalCSSFilePath, input the path to the CSS file (for example, "/file://C:\User heCssFile.css").

   Vous pouvez également stocker le chemin d'accès au fichier CSS local en tant que variable et saisir le nom de la variable dans le champ CheminFichierCSSLocal .

   

3. Ouvrez le Concepteur de formulaires et accédez au composant ciblé par votre personnalisation.

4. In the Display tab of the targeted component > Custom CSS Class field, write the name of the custom CSS class configured in the file. This binds the data in the CSS file to your form. For example, to customize the label for the City drop-down, input the corresponding CSS class city-label.

   

5. Enregistrez le composant.

6. Répétez les étapes 3 à 5 pour chaque composant que vous devez personnaliser à l'aide de votre fichier CSS local.

7. Enregistrez le formulaire.

Exemple de workflow

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