Personalização de modelos de Editar grade

Este tutorial ajuda a personalizar os modelos de Cabeçalho e Linha de um 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.

Pré-requisitos:

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

1. Acesse a guia 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 snippet 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 podermos identificar as colunas por seus números de índice. Duplicamos essa linha para cada coluna 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 obter 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 cada coluna em Editar grade. E então, 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 fornecendo a ela um fundo verde.

Exemplo de fluxo de trabalho

Para seguir as etapas e experimentar este tutorial, baixe o fluxo de trabalho de amostra aqui.