Personalização de modelos de Editar grade

Este tutorial ajuda você a personalizar os modelos de Cabeçalho e Linha de uma opção Editar grade para aprimorar seu recurso visual. Você aprenderá como estender a largura de uma coluna específica e aplicar uma classe CSS bg-success a ela.

Prerequisites:

• Instale o Persistence.Activities versão 1.4.8 ou superior.
• Selecione Formulários avançados para a atividade Criar tarefa de formulário .

Tutorial

1. Vá para a aba Modelos de Editar grade.

2. No Modelo de cabeçalho, substitua o conteúdo pelo fragmento de código abaixo:

   <div class="row">
         <div class="col-sm-2">{{ components[0].label }}</div>
         <div class="col-sm-6 bg-success">{{ components[1].label }}</div>
         <div class="col-sm-2">{{ components[2].label }}</div>
   </div>
   

   No fragmento de código, modificamos a linha <div class="col-sm-2">{{ component.label }}</div> para representar a primeira coluna em Editar grade. Substituímos component por components[0], para que possamos identificar as colunas por seus números de índice. Duplicamos essa linha para todas as colunas em Editar grade. Em seguida, adicionamos a classe bg-success ao componente desejado e alteramos a classe col-sm-2 para col-sm-6 para uma aparência mais ampla.

3. No Modelo de linha, substitua o conteúdo pelo fragmento de código abaixo:

   <div class="row">
             <div class="col-sm-2">
               {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}}
             </div>
           <div class="col-sm-6 bg-success">
             {{ isVisibleInRow(components[1]) ? getView(components[1], row[components[1].key]) : ''}}
             <div class="col-sm-2">
             {{ isVisibleInRow(components[2]) ? getView(components[2], row[components[2].key]) : ''}}
            
           <div class="row">
         {% util.eachComponent(components, function(component) { %}
           {% if (displayValue(component)) { %}
             <div class="col-sm-2">
               {{ isVisibleInRow(component) ? 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>
   

   No fragmento de código, atualizamos a linha <div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div> para representar a primeira coluna. E, em seguida, substituímos component por components[0], para que possamos identificar as colunas por seu número de índice. Duplicamos essa linha para todas as colunas em Editar grade. E, em seguida, para a mesma coluna que modificamos no Modelo de cabeçalho, alteramos a classe col-sm-2 para col-sm-6 e adicionamos a classe bg-success no Modelo de linha.

   

   Essas etapas expandem a largura da coluna designada e aplicam a classe bg-success , fazendo com que a coluna ocupe 60% do espaço de Editar grade e dando a ela um fundo verde.

Exemplo de fluxo de trabalho

Para seguir as etapas e experimentar este tutorial você mesmo, baixe o fluxo de trabalho de exemplo aqui.