Grupo¶

La función Grupo proporciona un contenedor para los controles que desea agrupar visualmente en una página. La función Grupo tiene opciones de configuración adicionales disponibles para que pueda ajustar la apariencia y la visualización de los controles dentro del contenedor. Además de las opciones de configuración disponibles a través del control Grupo en sí, puede usar Estilos para personalizar aún más la apariencia.

Descripción General de las Funciones¶

Los grupos ofrecen muchas opciones de configuración, según el resultado deseado.

Ejemplo de grupo que utiliza el tipo de diseño apilado

Los grupos admiten las siguientes opciones de configuración:

• Elija entre dos tipos de diseño de orientación al configurar grupos: Lado a lado o Apilado.
• Capacidad de usar un tamaño relativo para escalar y rellenar el contenido para que se ajuste al espacio vertical y horizontal disponible en una página.
• Opción para configurar grupos para que se contraigan y expandan cuando se hace clic en el título.
• El acordeón y la pestaña son dos tipos de controles que pueden tener información dentro de ellos y son útiles para presentar agrupaciones lógicas de información.
  • De forma predeterminada, App Builder presentará el primer Control como expandido (o abierto), y el resto como contraído (o cerrado).
  • Personaliza la imagen que se muestra en un control de Acordeón, que se utiliza para indicar el estado abierto/cerrado. Si no eliges un "estado apagado" para el Acordeón, App Builder utilizará la imagen en estado ON y la rotará 90 grados.
  • Se puede configurar el estado predeterminado (abierto o cerrado) para los controles del acordeón.

Cómo Configurar un Grupo¶

Para utilizar Grupos, básicamente debes crear un Grupo como un control contenedor y luego especificar los controles individuales que deseas que residan dentro del Grupo.

1. Navegue a la página donde desea configurar el Grupo.
2. Vaya al Cajón de acciones > Diseñador en vivo.
3. Seleccione el panel desde la vista de diseño.
4. Haga clic en el botón + Control.
5. Asigna un Nombre para el Grupo.
6. Seleccione Grupo como Tipo de control.

7. Defina el Tipo de diseño. Por ejemplo: Lado a lado.

   • Apilado: Coloca los controles en líneas separadas, apilando uno sobre el otro.
   • Lado a lado: Coloca los controles uno al lado del otro, o uno al lado del otro.

8. Haga clic en Siguiente.

9. Revise la información y haga clic en Finalizar.
10. Haga clic en la pestaña Todos los controles.
11. Para cada control que desee dentro del grupo, establezca el valor Padre en el valor del grupo nombrado.

12. Para realizar una configuración adicional, haga clic en el ícono de registro abierto para el control de Grupo.

    • La pestaña Propiedades del control le permite cambiar el nombre del control, cambiar el tipo de control, cambiar el tipo de diseño, definir si se muestran los bordes del grupo, establecer el control como abierto de manera predeterminada y también establecer el control como Activo o Inactivo.
    • La pestaña Posición y ancho le permite ajustar con precisión dónde aparece el grupo en el panel, cuánto ancho se le asigna y la alineación.
    • La pestaña Etiqueta le permite configurar la Visibilidad de la Etiqueta, anular el valor de la Etiqueta y configurar el Tipo de Etiqueta en Lado a Lado o Apilada en el campo de control correspondiente.
    • La pestaña Caso extremo le permite ingresar texto flotante (Ayuda) que aparecerá cuando un usuario pase el cursor sobre el campo.

Método de Dimensionamiento de Compresión y Expansión¶

Si está utilizando un tipo de diseño Lado a lado para un grupo, App Builder proporcionará opciones de Método de dimensionamiento para configurar:

• Comprimir: Hace flotar el contenedor del grupo hacia la izquierda y dimensiona los controles según el contenido. El valor de Ancho se puede utilizar para anular el ancho del control que App Builder calcula.
• Expandir: Cambia el tamaño de los controles incluidos en el grupo para que ocupen el ancho disponible. La configuración de ancho se puede utilizar para ajustar los tamaños. App Builder calcula. Tenga en cuenta que los tipos de control Botón, Icono e Imagen no se redimensionarán para llenar el ancho cuando se use esta configuración.