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. Dentro de seu fluxo de trabalho, adicione a atividade Build Data Table .
2. Clique em DataTable... . O assistente Construir Tabela de Dados é aberto.

3. Adicione as colunas desejadas para sua tabela e edite suas propriedades.

   Certifique-se de que o nome das colunas não tenha 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. Clique em OK para salvar a tabela.
5. No painel Properties > campo Output da atividade Build Data Table , defina um nome de variável para sua tabela (por exemplo, myTable ).

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

   
   

   

   
   

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

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

1. Adicione a atividade Criar formulário em seu fluxo de trabalho.
2. No painel Propriedades > campo FormFieldsCollection , clique no menu de três pontos (fa-ellipsis-v:) . O assistente FormFieldsCollection é aberto.
3. Crie um argumento e vincule-o à tabela criada anteriormente usando a variável (ou seja, myTable). Defina a Direção do argumento como In/Out e o Tipo como DataTable. Dê um Nome ao seu argumento, por exemplo table.
   
   

   

   
   

4. Clique em OK.

   Certifique-se de que a caixa GenerateInputFields esteja desmarcada.

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

1. Abra o Form Designer da atividade Create Form .
2. Na categoria Dados , arraste e solte um componente de grade (ou seja, Editar grade e/ou grade de dados).
3. Na aba Chave de Campo da 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, Column2e 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 as configurações de Editar componente de grade .

2. Na guia Modelos > seção Modelo de cabeçalho , altere o código gerado padrão com o seguinte modelo:

   <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. Na guia Modelos > seção Modelo de linha , altere o código gerado padrão com o seguinte modelo:

   <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 ao nome da coluna, que é o mesmo usado na guia Chave de Campo de cada componente de texto (etapa 4 para vincular a tabela de dados aos componentes Editar Grade ou 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. Passe o mouse sobre o componente Editar grade e clique em Editar. A página de configuração é aberta.

2. Navegue até a guia Modelos .

   2.1. No script do modelo de cabeçalho , 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.
   2.2. No script Row Template , 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 da coluna padrão. Você pode modificar a largura padrão da coluna adicionando uma marca de estilo personalizada. Por exemplo style="width:70px !important" aplica uma largura de 70 pixels a todas as colunas Edit Grid .
   
   

   

   
   
   
   

   

   
   
3. Salve seu componente e o formulário.

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. No painel Propriedades > campo LocalCSSFilePath da atividade Criar formulário , faça referência ao arquivo CSS criado anteriormente. Por exemplo,"/file://C:\User\Desktop\EditColumnWidth.css".
3. No componente Grade de dados > guia Exibir > campo Classe CSS personalizada , insira o nome da classe CSS (por exemplo, mygrid).

Fluxo de trabalho amostral

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