Personalizar el ancho de columna en Editar cuadrícula

Este tutorial muestra cómo modificar el ancho de la última columna en Editar cuadrícula.

Requisitos previos: para seguir los pasos de este tutorial, crea una tabla de datos. Asegúrese de que la última columna de la tabla tenga un contenido de más de, aproximadamente, cinco o seis palabras.

1. Añade una actividad Crear tabla de datos en tu flujo de trabajo.

2. Abre el asistente Crear tabla de datos y añade las columnas deseadas para tu tabla.

   Nota:

   Asegúrate de que las columnas no tengan espacios ni caracteres especiales, ya que más tarde utilizarás estos nombres para vincular las columnas en el formulario a través de Nombres de propiedad.

3. Guarda la tabla de datos en una variable. En este ejemplo, puedes nombrarlo dataTable.

   

4. Añade una Editar cuadrícula a tu formulario y utiliza el nombre de la variable de la tabla de datos (dataTable) como Nombre de propiedad del componente.

5. Añade componentes a Editar cuadrícula, según las columnas y sus valores en la tabla de datos. Los nombres de propiedad de estos componentes son los nombres exactos de las columnas de la tabla de datos.

   Para este ejemplo, añade tres componentes de Campo de texto . Utiliza los siguientes nombres de propiedad para los componentes: column1, column2 y column3.

6. Ve a la configuración del componente Editar cuadrícula , en la pestaña Plantillas . Puedes elegir editar el ancho de la columna utilizando Bootstrap 3 o utilizando la propiedad CSS style .

   • Uso de Bootstrap 3
     1. En la sección Plantilla de encabezado , cambia el código generado por defecto con la siguiente plantilla:

        <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. En la sección Plantilla de fila , cambia el código generado por defecto con la siguiente plantilla:

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

     Consejo:

     • Observa que comparas el valor component.key con el nombre exacto de la columna, que es el mismo utilizado como Nombre de propiedad de cada componente de texto.
     • Los formularios de UiPath utilizan el marco de arranque 3. El ancho total de la tabla se divide en 12 secciones. Por lo tanto, asegúrese de que cualquier división que haga sume 12. En este ejemplo, dos columnas con la clase col-sm-2 ocupan 4 secciones, dejando las 8 restantes para la tercera columna (col-sm-8).
   • Utilizando la propiedad style :

     1. En el script Plantilla de encabezado , identifica todas las etiquetas <div class="col-sm-2"> y añade tu ancho personalizado de la siguiente manera: style="width:{your_custom_width}px !important". El ancho debe expresarse en píxeles.

        

     2. En el script Plantilla de fila , identifica todas las etiquetas <div class="col-sm-2"> y añade tu ancho personalizado de la siguiente manera: style="width:{your_custom_width}px !important". El ancho debe expresarse en píxeles.

        

        El elemento "col-sm-2" representa el ancho de columna predeterminado. Puedes modificar el ancho de columna predeterminado añadiendo una etiqueta de estilo personalizada. Por ejemplo, style="width:70px !important" aplica un ancho de 70 píxeles a todas las columnas Editar cuadrícula .

7. Guarda el componente y el formulario.