Personalização da largura de colunas

Às vezes, as tabelas em seu formulário precisam de colunas mais largas ou mais estreitas, em vez de colunas com a mesma largura. Você pode definir uma largura personalizada para tabelas nos componentes Edit Grid e Data Grid.

Tutorial

O próximo tutorial fornece etapas sobre como modificar a largura de Column3 em uma tabela salva como myTable.

Construindo a tabela de dados

Para criar uma tabela para usar dentro do seu formulário:

1. Inside your workflow, add the Build Data Table activity.

2. Click DataTable... . The Build Data Table wizard opens.

3. Adicione as colunas desejadas para sua tabela e edite suas propriedades. Certifique-se de que os nomes das colunas não tenham espaços ou caracteres especiais, pois você usa esses nomes para vincular as colunas no formulário por meio da guia do componente Chave de campo .

   

4. Click OK to save the table.

5. In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

   Você usa essa variável para associar a tabela ao formulário por meio da propriedade FormFieldsCollection da atividade Create Form .

   

Vinculando a tabela de dados aos seus componentes de formulário e grade

Para vincular a tabela de dados ao seu formulário:

1. Add the Create Form activity in your workflow.

2. In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.

3. Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example table.

   

4. Clique em OK. Certifique-se de que a caixa GerarCamposDeEntrada esteja desmarcada.

Para vincular a tabela de dados ao componente Edit Grid ou Data Grid:

1. Open the Form Designer from the Create Form activity.

2. From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).

3. Na aba Chave do campo de sua grade, faça referência ao argumento da tabela (ou seja, table).

   O valor da Chave de campo diferencia maiúsculas de minúsculas.

   

4. Adicione componentes de texto em sua grade para replicar as colunas em sua tabela. Salve cada componente de texto.

   Por exemplo, se sua tabela tiver três colunas chamadas Column1, Column2 e Column3, arraste e solte três componentes de texto em sua grade e certifique-se de usar os nomes das colunas da tabela na guia Chave de campo dos componentes .

   O valor da Chave de campo diferencia maiúsculas de minúsculas.

   

5. Salve o formulário.

Personalizando a largura das colunas em Editar componentes da grade

Usando o Bootsrap 3

1. Vá para Editar as configurações do componente de grade .
2. In the Templates tab > Header Template section, change the default generated code with the following template:

   <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
           {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
             {{ component.label }}</div>
           {% } %}
         {% }) %}
       </div>
   

3. In the Templates tab > Row Template section, change the default generated code with the following template:

   <div class="row">
         {% util.eachComponent(components, function(component) { %}
          {% if (!component.hasOwnProperty('tableView') || component.tableView) { %}
               {% if (component.key=== 'Column3') { %}
                 <div class="col-sm-8">
               {% } %}
               {% if (component.key !== 'Column3') { %}
                 <div class="col-sm-2">
               {% } %}
               {{ getView(component, row[component.key]) }}
             </div>
           {% } %}
         {% }) %}
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <div class="col-sm-2">
             <div class="btn-group pull-right">
               <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
                 <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}
             </div>
           </div>
         {% } %}
       </div>
   

   Observação:

   • Observe que você compara o valor component.key com o nome exato da coluna, que é o mesmo usado na guia Chave de campo de cada componente de texto (etapa 4 na associação da tabela de dados a Editar grade ou componentes de Grade de dados).
   • Os formulários UiPath estão usando a estrutura Bootstrap 3. A largura total da mesa é dividida em 12 seções. Portanto, certifique-se de que qualquer divisão que você fizer, somará 12. Neste exemplo, duas colunas com a classe col-sm-2 ocupam 4 seções, deixando as 8 restantes para a terceira coluna (col-sm-8).

Usando a propriedade Style

1. Hover over the Edit Grid component and click Edit. The configuration page opens.
2. Navigate to the Templates tab.

   1. No script do Modelo de Cabeçalho , identifique todas as tags <div class="col-sm-2"> e adicione sua largura personalizada da seguinte maneira: style="width:{your_custom_width}px !important". A largura deve ser expressa em pixels.

   2. No script Modelo de Linha , identifique todas as tags <div class="col-sm-2"> e adicione sua largura personalizada da seguinte forma: style="width:{your_custom_width}px !important". A largura deve ser expressa em pixels.

      O elemento "col-sm-2" representa a largura padrão da coluna. Você pode modificar a largura da coluna padrão adicionando uma tag de estilo personalizado. Por exemplo, style="width:70px !important" aplica uma largura de 70 pixels a todas as colunas Editar grade .

      

      

3. Save your component and the form.

Personalizando a Largura das Colunas nos Componentes da Grade de Dados

1. Crie um arquivo CSS local com as larguras de coluna desejadas. Em nosso exemplo, o modelo a seguir cria um Column3 mais amplo (ou seja, nth-child(3)):

   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

2. In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
3. In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).

Fluxo de trabalho amostral

Para verificar os fluxos de trabalho completos ou ter uma referência futura, baixe os exemplos de XAML