Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

In this tuto, I'll show you how to add custom fields to webform settings using the ThirdPartySettingsInterface .

By default webform settings entity fields is like this:

Webform settings by default

 
Adding custom fields to webform settings entity - by default

 

In this article we are going to look at how to use the ThirdPartySettingsInterface to add some extra fields to existing configuration  webform entity. For example, if you ever need to store some config together with a node type or a taxonomy vocabulary, there is a great way to do so using this interface.

Today we are going to see an example of this and add an extra fields to the webform settings and store the value in this way.

There are a number of steps involved in this process. First, we need to alter the form with which the entity configuration data is added and saved.

In the case of the webform settings entity there are one form 'webform_settings_form_form' for save the settings of each webform, so we need to alter it. 

 

In this I'll add custom css class field to each webform.

 

Create mymodule.module file

 

<?php

use Drupal\Component\Utility\Html;
use Drupal\Core\Form\FormStateInterface;
use Drupal\webform\Entity\Webform;

/**
 * @param $form
 * @param $form_state
 * @param $form_id
 */
function mymodule_form_alter(&$form, &$form_state, $form_id)
{
  if ($form_id == 'webform_settings_form_form') {
    $entity = $form_state->getFormObject()->getEntity();
    $form['third_party_settings']['#tree'] = TRUE;

    $form['third_party_settings']['mymodule']['custom_class_field'] = [
      '#type' => 'textfield',
      '#title' => t('Custom Class field'),
      '#default_value' => $entity->getThirdPartySetting('mymodule', 'custom_class_field'),
    ];
  }
}

 

 

Method 2 with submit handler:

/**
 * @param $form
 * @param $form_state
 * @param $form_id
 */
function mymodule_form_alter(&$form, &$form_state, $form_id)
{
  if ($form_id == 'webform_settings_form_form') {
    $entity = $form_state->getFormObject()->getEntity();

    $form['custom_class_field'] = [
      '#type' => 'textfield',
      '#title' => t('Custom Class field'),
      '#default_value' => $entity->getThirdPartySetting('mymodule', 'custom_class_field'),
    ];
    $form['actions']['submit']['#submit'][] = '_mymodule_form_submit';
  }
}

/**
 * @param $form
 * @param FormStateInterface $form_state
 * @throws \Drupal\Core\Entity\EntityStorageException
 */
function _mymodule_form_submit(&$form, FormStateInterface $form_state)
{
  /** @var \Drupal\webform\WebformInterface $entity */
  if ($entity = $form_state->getFormObject()->getEntity()) {
    $entity->setThirdPartySetting('mymodule', 'custom_class_field', $form_state->getValue('custom_class_field'));
    $entity->save();
  }
}

 

The getThirdPartySetting() method on the entity object is provided by the ThirdPartySettingsInterface which all configuration entities have by default if they extend from the ConfigEntityBase class. with this method we simply retrieve a value that is stored as third party settings. 

We need also to add our configuration schema so that it becomes translatable. Inside the /config/schema/mymodule.schema.yml file of our module we need to add this:

 create config/schema/mymodule.schema.yml file

 

webform.settings.third_party.mymodule:
  type: mapping
  label: 'Webform mymodule configuration'
  mapping:
    settings:
      type: mapping
      label: 'mymodule settings'
      mapping:
        custom_class_field:
          type: string
          label: 'Custom class field'

 

With this schema definition we are basically appending to the schema of the webform.settings config webform settings entity by specifying some metadata about the third party settings our module provides. For more information on config schemas be sure to check out the docs on Drupal.org.

After adding our custom fields  to existing config webform settings entity the result is like this:

 

Adding custom fields to webform settings entity

 

To add a specific css class to webforms/forms form tag in Drupal 8 I will use hook_preprocess_webform().



/**
 * @param array $variables
 */
function mymodule_preprocess_webform(array &$variables)
{
  if (!empty($variables['element']['#webform_id'])) {
    $webform = Webform::load($variables['element']['#webform_id']);
    if ($webform && $classes = $webform->getThirdPartySetting('mymodule', 'custom_class_field')) {
      $classes_array = explode(' ', $classes);
      foreach ($classes_array as $class) {
        $variables['attributes']['class'][] = Html::cleanCssIdentifier($class, []);
      }
    }
  }
}

 

Finally, here's the result after adding CSS classes to webform settings. these classes will be show in <form> tag.

 

 

add custom fields settings form to webform drupal 8
 

Comments

Submitted by Miloš Kroulík (not verified) on Tue, 03/16/2021 - 11:10 Permalink

Thanks for your article. However, I'm having trouble with exporting my webform config afterwards - there are some unexpected duplicated. Please see my DA question: https://drupal.stackexchange.com/questions/300904/adding-thirdpartysetting-to-webform-entity-results-in-wrong-module-dependency There's also some basic info on D.o, which suggest using settings as a key: https://www.drupal.org/docs/8/modules/webform/webform-cookbook/providing-third-party-settings-to-webform-entities
Submitted by codimth on Wed, 03/17/2021 - 13:33 Permalink

Try this code:

function mymodule_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id === 'webform_settings_form') {
    $entity = $form_state->getFormObject()->getEntity();
    $elements = $entity->getElementsInitializedAndFlattened();
    $options = [];
    foreach ($elements as $element_name => $element) {
      $options[$element_name] = $element['#title'];
    }
    $form['third_party_settings']['mymodule'] = [
      '#type' => 'details',
      '#title' => t('My Module'),
      '#open' => TRUE,
    ];
    $form['third_party_settings']['mymodule']['email_element'] = [
      '#type' => 'select',
      '#options' => $options,
      '#title' => t('E-mail element'),
      '#default_value' => $entity->getThirdPartySetting('mymodule', 'email_element'),
    ];
    $form['actions']['submit']['#submit'][] = '_mymodule_form_submit';
  }
}

function _mymodule_form_submit(&$form, FormStateInterface $form_state) {
  /** @var \Drupal\webform\WebformInterface $entity */
  if ($entity = $form_state->getFormObject()->getEntity()) {
    $entity->setThirdPartySetting('mymodule', 'email_element', $form_state->getValue(['third_party_settings','email_element','email_element']));
    $entity->save();
  }
}
Submitted by Miloš Kroulík (not verified) on Tue, 03/16/2021 - 21:20 Permalink

In the end, https://drupal.stackexchange.com/a/300915/7580 worked for me.
Submitted by codimth on Wed, 03/17/2021 - 11:58 Permalink

@Miloš Kroulík thanks for your comments, using hook_webform_third_party_settings_form_alter method all your custom fields is under General Tab. 

the question is: How to add custom fields under Form Tab or other tabs using hook_webform_third_party_settings_form_alter. ?

 


 
Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon