Grupos de paneles en Jitterbit App Builder

Los grupos de paneles son contenedores que se pueden utilizar para agrupar visualmente paneles relacionados que residen en la misma página. Se puede ajustar la apariencia y la visualización de la información dentro de estos contenedores utilizando las opciones de configuración disponibles al crear los grupos, o mediante el uso de estilos.

Los grupos de paneles no deben confundirse con Grupos de control, que se utilizan para organizar controles en un panel.

Uso

Los grupos de paneles se utilizan para organizar paneles en una página. Por ejemplo, la página que se muestra a continuación tiene cuatro paneles: Órdenes, Información de envío, Información del cliente y Detalles del pedido:

Están organizados en dos grupos: los paneles Órdenes, Información de envío e Información del cliente pertenecen a un grupo y el panel Detalles del pedido pertenece a otro, y el desarrollador eligió apilarlos en este orden.

Crear y organizar grupos de paneles

Para crear un grupo de paneles:

1. Ve a App Workbench > Páginas y selecciona la página donde deseas agregar un grupo de paneles.

2. En Diseño del panel de la página, haz clic en Grupos. Se abre el cuadro de diálogo Grupos de paneles.

3. Haz clic en + Grupo:

   1. Ingresa un Nombre para el grupo.

   2. Selecciona un Padre para el grupo, que puede ser la página en la que estás trabajando o incluso otro grupo.

   3. En el campo Orden, ingresa un número. Esto determinará la posición del nuevo grupo. Otros grupos con un valor de Orden más pequeño se mostrarán primero, y aquellos con un valor mayor se mostrarán después.

   4. En el campo Tipo de diseño, selecciona una de las opciones:

      • Lado a lado: Coloca los paneles uno al lado del otro, o lado a lado.

      • Apilado: Coloca los paneles en líneas separadas, apilando uno encima del otro.

      • Con pestañas: Coloca los paneles en diferentes pestañas, entre las cuales los usuarios pueden hacer clic.

   5. (Opcional) En el campo Tamaño, selecciona un tamaño para el grupo: Extra Extra Pequeño, Extra Pequeño, Pequeño, Regular, Grande o Extra Grande. Si no eliges un tamaño, App Builder ajustará automáticamente los paneles en este grupo al tamaño de la ventana.

   6. (Opcional) Esta opción está desactivada por defecto. Activarla hace que todo el grupo sea desplazable, lo que significa que un panel que desborde hace que aparezca una barra de desplazamiento para el grupo (incluyendo todos los paneles en él). Cuando esta opción está desactivada, cada panel que desborde dentro del grupo tendrá su propia barra de desplazamiento independiente.

4. Haz clic en el icono de marca de verificación para guardar. El nuevo grupo ya está disponible.

Cualquier panel en la página ahora puede ser asignado al grupo de paneles que has creado. Selecciona el panel que deseas asignar a un grupo y, en la pestaña Panel, encuentra el campo Padre bajo Posición. Usa el menú desplegable para seleccionar un grupo y haz clic en Guardar.

En la página mostrada anteriormente, tres paneles fueron asignados a un grupo de paneles llamado Fila superior y un panel fue asignado a otro llamado Fila inferior:

Puedes elegir cómo mostrar tus grupos de paneles. En la pantalla de edición de la página en la que estás trabajando, localiza el campo Diseño en la sección Propiedades de la página. Abrir el menú desplegable revela las siguientes opciones:

• Lado a Lado: Los grupos de paneles se muestran uno al lado del otro de izquierda a derecha.

• Apilados: Los grupos de paneles se muestran en una pila de arriba hacia abajo.

• Asistente: Los grupos de paneles se muestran uno tras otro, como pasos en un asistente. La interfaz de usuario muestra botones de Siguiente y Anterior para ayudar en la navegación del usuario.