Personalização da largura da coluna em Editar grades

Este tutorial mostra como modificar a largura da última coluna em uma Edição de grade.

Pré-requisitos: para seguir as etapas neste tutorial, crie uma tabela de dados. Certifique-se de que o conteúdo da última coluna da tabela seja mais longo do que, aproximadamente, cinco a seis palavras.

1. Adicione uma atividade Construir Tabela de Dados em seu fluxo de trabalho.
2. Abra o assistente de Construir Tabela de Dados e adicione as colunas desejadas para sua tabela.
   Observação: certifique-se de que as colunas não tenham espaços ou caracteres especiais, porque você usará esses nomes posteriormente para vincular as colunas no formulário por meio de Nomes de propriedade.
3. Salve a tabela de dados em uma variável. Para este exemplo, você pode nomeá-lo dataTable.
   
   

   

   
   

1. Adicione uma Editar grade em seu formulário e use o nome da variável da tabela de dados (dataTable) como o Nome de propriedade do componente.
2. Adicione componentes dentro de Editar Gradede acordo com as colunas e seus valores na tabela de dados. Os Nomes de Propriedade desses componentes são os nomes exatos das colunas na tabela de dados.
   Para esse exemplo, adicione três componentes do Campo de texto . Use os seguintes Nomes de Propriedade para os componentes: column1, column2e column3.
3. Acesse as configurações de Editar componente de grade , na aba Modelos . Você pode optar por editar a largura da coluna usando o Inicialização 3 ou usando a propriedade CSS style .
   • Como usar o Inicializar 3
     1. Na seção Modelo de cabeçalho , altere o código padrão gerado 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>

     2. Na seção Modelo de linha , altere o código padrão gerado 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>

     Dica:

     • Observe que você compara o valor component.key ao nome da coluna, que é o mesmo usado como o Nome da Propriedade de cada componente de texto.
     • 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. 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 de Modelo de Linha , 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.
        
        

        

        
        
     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 .
4. Salve o componente e o formulário.