Como usar o componente de Grade

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é-requisitos

Ter o pacote UiPath.Form.Activities v2.0.2 ou superior instalado.

Classificável

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.

  

Filtrável

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

Para filtrar dados em uma coluna:

1. Passe o mouse sobre o cabeçalho da coluna e clique na barra três menu.
2. Escolha uma operação de filtragem.
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.

Com base no tipo de dados, as seguintes operações de filtro estão disponíveis:

Operação de filtro	Texto	Número	Data/Hora
Contém	✅	❌	❌
Not Contains	✅	❌	❌
É igual a	✅	✅	✅
diferente de	✅	✅	✅
Inicia com	✅	❌	❌
Termina com	✅	❌	❌
menor que	❌	✅	✅
menor ou igual	❌	✅	❌
maior que	❌	✅	✅
Maior ou igual	❌	✅	❌
No intervalo	❌	✅	✅
Em branco	✅	✅	✅
Não está em branco	✅	✅	✅

Dica:

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.

Coluna(s) Dimensionável(is)

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 redimensionar colunas, passe o cursor do mouse sobre a borda que separa as colunas até que a seta bidirecional ele será exibido. Arraste a borda até obter a largura da coluna desejada.

Paginação

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:

• O número de linhas na página em que você está.
• O número total de linhas na grade.
• O número da página em que você está do número total de páginas na grade.

Você pode navegar pelas páginas clicando nas setas < > ou pode chegar à primeira página clicando no seta e última página clicando no seta.

Tutorial

Para usar o componente de Grade :

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 exemplo, insira fruitDataTableArg. O argumento da tabela de dados vincula os dados no arquivo fruit_table.csv ao formulário.

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. Salve o 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. Vá para a guia Chave de campo do componente Campo de texto e altere o Nome da propriedade para o nome da coluna que contém os dados de texto na TabelaDeDados. Para este exemplo, altere o nome da propriedade para fruit.
   2. Vá para a guia Chave de campo do componente Número e altere o Nome da propriedade para o nome da coluna que contém os dados numéricos na TabelaDeDados. Para este exemplo, altere o Nome da propriedade para qty.
   3. Vá para a guia Chave de campo do componente de Data/hora e altere o Nome da propriedade para o nome da coluna que contém os dados de data/hora na TabelaDeDados. Para este exemplo, altere o Nome da propriedade para expdate.
   Observação:

   Certifique-se de salvar os componentes do formulário antes de fechá-los.

7. Salve o formulário.

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

Fluxo de trabalho amostral

Para verificar o fluxo de trabalho completo ou ter uma referência futura, baixe o exemplo XAML