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:
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:
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.
