The Power of Display Modes in Drupal 8 & 9: A Complete Overview

In Drupal 8/9 display modes allow easy customization of entity views & editing, with options for nodes, comments, contact messages, blocks, taxonomy & users.

In Drupal, there are two types of display modes - Form modes and View modes. Form modes manage custom form modes and View modes manage custom view modes in Drupal core. View modes allow site builders to specify how a field should be rendered.

For example, We can have an article with a novel field that has an entity reference. In the article Full content mode display, we can request that a few details about the novel be displayed. To accomplish this, we can create a new display mode ("novel details") by using display modes.

Steps to use view modes:

Create view modes:

• Navigate to manage -> Structure -> Display modes -> View mode
• To add a new view mode, click "Add view mode."

• Click on ‘Add new content view mode’ and enter the name as ‘novel details’.It is added below Full content shows the below image.

• Created ‘novel details’ view mode successfully.

Use view mode on field display settings:

• Now, novel details view mode is available on content types, enabling view mode to navigate to manage display of the content type.
• Click on  CUSTOM DISPLAY SETTINGS and select ‘novel details’.

• Click on ‘Save’.

• Once enabled, view mode can be used on referenced fields. content is displayed in each view mode and defines how the fields are displayed in each view mode.

Use view mode on entity Views:

• Create a views (Navigate to Adim -> Structure -> Views ->Add view)
• On the views, display page see the show option below the format

• Click on Teaser, the following window opens then select novel details view mode.

Programmatically Render view modes based on conditions:

/**
* Implements hook_entity_view_mode_alter()
*/
function hook_entity_view_mode_alter(&$view_mode, Drupal\Core\Entity\EntityInterface $entity, $context) {
 // For nodes, change the view mode when it is teaser.
 if ($entity->getEntityTypeId() == 'node' && $view_mode == 'teaser') {
   $view_mode = 'novel_details';
 }
}

Steps to use Form modes:

Create form modes:

• Navigate to manage -> Structure -> Display modes -> Form mode
• To add a new Form mode, click "Add form mode."

• Click on ‘Add new user form mode’ and enter the name as ‘Registration for novelist’.It was added to the list of user form modes shown in the image below.

• Created ‘Registration for novelist’ form mode successfully.

Use form modes through User Interface(UI):

• Now Registration for novelist form mode is available on User then enable form mode to navigate to Admin -> Configuration -> People -> Account settings -> Manage Form Display.
• Click on  CUSTOM DISPLAY SETTINGS and select ‘Registration for novelist’.

• Click on ‘Save’.

• Enable ‘Registration for novelist’ successfully.
• For example, a user novelist registration form may not display all user fields. Once a user has completed the registration process, they will have access to an Edit Profile form with additional fields.
• Navigate to Admin -> Configuration -> People -> Account settings
• Select Manage Fields then Click Add Field.
• On the next screen, choose a field type, such as List(Text).
• Write a label name as "Subscription List".
• Fill out the Allowed values list, for example:
  • 1|News
  • 2|Important Announcements
  • 3|Offers, Discounts, Specials
  • 4|Partner Messages
• It should be made a mandatory field then select ‘Required Field’.
• Select the Allowed number of values as unlimited.
• Select all four values as default, and click save.
• Next, click the "Manage form display" and then select the second tab menu labeled "Registration for novelist".
• Drag the Subscription List field to the "Disabled" section and click ‘save’.
• Make sure the Subscription List field is enabled on the Manage Display tab.
• Next Log out of the site and visit Create new account. The Subscription List field will be hidden from view.

• The Subscription List field in the update profile form will appear once you've logged in.

Use form modes programmatically:

• Here's an example of mapping two custom form actions and the "default" form mode to the same form, MyEntityForm. This form must extend ContentEntityForm.

/**
 * @ContentEntityType(
 *   id = "myentity",
 *   handlers = {
 *     "form" = {
 *       "default" = "Drupal\myentity\Form\MyEntityForm",
 *       "add" = "Drupal\myentity\Form\MyEntityForm",
 *       "edit" = "Drupal\myentity\Form\MyEntityForm",
 *       "delete" = "Drupal\myentity\Form\MyEntityDeleteForm",
 *     },
 *   },
 * )
 */

• The functions hook_entity_type_build and hook_entity_type_alter  are useful for adding or changing the available form operations in existing entities.
• Use _entity form in your route to display a form with a custom form mode. Use this route to display the MyEntity's custom "edit" form, for example:

entity.myentity.edit_form:
 path: '/myentity/{myentity}/edit'
 defaults:
   _entity_form: myentity.edit
   _title: 'Edit MyEntity'
 requirements:
   _permission: 'edit myentity entities'

Form modes, like view modes, let you create many field configurations with the same content entity bundle. Field widgets can be ordered and customized in many ways in form modes, just as field formatters can be ordered and customized in different ways in view modes.

Supported modules for displays modes:

• Form Mode Control: 

  In Drupal 8, you can build form modes to modify how fields in the edit form of content like nodes and taxonomy terms are displayed. To read more about this module click here.

• Form mode manager:

  Provides an interface that makes it simple to construct and use Form modes without requiring any further development. This module includes many configurations/routes/UI/Additional access control to simplify and enhance the management and development of your various entity forms, allowing you to easily implement a complicated content strategy. Form mode manager is a technique that is fully connected with the event and routing system, allowing you to support custom content entities and add some entity form behaviours. To read more about this module click here.

• Entity Form Mode:

  You can utilise form modes for default entities like nodes, taxonomy terms, and comments with this module. It connects the form modes to the entity form routes. "entity.taxonomy term.add" or "entity.node.edit form" are the routes for adding or editing entities. All you have to do is provide a form mode with the (machine) name "edit form" to display the edit form in its own form mode (the last part of the route name). This module will display the form if this option is selected. To read more about this module click here.

• Display Suite:

  Using a drag-and-drop interface, Display Suite gives you complete control over how your content is displayed. You don't have to go through dozens of template files to arrange your nodes, views, comments, user data, and so on. For even more drag-and-drop fun, a predetermined list of layouts is provided. You can decide how one piece of content should be displayed in several places, such as teaser lists, search results, the entire node, views, and so on, by creating custom view modes. To read more about this module click here.

Conclusion:

Display modes are used to create and provide configuration options for entity viewing and editing. There are display modes for content, comments, contact messages, custom blocks, taxonomy terms, and users. In Drupal, there are two types of display modes - Form modes and View modes. Form modes manage custom form modes and View modes manage custom view modes in Drupal core.