Activités (Activities)
Plus récente (Latest)
False
Image de fond de la bannière
Activités de workflow
Dernière mise à jour 22 avr. 2024

Personnaliser la largeur des colonnes dans les grilles de données

Ce tutoriel montre comment modifier la largeur de la dernière colonne d' une grille de données.
Prérequis: pour suivre les étapes de ce tutoriel, créez une table de données. Assurez-vous que la dernière colonne du tableau comporte un contenu de plus de cinq à six mots.
  1. Ajoutez une activité Créer une table de données (Build Data Table) dans votre workflow.
  2. Ouvrez l'assistant Créer une table de données (Build Data Table) et ajoutez les colonnes souhaitées à votre table.
    Remarque : assurez-vous que les colonnes ne comportent pas d'espaces ou de caractères spéciaux, car vous utiliserez ultérieurement ces noms pour lier les colonnes du formulaire via les noms de propriété.
  3. Enregistrez la table de données dans une variable. Pour cet exemple, vous pouvez le nommer dataTable.


  1. Ajoutez une grille de données dans votre formulaire et utilisez le nom de la variable de table de données (dataTable) comme nom de propriété du composant.
  2. Ajoutez des composants dans la grille de données, en fonction des colonnes et de leurs valeurs dans la table de données. Les noms de propriété de ces composants sont les noms exacts des colonnes de la table de données.
    Pour cet exemple, ajoutez trois composants Champ de texte (Text Field ). Utilisez les noms de propriété suivants pour les composants : column1, column2et column3.
  3. Dans le panneau Propriétés du formulaire, saisissez le code suivant dans le champ CSS personnalisé :
    .mygrid tbody>tr>:nth-child(1){ 
    width: 25%;
    }
    .mygrid tbody>tr>:nth-child(2){ 
    width: 15%;
    }
    .mygrid tbody>tr>:nth-child(3){ 
    width: 60%;
    }.mygrid tbody>tr>:nth-child(1){ 
    width: 25%;
    }
    .mygrid tbody>tr>:nth-child(2){ 
    width: 15%;
    }
    .mygrid tbody>tr>:nth-child(3){ 
    width: 60%;
    }
    Remarque : l'élément nth-child représente une colonne dans le composant Grille.
  4. Modifiez le composant Grille de données (Data Grid ). Dans l'onglet Affichage (Display), sous CSS personnalisé ( Custom CSS), saisissez la mygrid classe CSS.
    Enregistrez le composant et la fiche. Cela se traduit par une troisième colonne plus large, où le contenu dépasse environ cinq à six mots.

Cette page vous a-t-elle été utile ?

Obtenez l'aide dont vous avez besoin
Formation RPA - Cours d'automatisation
Forum de la communauté UiPath
Logo Uipath blanc
Confiance et sécurité
© 2005-2024 UiPath. All rights reserved.