Personalização da largura da coluna em Editar grades

Esse tutorial mostra como modificar a largura da última coluna em uma atividade Editar grade.

Pré-requisitos: para seguir as etapas neste tutorial, crie uma tabela de dados. Certifique-se de que a última coluna da tabela tenha conteúdo 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 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 propriedades.

3. Salve a tabela de dados em uma variável. Para este exemplo, você pode nomeá-lo dataTable.

   

4. Adicione um Editar grade em seu formulário e use o nome da variável da tabela de dados (dataTable) como o Nome da propriedade do componente.

5. Adicione componentes em Editar grade, de 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 este exemplo, adicione três componentes do Campo de texto . Use os seguintes Nomes de Propriedade para os componentes: column1, column2, e column3.

6. Vá para Editar configurações de componente de Grade na guia 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 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>
        

     2. Na 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>
        

     Dica:

     • Observe que você compara o valor component.key com o nome exato 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 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 .

7. Salve o componente e o formulário.