logo

Paleta de lienzo: 隆Hazlo colorido!馃帹

Palette - Constructor visual de p谩ginas, no se requiere t铆tulo en dise帽o.

Demo en vivo Descargar Palette

Scroll
20/06/2025, by Ivan

Menu

Los tipos de campo definen las propiedades y el comportamiento de los campos. Los tipos de campo se definen como plugins, por lo que se recomienda revisar la API de plugins antes de comenzar a escribir un nuevo tipo de campo.

Para crear un tipo de campo en Drupal 8, necesitas una clase con la anotaci贸n FieldType.

La ubicaci贸n de la clase del tipo de campo debe ser MODULE_NAME/src/Plugin/Field/FieldType
Ejemplo: /modules/foo/src/Plugin/Field/FieldType/BazItem.php

El namespace de esta clase debe ser Drupal\MODULE_NAME\Plugin\Field\FieldType

<?php

namespace Drupal\MODULE_NAME\Plugin\Field\FieldType;

La anotaci贸n sobre la clase dentro del comentario de documentaci贸n debe incluir un identificador 煤nico, etiqueta y el formateador por defecto. El formateador por defecto es el identificador que se usar谩 en la anotaci贸n de la clase formateadora de campo.

/**
 * Provee un tipo de campo baz.
 * 
 * @FieldType(
 *   id = "baz",
 *   label = @Translation("Campo Baz"),
 *   default_formatter = "baz_formatter",
 *   default_widget = "baz_widget",
 * )
 */

La clase debe implementar la interfaz FieldItemInterface y extender la clase FieldItemBase para una implementaci贸n com煤n.

class BazItem extends FieldItemBase {

}

El m茅todo FieldItemInterface::schema() debe ser sobreescrito para indicar al sistema c贸mo almacenar los valores del campo:

/**
 * {@inheritdoc}
 */
public static function schema(FieldStorageDefinitionInterface $field_definition) {
  return array(
    // 'columns' contiene los valores que almacenar谩 el campo
    'columns' => array(
      // Lista de valores que guardar谩 el campo, en este caso un solo valor llamado 'value'
      'value' => array(
        'type' => 'text',
        'size' => 'tiny',
        'not null' => FALSE,
      ),
    ),
  );
}

Este m茅todo retorna un array con la especificaci贸n de columnas para el esquema API.

El m茅todo FieldItemInterface::propertyDefinitions() informa al sistema detalles m谩s espec铆ficos de las propiedades de tu campo:

/**
 * {@inheritdoc}
 */
public static function propertyDefinitions(FieldStorageDefinitionInterface $field_definition) {
  $properties = [];
  $properties['value'] = DataDefinition::create('string');

  return $properties;
}

El m茅todo Map::isEmpty (heredado por FieldItemBase) debe ser sobreescrito para indicarle al sistema cu谩ndo un campo est谩 vac铆o.

/**
 * {@inheritdoc}
 */
public function isEmpty() {
  $value = $this->get('value')->getValue();
  return $value === NULL || $value === '';
}

Configuraciones del campo

Las configuraciones de campo permiten que los usuarios ajusten el campo seg煤n sus necesidades. Si el campo tiene configuraciones, debes hacer tres pasos:

  1. Sobre-escribir FieldItemBase::defaultFieldSettings() para definir valores por defecto
  2. Crear un esquema de configuraci贸n para esas opciones
  3. Crear un formulario para permitir que los usuarios modifiquen las configuraciones

Paso 1: Sobre-escribir FieldItemBase::defaultFieldSettings()

/**
 * {@inheritdoc}
 */
public static function defaultFieldSettings() {
  return [
    // Declara una 煤nica opci贸n 'size' con valor por defecto 'large'
    'size' => 'large',
  ] + parent::defaultFieldSettings();
}

Paso 2: Crear esquema de configuraci贸n para las opciones

El esquema va en:

[RAIZ_DEL_MODULO]/config/schema/[NOMBRE_DEL_MODULO].schema.yml

En este archivo describes el tipo(s) de dato para las opciones creadas en defaultFieldSettings():

El paso 1 cre贸 una opci贸n llamada 'size' que guarda una cadena. El esquema ser谩 as铆:

field.field_settings.[ID_DEL_CAMPO]:
  type: mapping
  label: 'Configuraciones de FIELDNAME'
  mapping:
    size:
      type: string
      label: 'Tama帽o'

Paso 3: Crear formulario para que los usuarios modifiquen configuraciones

Este formulario se crea sobreescribiendo FieldItemBase::fieldSettingsForm()

/**
 * {@inheritdoc}
 */
public function fieldSettingsForm(array $form, FormStateInterface $form_state) {
  
  $element = [];
  // La clave del elemento debe ser el nombre de la configuraci贸n
  $element['size'] = [
    '#title' => $this->t('Tama帽o'),
    '#type' => 'select',
    '#options' => [
      'small' => $this->t('Peque帽o'),
      'medium' => $this->t('Mediano'),
      'large' => $this->t('Grande'),
    ],
    '#default_value' => $this->getSetting('size'),
  ];

  return $element;
}

Ejemplo real

RgbItem del m贸dulo field_example en el proyecto Examples:

namespace Drupal\field_example\Plugin\Field\FieldType;

use Drupal\Core\Field\FieldItemBase;
use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\Field\FieldStorageDefinitionInterface;
use Drupal\Core\TypedData\DataDefinition;

/**
 * Implementaci贸n del plugin 'field_example_rgb'.
 *
 * @FieldType(
 *   id = "field_example_rgb",
 *   label = @Translation("Color ejemplo RGB"),
 *   module = "field_example",
 *   description = @Translation("Demuestra un campo compuesto por un color RGB."),
 *   default_widget = "field_example_text",
 *   default_formatter = "field_example_simple_text"
 * )
 */
class RgbItem extends FieldItemBase {

  /**
   * {@inheritdoc}
   */
  public static function schema(FieldStorageDefinitionInterface $field_definition) {
    return array(
      'columns' => array(
        'value' => array(
          'type' => 'text',
          'size' => 'tiny',
          'not null' => FALSE,
        ),
      ),
    );
  }

  /**
   * {@inheritdoc}
   */
  public function isEmpty() {
    $value = $this->get('value')->getValue();
    return $value === NULL || $value === '';
  }

  /**
   * {@inheritdoc}
   */
  public static function propertyDefinitions(FieldStorageDefinitionInterface $field_definition) {
    $properties['value'] = DataDefinition::create('string')
      ->setLabel(t('Valor hexadecimal'));

    return $properties;
  }

}