Saltar al contenido

Grupos de paneles en Jitterbit App Builder

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:

Vista previa de la página de órdenes

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.

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

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

        Nota

        Si hay un botón en la página configurado con la opción Vincular a panel y su panel objetivo está dentro de un grupo con el tipo de diseño Pestañas, hacer clic en el botón también selecciona la pestaña de ese panel si no está ya seleccionada, revelando el panel. Consulta Controles de botón para más información.

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

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

  4. Haz clic en el ícono 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:

Grupos de paneles

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.

  • Apilado: 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 Anterior y Siguiente para ayudar en la navegación del usuario.