Activities
latest
false
Using the Grid Component - Other latest
Banner background image
logo
Workflow Activities
Last updated 19 févr. 2024

Using the Grid Component

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.

Prerequisites

Have UiPath.Form.Activites v2.0.2 package or higher installed.

Sortable

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.



Filterable

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

To filter data in a column:

  1. Hover over the column header and click the triple bar docs image menu.
  2. Choose a filtering operation.
  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.

Based on the type of data, the following filter operations are available:

Filter operation

Text

Number

Date/Time

Contains

available

not available

not available

Not contains

available

not available

not available

Equals

availableavailable

available

Not equal

available

available

available

Starts with

available

not available

not available

Ends with

available

not available

not available

Less than

not available

available

available

Less than or equals

not available

available

not available

Greater than

not available

available

available

Greater than or equals

not available

available

not available

In range

not available

available

available

Blank

available

available

available

Not blank

availableavailableavailable
Tip:

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.

Column(s) Resizable

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.

To resize columns, hover your cursor over the border that separates the columns, until the two-way arrow appears. Drag the border until you get the desired column width.



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:

  • The number of rows in the page that you are on.
  • The total number of rows in the grid.
  • The page number you are on out of the total number of pages in the grid.

You can browse through the pages by clicking the < > arrows or you can get to the first page by clicking the arrow and last page by clicking the arrow.

Tutorial

To use the Grid component:

  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.

    For this example, input fruitDataTableArg. The data table argument binds the data in the fruit_table.csv file to the form.
  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. Save the component.
  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.

    6.1. Go to the Field Key tab of the Text Field component and change the Property Name to the name of the column that holds text data in the datatable. For this example, change the property name to fruit.
    6.2. Go to the Field Key tab of the Number component and change the Property Name to the name of the column that holds number data in the datatable. For this example, change the Property Name to qty.
    6.3. Go to the Field Key tab of the Date/Time component and change the Property Name to the name of the column that holds date/time data in the datatable. For this example, change the Property Name to expdate.
Note: Make sure to save form components before closing them!

7. Save the form.

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

Sample workflow

To check the complete workflow or to have a future reference, download the XAML example

  • Tutorial
  • Sample workflow
Support and Services icon
Get The Help You Need
UiPath Academy icon
Learning RPA - Automation Courses
UiPath Forum icon
UiPath Community Forum
Uipath Logo White
Trust and Security
© 2005-2024 UiPath. All rights reserved.