Utiliser le composant Grille

The Grid component allows you to display an unlimited number of rows and columns. The Grid component also allows you to paginate, filter, sort data, and resize the column width at runtime.

Prérequis

Vous disposez d'un package UiPath.Form.Activities v2.0.2 ou d'une version ultérieure.

Triable

You can sort data inside columns in ascending or descending order. You sort the data at runtime, in the Form Renderer.

The data in the Grid is displayed in the same order as in the input data table. To sort all data in the Grid click any column header in the Form Renderer.

• First click sorts the data in ascending order.

• Second click sorts the data in descending order.

• Third click restores the original order.

  

Filtrable

You can filter data inside each column. You filter the data at runtime, in the Form Renderer.

Pour filtrer les données d'une colonne :

1. Survolez l'en-tête de la colonne et cliquez sur la barre de triple. menu.
2. Choisissez une opération de filtrage.
3. Input a value in the Filter field of the triple bar menu. The input value in the Filter field is a condition for the filtering operation.

En fonction du type de données, les opérations de filtrage suivantes sont disponibles :

Opération de filtrage	Texte	Numérique	Date/Heure
Contient	✅	❌	❌
Ne contient pas	✅	❌	❌
Est égal à	✅	✅	✅
Non égal à	✅	✅	✅
Commence par	✅	❌	❌
Se termine par	✅	❌	❌
inférieure à	❌	✅	✅
Inférieur ou égal à	❌	✅	❌
supérieure à	❌	✅	✅
Supérieur ou égal à	❌	✅	❌
Dans la plage	❌	✅	✅
Blanc	✅	✅	✅
Non vide	✅	✅	✅

Astuce :

For all filtering operations applied on Text and Number data, you can add an additional filtering operation, using the operators:

• AND - displays data if both filter operations are true.
• OR - displays data if any of the filter operations is true.

Colonne(s) redimensionnable(s)

You can change the width of the columns at runtime, in the Form Renderer. The Column(s) Resizable capability allows you to see the data inside columns better.

Pour redimensionner les colonnes, pointez votre curseur sur la bordure qui sépare les colonnes, jusqu'à la flèche bidirectionnelle apparaît. Faites glisser la bordure jusqu'à ce que vous obteniez la largeur de colonne souhaitée.

Pagination

You can display the data of the Grid component on pages that are numbered. The Pagination capability also includes setting the number of items per page.

To set the number of items per page: go to the Display tab of the Grid component and choose a value from the Items per page dropdown list. You can choose to display 10, 50 or 100 items per page.

At the bottom of the Form Renderer, at runtime you can view:

• Le nombre de lignes de la page sur laquelle vous vous trouvez.
• Le nombre total de lignes dans la grille.
• Le numéro de page sur lequel vous vous trouvez sur le nombre total de pages dans la grille.

Vous pouvez parcourir les pages en cliquant sur les flèches < > ou vous pouvez accéder à la première page en cliquant sur flèche et la dernière page en cliquant sur flèche.

Tutoriel

Activer le composant Grille :

1. Drag and drop a Grid component in the Form Designer.

2. Go to the Field Key tab and change the Property Name to the input datatable argument from the FormFieldsCollection property of the Create Form activity.

   Pour cet exemple, saisissez fruitDataTableArg. L'argument table de données lie les données du fichier fruit_table.csv au formulaire.

3. In the Display tab, check the capabilities that you want to apply to the Grid component. For this example, check all four boxes: Sortable, Filterable, Column(s) Resizable, and Pagination.

4. In the Items Per Page field, choose from the dropdown list the number of items per page that you want to display in the form. For this example, choose 10.

5. Enregistrez le composant.

6. Drag and drop inside the Grid the form components that match the column values inside the input datatable. For this example, drag and drop the following components: one Text Field, one Number, and one Date/Time.

   1. Accédez à l'onglet Clé de champ du composant Champ de texte et remplacez le Nom de la propriété par le nom de la colonne qui contient des données textuelles dans la table de données. Pour cet exemple, remplacez le nom de la propriété par fruit.
   2. Accédez à l'onglet Clé de champ du composant Nombre et remplacez le Nom de la propriété par le nom de la colonne qui contient les données numériques de la table de données. Pour cet exemple, remplacez le Nom de la propriété par qty.
   3. Accédez à l'onglet Clé de champ du composant Date/Heure et remplacez le Nom de la propriété par le nom de la colonne qui contient des données de date/d'heure dans la table de données. Pour cet exemple, remplacez le Nom de la propriété par expdate.
   Remarque :

   Assurez-vous d'enregistrer les composants de formulaire avant de les fermer !

7. Enregistrez le formulaire.

8. Run the workflow and explore the Grid component capabilities.

Exemple de workflow

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