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, cree una tabla de datos. Asegúrese de que la última columna de la tabla tenga un contenido que exceda, aproximadamente, de cinco a 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 adelante utilizarás estos nombres para vincular las columnas del formulario a través de los Nombres de propiedad.
3. Guarda la tabla de datos en una variable. En este ejemplo, puedes nombrarlo dataTable.
   
   

   

   
   

1. 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.
2. Añada componentes a Editar cuadrícula, de acuerdo con 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, column2y column3.
3. Ve a la configuración del componente Editar cuadrícula , en la pestaña Plantillas . Puede elegir editar el ancho de la columna usando Boottrap 3 o usando la propiedad style CSS.
   • 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:

     • Observe que compara el valor component.key con el nombre exacto de la columna, que es el mismo que se utiliza 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).
   • Usando la propiedad style :
     1. En el script de la 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 de Editar cuadrícula .
4. Guarda el componente y el formulario.