Get the most out of display modes!

Big thanks to the organaizers

Jose Luis Bellido (jlbellido)

@jose_lakatos

https://github.com/jlbellido

https://www.drupal.org/u/jlbellido

  • Backend developer.
  • +5 years of experience with Drupal.

We are hiring!

Goals of this session 

  • Basic knowledge about how organize your project.
  • Sharing best practices.
  • From the basics.
  • Practical session with real examples.
  • Have fun.

Table of contents

  • I : Introduction
    • View modes in Drupal 7
    • Display modes in Drupal 8
  • II : Real example
    • Form Modes in Drupal 8
    • View modes in Drupal 8
    • Pseudo-fields

Introduction

View modes in Drupal 7

View modes In Drupal 7

It's a concrete visualization mode for a node or other entities.

Where can we use view modes?

  • Views
  • Panels
  • etc..

For nodes : 

  • Full content (full)
  • Teaser (teaser)
  • RSS, Search Index, Search Result

More info : https://www.drupal.org/node/1577752

View modes In Drupal 7

Related concepts

  • Field Formatter : Specify how a field is displayed when the entity is displayed.
  • Field Widget : Specify how a field is displayed in the edit form

View modes In Drupal 7

View modes In Drupal 7

Manage display

View modes In Drupal 7

How to create new view modes

/**
* Implements hook_entity_info_alter().
*/
function MYMODULE_entity_info_alter(&$entity_info) {
  $entity_info['node']['view modes']['related'] = array(
    'label' => t('Related'),
    'custom settings' => TRUE,
  );
}

Theme suggestions.

/**
  * Implements template_preprocess_node()
  */
function THEME_preprocess_node(&$variables) {
  $node = $variables['node'];
  $view_mode = $variables['view_mode'];
  
  // Set up template suggestions for non-standard view modes
  if ($view_mode !== 'full') {
    $variables['theme_hook_suggestions'][] = 'node__' . $node->type . '__' . $view_mode;
  }
}
  • No UI by default.
  • What about forms?
  • No exportable by default.

View modes In Drupal 7

Limitations

Useful contrib modules

Display modes IN DRUPAL 8

Form Modes + View Modes

Display modes In Drupal 8

Form Modes

No more : #access => FALSE !!!!

Display modes In Drupal 8

New administration page

Display modes In Drupal 8

Exportable configuration.

Display modes In Drupal 8

Other features

  • Properties are also configurable.
    • (Title, created, changed...)
  • No extra contrib modules needed.

More info : https://www.drupal.org/node/2511722

Part 2 : REAL EXAMPLE

Tapas section!

Requirements

  • A Tapa will have the following fields
    • Title
    • Description
    • Image
    • Price
  • 2 Tapas forms:
    • Full tapa form
    • Suggested tapa form
  • 2 visualization modes:
    • Tapas most sold
    • Tapas list
  • A common text for all tapas.

Previous Work

  • Custom module: display_modes_example
  • Custom entity: Tapa
  • $ drupal generate:module
  • $ drupal generate:entity:content

https://drupalconsole.com/ (v 1.0.0-RC16)

Only 5 minutes with Drupal Console!!!

Available on Github : 

https://github.com/jlbellido/display_modes_example

Source Code

Form MODES IN DRUPAL 8

  • Tapas forms
    • Full tapa form
    • Suggested tapa form

Requirements that we want to achieve:

Our first goal

Form MODES IN DRUPAL 8

Define a new form mode (I)

Form MODES IN DRUPAL 8

Define a new form mode (II)

Form MODES IN DRUPAL 8

Configure our fields for our field mode

Form MODES IN DRUPAL 8

Declare as "Form operation"

 *     "form" = {
 *       "default" = "Drupal\display_modes_example\Form\TapaForm",
 *       "add" = "Drupal\display_modes_example\Form\TapaForm",
 *       "suggested_tapa_form" = "Drupal\display_modes_example\Form\TapaForm",
 *       "edit" = "Drupal\display_modes_example\Form\TapaForm",
 *       "delete" = "Drupal\display_modes_example\Form\TapaDeleteForm",
 *     },

For other entities:

/**
 * Implements hook_entity_type_alter().
 */
function display_modes_example_entity_type_alter(array &$entity_types) {
  if (isset($entity_types['entity'])) {
    $entity_types['entity']->setFormClass(....);
  }
}

Form MODES IN DRUPAL 8

Adding a new route to routing.yml

entity.tapa.suggested_tapa_form:
  path: '/admin/structure/tapa/suggestion'
  defaults:
    _entity_form: tapa.suggested_tapa_form
    _title: 'Suggested tapa from'
  requirements:
    _permission: 'edit tapa entities'

Form MODES IN DRUPAL 8

entity.tapa.suggested_tapa_form:
  route_name: entity.tapa.suggested_tapa_form
  title: 'Add Tapa suggestion'
  appears_on:
    - entity.tapa.collection

New link action

display_modes_example.links.action.yml

Form MODES IN DRUPAL 8

Final result: Action links

Form MODES IN DRUPAL 8

Final result: Suggested  tapa form

Other considerations

Contrib modules

Documentation page

https://www.drupal.org/node/2511722

VIEW MODES IN D8

  • 2 visualization modes:
    • Tapas most sold (highlighted)
    • Tapas list

Requirements that we want to achieve:

VIEW MODES IN D8

Define a new view mode (I)

VIEW MODES IN D8

Define a new view mode (II)

VIEW MODES IN D8

Configure our view modes.

VIEW MODES IN D8

Using our view modes - Views

VIEW MODES IN D8

Final result

More Advantages of View modes USAGE

Contextual links

Inline editing

More Advantages of View modes USAGE

Available in several hooks and methods

/**
 * Implements hook_entity_view().
 */
function hook_entity_view(&$build, $entity, EntityViewDisplayInterface $display, $view_mode) {
    ......
}

Template suggestions

/**
 * Implements hook_theme_suggestions_HOOK().
 */
function node_theme_suggestions_node(array $variables) {
  $suggestions = array();
  $node = $variables['elements']['#node'];
  $sanitized_view_mode = strtr($variables['elements']['#view_mode'], '.', '_');

  $suggestions[] = 'node__' . $sanitized_view_mode;
  $suggestions[] = 'node__' . $node->bundle();
  $suggestions[] = 'node__' . $node->bundle() . '__' . $sanitized_view_mode;
  $suggestions[] = 'node__' . $node->id();
  $suggestions[] = 'node__' . $node->id() . '__' . $sanitized_view_mode;

  return $suggestions;
}

Pseudo-fields in Drupal 8

Extra fields

  • Common text for all tapas.

Requirements that we want to achieve:

Pseudo-fields in Drupal 8

Not field components that we handle as fields at Manage fields and Manage form display sections

Pseudo-fields in Drupal 8

Exposing pseudo-fields

/**
 * Implements hook_entity_extra_field_info().
 */
function display_modes_example_entity_extra_field_info() {
  $extra = [];

  $extra['tapa']['tapa']['display']['common_text'] = [
    'label' => t('Common text'),
    'description' => t('Common text for Tapas'),
    'weight' => 0,
    'visible' => TRUE,
  ];

  return $extra;
}

Pseudo-fields in Drupal 8

Exposing pseudo-fields

Pseudo-fields in Drupal 8

Retrieving content for the pseudo field

/**
 * Class TapaViewBuilder
 *
 * Render controller for Tapas.
 */
class TapaViewBuilder extends EntityViewBuilder  {

  /**
   * {@inheritdoc}
   */
  public function buildComponents(array &$build, array $entities, array $displays, $view_mode) {
    parent::buildComponents($build, $entities, $displays, $view_mode);

    foreach ($entities as $id => $entity) {
      $bundle = $entity->bundle();
      $display = $displays[$bundle];
      if ($display->getComponent('common_text')) {
        $build[$id]['common_text'] = [
          '#theme' => 'common_text',
          '#text' => t('Taste this and other awesome Tapas at this DrupalCamp Es!!! '),
        ];
      }
    }
  }

}

Pseudo-fields in Drupal 8

Final Result

Pseudo-fields in Drupal 8

Pseudo-fields in forms

/**
 * Implements hook_entity_extra_field_info().
 */
function display_modes_example_entity_extra_field_info() {
  $extra = [];

  $extra['tapa']['tapa']['display']['common_text'] = [
    'label' => t('Common text'),
    'description' => t('Common text for Tapas'),
    'weight' => 0,
    'visible' => TRUE,
  ];

  $extra['tapa']['tapa']['form']['common_text_form'] = [
    'label' => t('Common text Form'),
    'description' => t('Common text for form Tapas'),
    'weight' => 0,
    'visible' => TRUE,
  ];

  return $extra;
}

Pseudo-fields in Drupal 8

Pseudo-fields in forms

/**
 * Form controller for Tapa edit forms.
 *
 * @ingroup display_modes_example
 */
class TapaForm extends ContentEntityForm {
  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    /* @var $entity \Drupal\display_modes_example\Entity\Tapa */
    $form = parent::buildForm($form, $form_state);

    $display = $this->getFormDisplay($form_state);
    if ($display->getComponent('common_text_form')) {
      $form['common_text_form']['#markup'] = t('Common text form');
    }

    return $form;
  }
....
....

SumMary

Time for Questions !!

@jose_lakatos

https://github.com/jlbellido

https://www.drupal.org/u/jlbellido

Made with Slides.com