फ़ील्ड के लिए विजेट बनाना

फील्ड विजेट्स का उपयोग किसी फील्ड को फॉर्म्स के अंदर विज़ुअलाइज़ करने के लिए किया जाता है। फील्ड विजेट्स प्लगइन्स के रूप में परिभाषित किए जाते हैं, इसलिए नया फील्ड विजेट लिखने से पहले प्लगइन API से परिचित होना अनुशंसित है।

Drupal 8 में फील्ड विजेट बनाने के लिए, आपको FieldWidget एनोटेशन के साथ एक क्लास की आवश्यकता होती है।

स्थान (Location): फील्ड विजेट क्लास का स्थान होना चाहिए /[MODULE_NAME]/src/Plugin/Field/FieldWidget।
उदाहरण: /foo/src/Plugin/Field/FieldWidget/BarWidget.php

नेमस्पेस: इस क्लास का नेमस्पेस होना चाहिए [MODULE_NAME]\Plugin\Field\FieldWidget।
उदाहरण: \Drupal\foo\Plugin\Field\FieldWidget

एनोटेशन: क्लास के ऊपर एनोटेशन में यूनिक आईडी, लेबल और उन फील्ड टाइप्स का ऐरे होना चाहिए जिन्हें विजेट संभाल सकता है।

/**
 * A widget bar.
 *
 * @FieldWidget(
 *   id = "bar",
 *   label = @Translation("Bar widget"),
 *   field_types = {
 *     "baz",
 *     "string"
 *   }
 * )
 */

क्लास को WidgetInterface इम्प्लीमेंट करना होगा। और यह WidgetBase को एक्सटेंड कर सकता है जो बेसिक इम्प्लीमेंटेशन देता है। मुख्य रूप से आपको ::formElement() मेथड इम्प्लीमेंट करना होता है, जो आपके विजेट को दर्शाने वाले फॉर्म एलिमेंट्स रिटर्न करता है।

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;

//...
class BarWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element = [];
    // यहाँ अपना फॉर्म एलिमेंट बनाएँ।
    return $element;
  }

}

विजेट सेटिंग्स

अगर आपके विजेट को अतिरिक्त सेटिंग्स चाहिए, तो इसके लिए तीन स्टेप्स हैं:

• PluginSettingsBase::defaultSettings() ओवरराइड करके डिफ़ॉल्ट वैल्यू सेट करें
• उन सेटिंग्स के लिए कॉन्फ़िगरेशन स्कीमा बनाएँ
• यूज़र के लिए फॉर्म बनाएँ ताकि वे सेटिंग्स बदल सकें

स्टेप 1: defaultSettings() ओवरराइड करना

/**
 * {@inheritdoc}
 */
 public static function defaultSettings() {
  return [
    // कस्टम सेटिंग 'size' बनाएँ और डिफ़ॉल्ट वैल्यू 60 रखें
    'size' => 60,
  ] + parent::defaultSettings();
}

स्टेप 2: कॉन्फ़िगरेशन स्कीमा

कॉन्फ़िग स्कीमा इस फ़ाइल में जाएगी:

/[MODULE_NAME]/config/schema/[MODULE_NAME].schema.yml

डिफ़ॉल्ट सेटिंग size (integer वैल्यू) के लिए स्कीमा कुछ ऐसा होगा:

field.widget.settings.[WIDGET ID]:
  type: mapping
  label: 'WIDGET NAME widget settings'
  mapping:
    size:
      type: integer
      label: 'Size'

स्टेप 3: सेटिंग्स फॉर्म बनाना

यूज़र को सेटिंग बदलने देने के लिए WidgetBase::settingsForm() ओवरराइड करें।

/**
 * {@inheritdoc}
 */
public function settingsForm(array $form, FormStateInterface $form_state) {
  $element['size'] = [
    '#type' => 'number',
    '#title' => $this->t('Size of textfield'),
    '#default_value' => $this->getSetting('size'),
    '#required' => TRUE,
    '#min' => 1,
  ];

  return $element;
}

आप सेटिंग्स का सारांश भी दिखा सकते हैं:

/**
 * {@inheritdoc}
 */
public function settingsSummary() {
  $summary = [];
  $summary[] = $this->t('Textfield size: @size', ['@size' => $this->getSetting('size')]);
  return $summary;
}

getSetting() मेथड का उपयोग कर आप विजेट में सेटिंग का मान प्राप्त कर सकते हैं:

class BarWidget extends WidgetBase implements WidgetInterface {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element['value'] = $element + [
      '#type' => 'textfield',
      '#default_value' => isset($items[$delta]->value) ? $items[$delta]->value : NULL,
      '#size' => $this->getSetting('size'),
    ];

    return $element;
  }

}

विजेट का उदाहरण

TextWidget, Examples मॉड्यूल के field_example सबमॉड्यूल से:

namespace Drupal\field_example\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\WidgetBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * 'field_example_text' विजेट का प्लगइन इम्प्लीमेंटेशन।
 *
 * @FieldWidget(
 *   id = "field_example_text",
 *   module = "field_example",
 *   label = @Translation("RGB value as #ffffff"),
 *   field_types = {
 *     "field_example_rgb"
 *   }
 * )
 */
class TextWidget extends WidgetBase {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $value = isset($items[$delta]->value) ? $items[$delta]->value : '';
    $element += [
      '#type' => 'textfield',
      '#default_value' => $value,
      '#size' => 7,
      '#maxlength' => 7,
      '#element_validate' => [
        [static::class, 'validate'],
      ],
    ];
    return ['value' => $element];
  }

  /**
   * कलर टेक्स्टफील्ड को वेलिडेट करें।
   */
  public static function validate($element, FormStateInterface $form_state) {
    $value = $element['#value'];
    if (strlen($value) == 0) {
      $form_state->setValueForElement($element, '');
      return;
    }
    if (!preg_match('/^#([a-f0-9]{6})$/iD', strtolower($value))) {
      $form_state->setError($element, t("Color must be a 6-digit hexadecimal value, suitable for CSS."));
    }
  }

}