In this article I am going to show you how to create a custom Views field in Drupal 8. At the end of this tutorial, you will be able to add a new field to any node based View which will flag (by displaying a specific message) the nodes of a particular type (configurable in the field configuration). Although I will use nodes, you can use this example to create custom fields for other entities as well.

So let's get started by creating a small module called node_type_flagger (which you can also find in this repository):

node_type_flagger.info.yml:

name: Node Type Flaggerdescription: 'Demo module that flags a particular node type in a View listing'type: modulecore: 8.x

In Drupal 7, whenever we want to create a custom field, filter, relationship, etc for Views, we need to implement hook_views_api() and declare the version of Views we are using. That is no longer necessary in Drupal 8. What we do now is create a file called module_name.views.inc in the root of our module and implement the views related hooks there.

To create a custom field for the node entity, we need to implement hook_views_data_alter():

node_type_flagger.views.inc:

/** * Implements hook_views_data_alter(). */function node_type_flagger_views_data_alter(array &$data) {  $data['node']['node_type_flagger'] = array(    'title' => t('Node type flagger'),    'field' => array(      'title' => t('Node type flagger'),      'help' => t('Flags a specific node type.'),      'id' => 'node_type_flagger',    ),  );}

In this implementation we extend the node table definition by adding a new field called node_type_flagger. Although there are many more options you can specify here, these will be enough for our purpose. The most important thing to remember is the id key (under field) which marks the id of the views plugin that will be used to handle this field. In Drupal 7 we have instead a handler key in which we specify the class name.

In Drupal 8 we have something called plugins and many things have now been converted to plugins, including views handlers. So let's define ours inside the src/Plugin/views/field folder of our module:

src/Plugin/views/field/NodeTypeFlagger.php

<?php/** * @file * Definition of Drupal\node_type_flagger\Plugin\views\field\NodeTypeFlagger */namespace Drupal\node_type_flagger\Plugin\views\field;use Drupal\Core\Form\FormStateInterface;use Drupal\node\Entity\NodeType;use Drupal\views\Plugin\views\field\FieldPluginBase;use Drupal\views\ResultRow;/** * Field handler to flag the node type. * * @ingroup views_field_handlers * * @ViewsField("node_type_flagger") */class NodeTypeFlagger extends FieldPluginBase {  /**   * @{inheritdoc}   */  public function query() {    // Leave empty to avoid a query on this field.  }  /**   * Define the available options   * @return array   */  protected function defineOptions() {    $options = parent::defineOptions();    $options['node_type'] = array('default' => 'article');    return $options;  }  /**   * Provide the options form.   */  public function buildOptionsForm(&$form, FormStateInterface $form_state) {    $types = NodeType::loadMultiple();    $options = [];    foreach ($types as $key => $type) {      $options[$key] = $type->label();    }    $form['node_type'] = array(      '#title' => $this->t('Which node type should be flagged?'),      '#type' => 'select',      '#default_value' => $this->options['node_type'],      '#options' => $options,    );    parent::buildOptionsForm($form, $form_state);  }  /**   * @{inheritdoc}   */  public function render(ResultRow $values) {    $node = $values->_entity;    if ($node->bundle() == $this->options['node_type']) {      return $this->t('Hey, I\'m of the type: @type', array('@type' => $this->options['node_type']));    }    else {      return $this->t('Hey, I\'m something else.');    }  }}

We are defining our NodeTypeFlagger class that extends FieldPluginBase (which is the base plugin abstract class for the views field many plugins extend from). Just above the class declaration we use the @ViewsField annotation to specify the id of this plugin (the same one we declared in the hook_views_data_alter() implementation). We also use the @ingroup annotation to mark that this is a views field handler.

In our example class, we have 4 methods (all overriding the parent class ones).

Query

First, we override the query() method but leave it empty. This is so that views does not try to include this field in the regular node table query (since the field is not backed by a table column).

DefineOptions

The second method is the defineOptions() method through which we specify what configuration options we need for this field. In our case one is enough: we need to specify the node type which we want flagged in the Views results. We set a sensible default as the article node type.

BuildOptionsForm

The third method, buildOptionsForm() is responsible for creating the form for the configuration options we declared earlier. In our case we just have a select list with which we can choose from the existing node types.

Render

Lastly, the render() method which is the most important and which deals with output. We use it to actually render the content of the field for each result. Here is where we perform some business logic based on the currently set node type option and flag with a message whether or not the current result is in fact of the type specified in the configuration.

The $resultRow object is an instance of Drupal\views\ResultRow which contains data returned for the current row by Views and the entity object at the base of the query (in our case the node). Based on this information we can perform our logic.

Keep in mind you can use depedency injection to inject all sorts of services into this class and make use of them in your logic. Additionally, you can override various other methods of the parent class in order to further customize your field.

Conclusion

There you have it. A small custom module that demonstrates how to create a custom Views field (plugin). Relationships, filters, sorters and others work in similar way. I will be covering those in later articles. Stay tuned.

var switchTo5x = true;stLight.options({"publisher":"dr-8de6c3c4-3462-9715-caaf-ce2c161a50c"});