Activités (Activities)
Plus récente (Latest)
False
Personnalisation de formulaires à l'aide de fichiers CSS locaux - Autre dernière version
Image de fond de la bannière
logo
Activités de workflow
Dernière mise à jour 19 févr. 2024

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;
    }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

  • Tutoriel
  • Exemple de workflow
Icône Support et Services
Obtenez l'aide dont vous avez besoin
Icône UiPath Academy
Formation RPA - Cours d'automatisation
Icône UiPath Forum
Forum de la communauté UiPath
Logo Uipath blanc
Confiance et sécurité
© 2005-2024 UiPath. All rights reserved.