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. Dentro de tu flujo de trabajo, añade la actividad Crear tabla de datos .
2. Haga clic en TablaDeDatos .... Se abrirá el asistente Crear tabla de datos .

3. Agregue las columnas deseadas para su tabla y edite sus propiedades.

   Asegúrate de que el nombre de las columnas no tiene espacios ni caracteres especiales, ya que utilizas estos nombres para vincular las columnas del formulario a través de la pestaña del componente Clave de campo .

   
   

   

   
   
4. Haz clic en Aceptar para guardar la tabla.
5. En el panel Propiedades > campo de Salida de la actividad Crear tabla de datos , establece un nombre de variable para tu tabla (por ejemplo, myTable ).

   Esta variable se utiliza 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. Añade la actividad Crear formulario en tu flujo de trabajo.
2. En el panel Propiedades > campo ColecciónDeCamposDeFormulario , haz clic en el menú de tres puntos (fa-ellipsis-v :). Se abrirá el asistente de ColecciónDeCamposDeFormulario.
3. Crea un argumento y vincúlalo a la tabla creada previamente usando la variable (es decir, myTable). Establece la Dirección del argumento en In/Out y el Tipo en DataTable. Asigna un nombre a tu argumento, por ejemplo table.
   
   

   

   
   

4. Haz clic en Aceptar.

   Asegúrese 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. Abre el Diseñador de formularios desde la actividad Crear formulario .
2. Desde la categoría Datos , arrastre y suelte un componente de la cuadrícula (por ejemplo, Editar cuadrícula y / o Cuadrícula de datos).
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 la clave del 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 su tabla tiene tres columnas llamadas Column1, Column2y Column3, arrastre y suelte tres componentes de texto en su cuadrícula, y asegúrese de usar los nombres de columna de la tabla en la pestaña Clave de campo de los componentes .

   El valor de la clave del 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. Vaya a la configuración de Editar componente de cuadrícula .

2. En la pestaña Plantillas > 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>

3. En la pestaña Plantillas > 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>

   Nota:

   • Observe que se compara el valor component.key con el nombre exacto de la columna, que es el mismo utilizado en la pestaña Clave de campo de cada componente de texto (paso 4 para vincular la tabla de datos a los componentes de 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. Mantenga el puntero sobre el componente Editar cuadrícula y haga clic en Editar. Se abre la página de configuración.

2. Ve a la pestaña Plantillas .

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

   

   
   
   
   

   

   
   
3. Guarde su componente y el formulario.

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. En el panel Propiedades > campo RutaDeArchivoCSSLocal de la actividad Crear formulario , haz referencia al archivo CSS creado anteriormente. Por ejemplo,"/file://C:\User\Desktop\EditColumnWidth.css".
3. En el componente Cuadrícula de datos > pestaña Mostrar > campo Clase CSS personalizada , introduce el nombre de la clase CSS (por ejemplo, mygrid).

Flujo de trabajo de muestra

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