Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla

Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla son vistas de coach de contenedor que crean secciones que incluyen otros controles y los muestran en una estructura similar a una tabla.

Con los controles Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla se puede crear una tabla HTML.
Nota: Estos controles son diferentes de los controles Tabla y Tabla de datos de servicio.
Los controles Fila de diseño de tabla y Celda de diseño de tabla no tienen opciones de configuración. En su lugar, puede utilizar los atributos HTML colspan y rowspan para especificar cómo se visualiza un control Celda de diseño de tabla en un de diseño de tabla. Para estos controles, debe utilizar la misma estructura que en una tabla HTML.
  • Los controles Fila de diseño de tabla se colocan dentro de un control Diseño de tabla.
  • Los controles Celda de diseño de tabla se colocan dentro de un control Fila de diseño de tabla.
Puede especificar los atributos HTML en la pestaña de propiedades Atributos HTML.
Nota: El diseño de estos controles no es WYSIWYG (lo que se ve es lo que se obtiene) en el web Process Designer.

Propiedades de configuración

Establecer o modificar propiedades de configuración para Diseño de tabla en la pestaña de propiedades de Configuración.
Tamaño de pantalla
Una propiedad de configuración que tenga el icono Tamaños de pantalla icono Tamaños de pantalla además del nombre de propiedad, puede tener distintos valores para cada tamaño de pantalla. Si no define un valor, el tamaño de la pantalla hereda el valor del siguiente tamaño de pantalla más grande como su valor predeterminado. Si está utilizando el editor de escritorio de Process Designer (en desuso), está estableciendo el valor para el tamaño de pantalla grande. Los otros tamaños de pantalla heredan este valor.
Definiciones de temas
Las definiciones de temas especifican los colores y estilos de un control y determinan el aspecto del control. Puede obtener una vista previa del aspecto de los controles en el editor de temas. Consulte Temas.

Las propiedades de configuración de aspecto para Diseño de tabla se muestran en la tabla siguiente:

Tabla 1. Propiedades de configuración de aspecto para Diseño de tabla
Propiedad de configuración del aspecto Descripción Tipo de datos
Espaciado de borde Especifica el espaciado entre las celdas en píxeles. String
Contracción de borde Especifica uno de los siguientes valores para el espacio entre las celdas:
  • Separar: añade un espacio entre las celdas.
  • Contraer: sin espacio entre las celdas.
 String

Ejemplo

Para mostrar dos controles de Texto en una estructura de tabla:
  1. Añada un control Diseño de tabla.
  2. Inserte una Fila de diseño de tabla dentro del control Diseño de tabla.
  3. Inserte dos controles Celda de diseño de tabla dentro del control Fila de diseño de tabla.
  4. Inserte un control Texto en cada uno de los controles Celda de diseño de tabla.
  5. Opcionalmente, establezca la propiedad Espaciado de borde en 25 y Contracción de borde en Separar para añadir un espacio entre las celdas.
También puede utilizar varios controles Fila de diseño de tabla y Celda de diseño de tabla dentro de un control Diseño de tabla y utilizar los atributos HTML colspan y rowspan para hacer que las celdas abarquen más de una columna o fila. Por ejemplo:
  1. Añada un control Diseño de tabla.
  2. Inserte tres controles Fila de diseño de tabla dentro del control Diseño de tabla.
  3. Inserte tres controles Celda de diseño de tabla dentro del primer control Fila de diseño de tabla que ha añadido en el paso 2.
  4. Inserte un control Celda de diseño de tabla dentro del segundo control Fila de diseño de tabla que ha añadido en el paso 2.
  5. Inserte dos controles Celda de diseño de tabla dentro del tercer control Fila de diseño de tabla que ha añadido en el paso 2.
  6. En los atributos HTML de la primera celda de la primera fila, añada el atributo rowspan, establézcalo en 3 e inserte un control Conmutador dentro de la celda.
  7. Inserte un control Botón dentro de la segunda celda de la primera fila.
  8. Inserte un control Código QR dentro de la tercera celda de la primera fila.
  9. En los atributos HTML de la celda de la segunda fila, añada el atributo colspan, establézcalo en 2 e inserte un control Selección única dentro de la celda.
  10. Inserte un control Selector de fecha dentro de la primera celda de la tercera fila.
  11. Inserte un control Área de texto dentro de la segunda celda de la tercera fila.
El resultado es un diseño parecido al de la siguiente imagen.
En la imagen se muestran tres filas dispuestas como se indica a continuación: la primera fila contiene un conmutador de botón en Off que abarca 3 filas, un botón con la etiqueta Botón, y un código QR con la etiqueta Código QR. La segunda fila contiene un campo desplegable de Selección única con la etiqueta Selección única. La tercera fila contiene un campo de selector de fecha con la etiqueta Selector de fecha que muestra un calendario con el mes de julio de 2017 y una área de texto con la etiqueta Área de texto con el texto Lorem ipsum.

Métodos

Para obtener información detallada sobre los métodos disponibles para Diseño de tabla, Fila de diseño de tabla y Celda de diseño de tabla, consulte la API JavaScript Diseño de tabla, Fila de diseño de tabla o Celda de diseño de tabla.

Recursos adicionales

Para obtener información sobre cómo crear un coach, consulte Creación de coaches.
Para obtener información sobre las propiedades estándar (General, Configuración, Posicionamiento, Visibilidad y Atributos HTML), consulte Propiedades de vista de coach.

Tema principal: Vistas de coach en el kit de herramientas de IU de BPM