Customizing Edit Grid templates

This tutorial helps you customize the Header and Row templates of an Edit Grid to enhance its visual appeal. You'll learn how to extend the width of a specific column and apply a bg-success CSS class to it.

Prerequisites:

1. Install Persistence.Activities version 1.4.8 or higher.
2. Select Advanced Forms for the Create Form Task activity.

1. Go to the Templates tab of the Edit Grid.
2. In the Header Template replace the content with the code snippet below:

   <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>

   In the code snippet we modified the <div class="col-sm-2">{{ component.label }}</div> row to represent the first column in the Edit Grid. We replaced component with components[0], so we can identify columns by their index numbers. We duplicated this row for every column in the Edit Grid. We then added the bg-success class to the desired component and changed the col-sm-2 class to col-sm-6 for a wider appearance.
3. In the Row Template replace the content with the code snippet below:

   <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>

   In the code snippet we updated the <div class="col-sm-2" {{ isVisibleInRow(components[0]) ? getView(components[0], row[components[0].key]) : ''}} </div> row to represent the first column. And then replaced component with components[0], so we can identify columns by their index number. We duplicated this row for every column in the Edit Grid. And then for the same column we modified in the Header Template we changed the col-sm-2 class to col-sm-6 and added the bg-success class in the Row Template.
   
   

   

   
   

These steps expand the width of the designated column and apply the bg-success class, making the column occupy 60% of the Edit Grid's space and giving it a green background.

Workflow example

To follow the steps and try out this tutorial yourself, download the sample workflow here.