Implementing views custom style plugin in Drupal 10
Views style plugins, such as tables and lists, serve the purpose of presenting a view in various display formats. The built-in plugins usually suffice for basic displays, and customising them by overriding their template files through theming is often a simple solution for most customization needs. However, when dealing with more intricate display scenarios, particularly those that require frequent reuse, a custom style plugin becomes a more robust and tailored solution.
In this article, we will see the basic concept of creating the views custom style plugin which can be modified as per the requirement.
Introduction
If you have still not tried any custom style plugins implementation, then this article will be helpful for you to understand the concept and implementation in Drupal 10.
Presuming that you already possess a fundamental understanding of Views in Drupal, this is an ideal point to begin. If not, you can refer to the following resource for a solid foundation: Views Concept Guide on Drupal.org
As a site builder, you might have encountered the /admin/structure/views user interface and come across a few default views that come pre-installed with a fresh Drupal installation.
Let’s take example of content listing page (/admin/content page) that has been created from views module as a result of admin/structure/views/view/content page view. Below is the screenshot of this page for reference:
Let’s explore its default settings. Click on the ‘Format’ link selected option as ‘Table’ to access the screen below, which displays the view style options provided by Drupal out of the box.
These classes are sourced from the directory located at /core/modules/views/src/Plugin/views/style. In this specific case, the responsible class is Table.php.
If you navigate to /core/modules/views/src/Plugin/views/style/Table.php, you’ll notice that the Table class extends StylePluginBase. It’s important to carefully examine and comprehend this structure, as it’s essential for creating a new style that can be integrated into the Views user interface. These classes originate from the directory located at: /core/modules/views/src/Plugin/views/style.
In this context, the Table.php class assumes responsibility.
Upon opening the file at /core/modules/views/src/Plugin/views/style/Table.php, you will observe that the Table class inherits from StylePluginBase. Class It is important to carefully examine and grasp this structure, as it is a necessary step in the process of creating a new style for integration into the Views user interface.
To incorporate the style plugin, we must develop a new module, which I’ll name ‘custom_views_style.’ Similar to any other Drupal 10 module, we need to create the following components:
- custom_views_style.info.yml: This file informs Drupal about the existence of our new module.
- custom_views_style.module: It serves to introduce the theme hook and the hook_preprocess_HOOK code.
- MyStyle.php: This file will serve as our style plugin and reside in a path analogous to the core’s Table.php. You can find it at ‘custom_views_style/src/Plugin/views/style/CustomViewsStyle.php.’
Within this file, you’ll find the annotation and form for the style plugin. The annotation will specify the template file that Drupal should use, which is ‘custom_views_style_template.html.twig.
CustomViewsStyle.php
The initial code structure should resemble the following. We must inherit the code from StylePluginBase, following a similar approach to the one used in ‘core/modules/views/src/Plugin/views/style/Table.php.’ Additionally, we need to modify the annotation and other code snippets to make them specific to our plugin.
<?php
/**
* @file
* Definition of Drupal\custom_views_style\Plugin\views\style\MyStyle.
*/
namespace Drupal\custom_views_style\Plugin\views\style;
use Drupal\core\form\FormStateInterface;
use Drupal\views\Plugin\views\style\StylePluginBase;
/**
* Style plugin to render a list contents
* in special format.
*
* @ingroup views_style_plugins
*
* @ViewsStyle(
* id = "custom_views_style_plugin",
* title = @Translation("Custom View Style"),
* help = @Translation("Render a list of contents in a specific format."),
* theme = "custom_views_style_template",
* display_types = { "normal" }
* )
*
*/
class CustomViewsStyle extends StylePluginBase {
/**
* {@inheritdoc}
*/
protected $usesRowPlugin = TRUE;
/**
* Set default options
*/
protectedfunction defineOptions() {
$options = parent::defineOptions();
return $options;
}
/**
* {@inheritdoc}
*/
publicfunction buildOptionsForm(&$form, FormStateInterface $form_state) {
parent::buildOptionsForm($form, $form_state);
}
publicfunction render() {
returnparent::render();
}
}
The code provided above is sufficient for Drupal to recognize the new plugin. It will function correctly without the need for any additional form options.
However, if you wish to include additional classes exclusively for this plugin, you can incorporate the following code after invoking ‘parent::buildOptionsForm($form, $form_state);’.
// Extra CSS classes.
$form['classes'] = [
'#type' => 'textfield',
'#title' => t('CSS classes'),
'#default_value' => (isset($this->options['classes'])) ? $this->options['classes'] : 'custom-views-block',
'#description' => t('CSS classes for further customization of any related page.'),
];
Final Output
The final outcome will resemble the screenshots below within the View’s user interface after the module is fully developed and installed.
The plugin’s name is obtained from the Title field within the annotation.
* title = @Translation("Custom View Style"),
And the setting page if added the form values like below:
The form is loaded as per the code within ‘buildOptionsForm()’.
With the plugin now complete, all that remains is to provide the .module, and twig template files to finalize the code.
custom_views_style.module
As you may recall, we included the theme file’s name in the annotation as well:
theme = "custom_views_style_template"
As we have mentioned the theme template, we will add a file named ‘custom_views_style_template.html.twig‘ within the ‘custom_views_style/templates’ directory. After that need to mention the theme variables in hook_theme() into the .module file.
I have included some additional key-value pairs in the theme array above. However, having the following code is sufficient for Drupal to locate and process the content within the twig file.
/**
* Implements hook_theme().
*/
function custom_views_style_theme($existing, $type, $theme, $path) {
return [
'custom_views_style_template' => [
'variables' => [],
],
];
}
custom_views_style_template.html.twig
Simply, including {{rows}} in this file will render the output. However, as you can observe, there is considerable flexibility to utilize your own variables. Therefore, this code must be adapted to align with the logic you’ve implemented in the module file’s hook_preprocess_HOOK.”
That concludes it! You should now have the capability to create your own Views display plugin for Drupal 10. If you have any queries, please comment here. Happy coding!
