Extra Block Types (EBT) - Nueva experiencia con Layout Builder❗

Extra Block Types (EBT): tipos de bloques con estilo y personalizables: Presentaciones de diapositivas, Pestañas, Tarjetas, Acordeones y muchos más. Configuraciones integradas para fondo, DOM Box y plugins de JavaScript. Experimenta hoy el futuro de la construcción de diseños.

Módulos de demostración EBT Descargar módulos EBT

❗Extra Paragraph Types (EPT) - Nueva experiencia con Paragraphs

Extra Paragraph Types (EPT): conjunto de módulos basado en párrafos de forma análoga.

Módulos de demostración EPT Descargar módulos EPT

Scroll

9.10.2. API de campos de Drupal. Formateador de campos: mostrar campos de datos en la página.

04/05/2025, by Ivan

Menu

En este artículo consideraremos los Formateadores de Campo (Field Formatters), que nos permiten editar la forma en que se muestran los campos y visualizarlos en la página.

En artículos anteriores, creamos un campo de tipo Link. En este artículo, veremos cómo se muestran estos campos en la página y qué clase es responsable de ello. Cada campo que agregas a través de Drupal puede mostrarse en la página y su configuración puede editarse desde la sección Administrar presentación (Manage display).

manage display

En la columna Formato (Format) puedes elegir cómo se mostrará el campo. Esta columna se genera gracias a las clases de Field Formatter. Veamos la clase del módulo Link, que muestra el enlace en la página:

core/modules/link/src/Plugin/Field/FieldFormatter/LinkFormatter.php

La anotación de clase muestra a qué tipo de campo pertenece este formateador:

/**
 * Implementación del plugin 'link' formatter.
 *
 * @FieldFormatter(
 *   id = "link",
 *   label = @Translation("Link"),
 *   field_types = {
 *     "link"
 *   }
 * )
 */

En este archivo, lo que más nos interesa es el método viewElements(), que es el responsable de mostrar los datos en la página. Observa que el formateador no realiza solicitudes a la base de datos, toma los datos desde la variable $items. Los datos renderizados de la entidad se pasan a $items. De este modo, se produce una separación clara de responsabilidades entre las clases:

  • Field Widget: entrada de datos
  • Field Storage: almacenamiento de datos
  • Field Formatter: salida de datos

Esto es muy conveniente, ya que permite almacenar en caché los datos en diferentes niveles. Por ejemplo, si cambia la forma de mostrar los datos o la configuración del formateador, no tiene sentido vaciar la caché de nodos, porque los datos no cambian, solo su salida.

También es útil para desplegar y añadir nueva funcionalidad. Si solo necesitas cambiar la salida de un campo, puedes agregar un nuevo Field Formatter para ese tipo de campo y definir tu lógica de salida personalizada.

Además, la clase LinkFormatter tiene el método settingsForm(), que permite agregar configuraciones para el formateador desde la página de Administrar presentación. Usando la Form API, puedes añadir campos de configuración y almacenarlos en la configuración.

El módulo Link también incluye otro formateador:

core/modules/link/src/Plugin/Field/FieldFormatter/LinkSeparateFormatter.php

Este hereda del formateador LinkFormatter normal, pero con una diferencia: utiliza una plantilla Twig personalizada:

core/modules/link/templates/link-formatter-link-separate.html.twig

De este modo, el HTML para mostrar el campo se genera pasando por esta plantilla. El formateador simplemente forma la variable $element, en la que se escribe cada valor del campo múltiple usando el índice $delta.

Como puedes ver, la API de campos (Field API) es bastante simple y cómoda de usar. En el próximo artículo, escribiremos nuestro propio tipo de campo con su almacenamiento (Storage), widget (Widget) y formateador (Formatter).