A glimpse at creating custom field formatters in Drupal 8

Drupal 8’s “fruitful fields” of opportunities are endless — so let’s take another walk through them! It lets you optimize your website’s performance with the BigPipe module in the core, boost your SEO with a host of useful modules, improve your website’s upgrade process, bring order to user roles and permissions, enjoy an easier configuration management, get in line with the latest web accessibility standards, and that’s just the beginning of the list. Along with everything else, Drupal 8 also lets you create custom field formatters, so today we’ll take a glimpse at what they are and how you can build them.

Field formatters in Drupal 8 and what they do

In accordance with Drupal 8’s architecture, field formatters are plugins — and pretty useful ones at that. Their main job is to tell Drupal how the field values should be presented to the website users, as well as what options there are to configure this display. This should be useful and engaging for end users and fully reflect your ideas. To have absolute freedom in the implementing this, you can create your custom field formatter plugin in Drupal 8.

A few tips on creating custom field formatters in Drupal 8

Creating your module

Everything starts with a module — this is Drupal, after all! You need first to create a module that will “host” your field formatter code. To implement it, create this folder structure inside your new module’s folder:

MyModule/src/Plugin/Field/FieldFormatter

Creating your field formatter class file

OK, the folder is ready — you can now add a new field formatter class file (one for every formatter you build):

MyModule/src/Plugin/Field/FieldFormatter/MyFormatter.php

The namespace should look like this:

Drupal\MyModule\Plugin\Field\FieldFormatter

Plugins are classes, and so they extend from each other. Your field formatter class should extend the \Drupal\Core\Field\FormatterBase class. MyFormatter class name should reflect what the formatter does, and, most importantly, end with a “Formatter” suffix.

Making an annotation

Annotations are a great OOP practice in Drupal 8 because they contain the class metadata. To help your new plugin get discovered, you need to make the @FieldFormatter annotation. It should contain the most important data about your new field formatter such an ID (machine-name), a label (human-readable name), and the types of fields it is used for.

Using methods

The settingsForm() method will let you define specific options, and the settingsSummary() method is responsible for informing end users about the formatter settings. The viewElements() method deals with rendering the field data.

Walking deeper into the fields

If you are interested in deeper insights into to Drupal field formatting, check out blog posts by our developers about the Field API in Drupal 8 (custom formatters and widgets), as well as the Field Image Tooltips module. The latter has been created by one of our teams, and deals with adding images with tooltips that are available both for Drupal 7 and Drupal 8.

Hopefully, you enjoyed this little walk through the fields (or their formatters) in Drupal 8. Our developers are ready to help you in creating custom field formatters, moving your website to Drupal 8 to let you enjoy the innovation, or building an entirely new site for you. Be ahead of the field with Drupal 8! Let’s discuss it right now.