Usar el componente de cuadrícula

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.

Requisitos previos

Tener instalado el paquete UiPath.Form.Activites v2.0.2 o superior.

Ordenable

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.

Para filtrar los datos de una columna:

1. Mantén el puntero sobre el encabezado de la columna y haz clic en la barra triple menú.
2. Elija una operación de filtrado.
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.

Según el tipo de datos, están disponibles las siguientes operaciones de filtro:

Funcionamiento del filtro	Texto	Número	Fecha/hora
Contiene	✅	❌	❌
no contiene	✅	❌	❌
Igual	✅	✅	✅
No igual	✅	✅	✅
Comienza con	✅	❌	❌
Termina en	✅	❌	❌
Menor que	❌	✅	✅
Menor que o igual	❌	✅	❌
mayor que	❌	✅	✅
Mayor que o igual	❌	✅	❌
Dentro del rango	❌	✅	✅
Vacío	✅	✅	✅
No en blanco	✅	✅	✅

Consejo:

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.

Columna/s de tamaño ajustable

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.

Para cambiar el tamaño de las columnas, mantenga el cursor sobre el borde que separa las columnas, hasta que la flecha de dos direcciones aparece. Arrastra el borde hasta obtener el ancho de columna deseado.

Paginación

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:

• El número de filas de la página en la que se encuentra.
• El número total de filas en la cuadrícula.
• El número de la página en la que se encuentra del número total de páginas en la cuadrícula.

Puede navegar por las páginas haciendo clic en las flechas < > o puede ir a la primera página haciendo clic en el botón y la última página haciendo clic en el flecha.

Tutorial

Para utilizar el componente Cuadrícula :

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.

   Para este ejemplo, introduce fruitDataTableArg. El argumento de la tabla de datos vincula los datos del archivo fruit_table.csv al formulario.

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. Guarde el componente.

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. Ve a la pestaña Clave de campo del componente Campo de texto y cambia el Nombre de la propiedad por el nombre de la columna que contiene los datos de texto en la tabla de datos. Para este ejemplo, cambia el nombre de la propiedad a fruit.
   2. Ve a la pestaña Clave de campo del componente Número y cambia el Nombre de la propiedad por el nombre de la columna que contiene los datos numéricos en la tabla de datos. Para este ejemplo, cambia el Nombre de la propiedad a qty.
   3. Ve a la pestaña Clave de campo del componente Fecha/Hora y cambia el Nombre de la propiedad por el nombre de la columna que contiene los datos de fecha/hora en la tabla de datos. Para este ejemplo, cambia el Nombre de la propiedad a expdate.
   Nota:

   ¡Asegúrese de guardar los componentes del formulario antes de cerrarlos!

7. Guarda el formulario.

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

Flujo de trabajo de muestra

Para comprobar el flujo de trabajo completo o para tener una referencia futura, descarga el ejemplo XAML