Field Group
Proporciona la capacidad de agrupar campos tanto en formularios como en modos de visualización para todas las entidades con campos.
field_group
Install
composer require 'drupal/field_group:^4.0'
composer require 'drupal/field_group:8.x-3.6'
composer require 'drupal/field_group:8.x-3.3'
Overview
Field Group es un módulo potente que te permite organizar y agrupar campos en formularios de entidades y visualizaciones. Funciona con todas las entidades con campos en Drupal, incluyendo tipos de contenido, usuarios, términos de taxonomía y cualquier entidad personalizada.
El módulo utiliza una arquitectura basada en plugins que permite el anidamiento ilimitado de grupos de campos y proporciona múltiples tipos de formateadores incluyendo fieldsets, details (desplegables), pestañas (horizontales y verticales), elementos HTML y más. Cada formateador tiene sus propias opciones de configuración para personalizar la apariencia y el comportamiento.
Los grupos de campos se configuran a través de la misma interfaz que la gestión de visualización de campos, lo que hace intuitivo organizar campos en grupos lógicos. Los grupos pueden contener campos, otros grupos o campos adicionales proporcionados por otros módulos, permitiendo diseños complejos de múltiples niveles.
Features
- Agrupar campos en visualizaciones de formularios de entidades (formularios de agregar/editar) con formateadores personalizables
- Agrupar campos en visualizaciones de vista de entidades (páginas de visualización de contenido) con formateadores personalizables
- Soporte para anidamiento ilimitado de grupos de campos dentro de otros grupos de campos
- Múltiples tipos de formateadores integrados: Fieldset, Details, Details Sidebar, Tabs (horizontal/vertical), Tab y HTML Element
- Arquitectura basada en plugins que permite crear formateadores personalizados por otros módulos
- Grupos desplegables/expandibles con estados predeterminados abierto/cerrado
- Clases CSS e atributos ID personalizados para cada grupo
- Pestañas responsivas con punto de corte de ancho configurable para desactivación automática
- Marcar grupos como requeridos cuando contienen campos requeridos (contexto de formulario)
- Soporte para HTML en etiquetas de grupo con filtrado XSS
- Integración con Field UI para una experiencia de configuración fluida
- Soporte de migración desde grupos de campos de Drupal 6/7 mediante módulo contrib
- Sugerencias de tema para personalizar la apariencia de grupos por tipo de entidad/bundle
Use Cases
Organizando formularios de edición de nodos largos
Para tipos de contenido con muchos campos, usa grupos de campos para organizar campos relacionados en secciones lógicas. Crea un grupo Tabs con dirección horizontal, luego agrega grupos Tab para cada sección (ej., 'Información básica', 'Configuración SEO', 'Opciones avanzadas'). Cada pestaña contiene campos relacionados, haciendo el formulario más manejable para los editores de contenido.
Creando secciones de configuración desplegables
Usa el formateador Details para crear secciones desplegables en formularios de edición. Establece 'open' en FALSE para opciones usadas con menos frecuencia para reducir el desorden visual. Por ejemplo, agrupa configuraciones avanzadas en una sección Details colapsada para que estén disponibles pero no sean distractoras.
Organización de barra lateral en formularios de nodo
Usa el formateador Details Sidebar para mover grupos a la barra lateral del formulario de entidad junto con las opciones de publicación. Útil para campos de metadatos, opciones de programación u otros ajustes que no necesitan estar en el área de contenido principal.
Secciones de contenido con estilos personalizados en visualización
Usa el formateador HTML Element en visualizaciones de vista para envolver grupos de campos en elementos HTML semánticos (section, article, aside) con clases CSS personalizadas. Esto permite un control rico de tematización y diseño sin sobrescribir plantillas.
Formularios estilo multi-paso
Crea pestañas verticales para simular un flujo de trabajo de formulario multi-paso. Cada pestaña representa un paso o categoría lógica, guiando a los usuarios a través de la entrada de contenido complejo mientras mantiene todos los datos en un solo envío de formulario.
Diseños de pestañas responsivos
Configura el formateador Tabs con un ajuste width_breakpoint para desactivar automáticamente las pestañas en dispositivos móviles, convirtiéndolas a un diseño apilado estándar para mejor UX móvil.
Tips
- Usa nombres máquina de grupo significativos ya que aparecen en sugerencias de plantilla (ej., field-group--group-name.html.twig)
- Combina pestañas con details dentro de ellas para organización de dos niveles sin anidamiento profundo
- El ajuste 'Show empty fields' es útil para depuración pero típicamente debe estar deshabilitado en producción
- Usa el formateador HTML Element con elementos semánticos (section, article, aside) para mejor accesibilidad y SEO
- Establece width_breakpoint en Tabs para asegurar buena experiencia móvil - las pestañas se convierten automáticamente a diseño apilado por debajo del punto de corte
- Los grupos pueden contener otros grupos para anidamiento ilimitado, pero ten en cuenta la UX - el anidamiento profundo puede confundir a los usuarios
- Las sugerencias de tema se generan basadas en tipo de entidad, bundle, modo de vista y nombre de grupo para control de tematización granular
Technical Details
Admin Pages 2
/admin/structure/types/manage/{bundle}/form-display/add-group
Agregar un nuevo grupo de campos a la visualización de formulario de un tipo de contenido. Esta página utiliza un formulario de dos pasos: primero selecciona el tipo de grupo y nombre, luego configura los ajustes del formateador.
/admin/structure/types/manage/{bundle}/display/add-group
Agregar un nuevo grupo de campos a la visualización de vista de un tipo de contenido. Funciona de manera idéntica a form display pero para páginas de vista de entidad.
Hooks 7
hook_field_group_pre_render
Pre-renderizar la construcción del elemento de grupo de campos. Se llama antes de que el elemento de grupo sea renderizado.
hook_field_group_pre_render_alter
Alterar la construcción pre-renderizada del elemento de grupo de campos después de que el formateador lo haya procesado.
hook_field_group_build_pre_render_alter
Alterar la construcción pre-renderizada de toda la vista de entidad, permitiendo modificación de todos los grupos de campos.
hook_field_group_form_process
Procesar el elemento de grupo de campos durante la construcción del formulario. Permite agregar estados de Form API u otras modificaciones.
hook_field_group_form_process_alter
Alterar la construcción procesada de un grupo de campos específico durante el procesamiento del formulario.
hook_field_group_form_process_build_alter
Alterar el formulario completo después de que todos los grupos de campos hayan sido procesados. Permite modificaciones globales.
hook_field_group_delete_field_group
Reaccionar a la eliminación de un grupo de campos. Permite limpiar datos relacionados.
Troubleshooting 5
Asegúrate de que el grupo de campos no esté en la región 'Disabled'. Arrástralo a la región 'Content' en la página Manage form display o Manage display. También verifica que el grupo de campos contenga al menos un campo o tenga habilitado 'Display element also when empty'.
Los formateadores Tab deben ser hijos de un formateador Tabs. Crea primero un grupo Tabs padre, luego crea grupos Tab dentro de él. El formateador Tab solo se renderizará como un elemento details si no está anidado correctamente.
Asegúrate de que la biblioteca field_group/details_validation o field_group/tab_validation esté adjunta. Estas se adjuntan automáticamente por los formateadores cuando el ajuste required_fields está habilitado.
El formateador accordion requiere el módulo jquery_ui_accordion y el submódulo field_group_accordion. Ten en cuenta que esto está deprecado debido al fin de vida de jQuery UI. Considera migrar a formateadores tabs o details.
Después de la migración, los grupos de campos pueden tener valores de región NULL. Ejecuta la actualización field_group_post_update_0001 o asigna regiones manualmente a través de la UI.
Security Notes 3
- El HTML en etiquetas de grupo se filtra a través del filtro XSS de Drupal (Xss::filterAdmin) cuando 'Allow HTML in label' está habilitado
- Los atributos personalizados ingresados en el formateador HTML Element se analizan y agregan de forma segura a través de la clase Attribute de Drupal
- Las entradas de clase CSS e ID se validan para solo permitir letras, números, guiones bajos, guiones y espacios