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 on configuration Node type entity using the ThirdPartySettingsInterface .

By default configuration Node type entity fields is like this:

 

add_custom_fields_settings_to_node_type

 

In this article we are going to look at how to use the ThirdPartySettingsInterface to add some extra fields to existing configuration node type entity.

Today we are going to see an example of this and add an extra fields to the node type definition 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. 

I added a new #entity_builder to the form which will be triggered when the form is submitted.

In this example  I'll add custom css class field to tag <body> for each node type.

Create mymodule.module file:

<?php

use Drupal\Component\Utility\Html;
use Drupal\Core\Form\FormStateInterface;
use Drupal\node\Entity\NodeType;
use Drupal\node\NodeInterface;
use Drupal\node\NodeTypeInterface;

/**
 * @param $form
 * @param FormStateInterface $form_state
 */
function mymodule_form_node_type_form_alter(&$form, FormStateInterface $form_state)
{

  // Load the current node type configuration entity.
  $node_type = $form_state->getFormObject()->getEntity();

  $form['custom_fields'] = array(
    '#type' => 'details',
    '#title' => t('Custom Fields'),
    '#group' => 'additional_settings',
  );

  $form['custom_fields']['custom_body_classes'] = array(
    '#type' => 'textfield',
    '#title' => t('Classes CSS'),
    '#description' => t('Add classes to body tag.'),
    '#default_value' => $node_type->getThirdPartySetting('mymodule', 'custom_body_classes'),
  );
  $form['#entity_builders'][] = '_mymodule_form_node_type_form_builder';
}


/**
 * @param $entity_type
 * @param NodeTypeInterface $type
 * @param $form
 * @param FormStateInterface $form_state
 */
function _mymodule_form_node_type_form_builder($entity_type, NodeTypeInterface $type, &$form, FormStateInterface $form_state)
{
  if ($form_state->getValue('custom_body_classes')) {
    $type->setThirdPartySetting('mymodule', 'custom_body_classes', $form_state->getValue('custom_body_classes'));
  } else {
    $type->unsetThirdPartySetting('mymodule', 'custom_body_classes');
  }
}

 

The getThirdPartySetting(), setThirdPartySetting and unsetThirdPartySetting  methods on the entity object is provided by the ThirdPartySettingsInterface which all configuration entities have by default if they extend from the ConfigEntityBase class. 

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:

config/schema/mymodule.schema.yml

node.type.*.third_party.mymodule:
  type: mapping
  label: 'Custom Fields'
  mapping:
    custom_body_classes:
      type: text
      label: 'Add classes to body tag'

 

With this schema definition we are basically appending to the schema of the node.type config node type 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 node type entity the result is like this:

 

add_custom_fields_settings_to_node_type

 

To add a specific css class to body tag in Drupal 8 I will use hook_preprocess_html().


/**
 * @param $variables
 */
function mymodule_preprocess_html(&$variables)
{
  $node = \Drupal::routeMatch()->getParameter('node');
  if ($node instanceof NodeInterface) {
    $node_type = NodeType::load($node->bundle());
    if ($node_type instanceof NodeTypeInterface && $classes = $node_type->getThirdPartySetting('mymodule', 'custom_body_classes'))
      $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 node type. these classes will be show in <body> tag.

 

add_custom_fields_settings_to_node_type

Comments

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