Personnaliser des formulaires à l'aide de fichiers CSS locaux

Le champ LocalCSSFilePath de l’activité Créer un formulaire vient saluer la nécessité de personnaliser le formulaire selon vos préférences.

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. Dans l'activité Créer un formulaire ( Create Form ) > Propriété Format ( Format property) > LocalCSSFilePath(CheminCSSFileLocal) , saisissez le chemin d'accès au fichier CSS (par exemple, "/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 LocalCSSFilePath .

   
   

   

   
   
3. Ouvrez le Concepteur de formulaires et accédez au composant ciblé par votre personnalisation.
4. Dans l'onglet Affichage du composant ciblé > champ Classe CSS personnalisée , écrivez le nom de la classe CSS personnalisée configurée dans le fichier. Cela lie les données du fichier CSS à votre formulaire. Par exemple, pour personnaliser le libellé de la liste déroulante Ville, saisissez la classe CSS correspondante 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