Personalizar anchura de columnas

Las tablas de tu formulario a veces necesitan columnas más anchas o más angostas, en lugar de columnas con el mismo ancho. Puede establecer un ancho personalizado para las tablas en los componentes Editar cuadrícula y Cuadrícula de datos.

Tutorial

El siguiente tutorial proporciona pasos sobre cómo modificar el ancho de Column3 en una tabla guardada como myTable.

Crear la tabla de datos

Para crear una tabla para usar dentro de su formulario:

1. Inside your workflow, add the Build Data Table activity.

2. Click DataTable... . The Build Data Table wizard opens.

3. Añade las columnas deseadas para tu tabla y edita sus propiedades. Asegúrate de que el nombre de las columnas no tenga espacios ni caracteres especiales, ya que utilizas estos nombres para vincular las columnas en el formulario a través de la pestaña del componente Clave de campo .

   

4. Click OK to save the table.

5. In the Properties panel > Output field of the Build Data Table activity, set a variable name for your table (for example, myTable ).

   Utiliza esta variable para vincular la tabla al formulario a través de la propiedad ColecciónDeCamposDeFormulario de la actividad Crear formulario .

   

Vincular la tabla de datos a sus componentes de formulario y cuadrícula

Para vincular la tabla de datos a su formulario:

1. Add the Create Form activity in your workflow.

2. In the Properties panel > FormFieldsCollection field, click on the three dots menu (fa-ellipsis-v:) . The FormFieldsCollection wizard opens.

3. Create an argument and link it to the previously created table using the variable (i.e., myTable). Set the argument Direction to In/Out and the Type to DataTable. Give a Name to your argument, for example table.

   

4. Haz clic en Aceptar. Asegúrate de que la casilla GenerarCamposDeEntrada no esté marcada.

Para vincular la tabla de datos al componente Editar cuadrícula o Cuadrícula de datos:

1. Open the Form Designer from the Create Form activity.

2. From the Data category, drag and drop a grid component (i.e., Edit Grid and/or Data Grid).

3. En la pestaña Clave de campo de tu cuadrícula, haz referencia al argumento de la tabla (es decir, table).

   El valor de Clave de campo distingue entre mayúsculas y minúsculas.

   

4. Agregue componentes de texto en su cuadrícula para replicar las columnas de su tabla. Guarda cada componente de texto.

   Por ejemplo, si tu tabla tiene tres columnas llamadas Column1, Column2 y Column3, arrastra y suelta tres componentes de texto en tu cuadrícula, y asegúrate de utilizar los nombres de columna de la tabla en la pestaña Clave de campo de los componentes .

   El valor de Clave de campo distingue entre mayúsculas y minúsculas.

   

5. Guarda el formulario.

Personalizar el ancho de las columnas en Editar componentes de cuadrícula

Uso de Bootsrap 3

1. Ve a la configuración Editar componente de cuadrícula .
2. In the Templates tab > Header Template section, change the default generated code with the following template:

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

3. In the Templates tab > Row Template section, change the default generated code with the following template:

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

   Nota:

   • Observa que comparas el valor component.key con el nombre exacto de la columna, que es el mismo que se utiliza en la pestaña Clave de campo de cada componente de texto (paso 4 en la vinculación de la tabla de datos a los componentes Editar cuadrícula o Cuadrícula de datos).
   • 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 de Estilo

1. Hover over the Edit Grid component and click Edit. The configuration page opens.
2. Navigate to the Templates tab.

   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 .

      

      

3. Save your component and the form.

Personalizar el ancho de las columnas en los componentes de la cuadrícula de datos

1. Crea un archivo CSS local con los anchos de columna deseados. En nuestro ejemplo, la siguiente plantilla crea un Column3 más ancho (es decir, nth-child(3)):

   .mygrid tbody>tr>:nth-child(1){ 
   width: 70px;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   

2. In the Properties panel > LocalCSSFilePath field of the Create Form activity, reference the previously created CSS file. For example,"/file://C:\User\Desktop\EditColumnWidth.css".
3. In the Data Grid component > Display tab > Custom CSS Class field, enter the name of the CSS class (for example, mygrid).

Flujo de trabajo de muestra

Para comprobar los flujos de trabajo completos o para tener una referencia futura, descarga los ejemplos XAML