Activities
latest
false
Customizing Edit Grid templates - Other latest
Banner background image
logo
Workflow Activities
Last updated 2024年2月23日

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

  • Workflow example
Support and Services icon
Get The Help You Need
UiPath Academy icon
Learning RPA - Automation Courses
UiPath Forum icon
UiPath Community Forum
Uipath Logo White
Trust and Security
© 2005-2024 UiPath. All rights reserved.