Creating a Drupal view component with configurable filters

Introduction

Site Studio helps you to easily create a component that includes a Drupal view block so that page builders can quickly and easily drag and drop a view onto a layout. However, standard components do not include configurable filters to display specific content in the view.

This article provides information about how to create a custom element that allows you to render a view with contextual filters and expose them to the component form as configurable options.

Prerequisites

• Install and configure Acquia Site Studio
• Set up taxonomy vocabulary with a few terms
• Set up content type with a reference field to the taxonomy vocabulary
• Set up content of the content type with a taxonomy term selected
• Configure a Drupal view that lists your content type with a contextual filter of the field that references terms in your vocabulary

Creating a custom element

Create a custom element by following the instruction in this user guide.

1. In the custom element plugin within the get fields function, define a field to hold the taxonomy term ID.

   This can be a type of text field. In the example we have named the field “News type”.

   You can also define other configurable options to pass to the view. For example, number of items to display per page:

   copy

   public function getFields() {
    return [
      'news_type' => [
        'title' => 'News Type',
        'type' => 'textfield',
        'required' => TRUE,
        'validationMessage' => 'This field is required.',
      ],
      'number_per_page' => [
        'title' => 'Number items per page',
        'type' => 'textfield',
        'required' => TRUE,
        'validationMessage' => 'This field is required.',
      ],
    ];
   }

2. In the custom element plugin, update the render function to something like the following code example:

   copy

   public function render($element_settings, $element_markup, $element_class, $element_context = []) {
      $view_name = news; // change as needed
      $display = news_by_type; // change as needed
   
      $view = Views::getView($view_name);
      $view->setDisplay($display);
       // Get the tid that was passed from the entity browser and pass it as a views argument.
       $uuid = $element_settings['news_type']['entity']['#entityId'];
       $entity = \Drupal::service('entity.repository')->loadEntityByUuid('taxonomy_term', $uuid);
       $id = $entity->id();
       $view->setArguments([$id]);
      // Get the number of pages that was passed from the field and pass it as a views argument.
      $view->setItemsPerPage($element_settings['number_per_page']);
      $view->preExecute();
   
      // Render the element.
      return [     
         // update "filterable_block" to your module machine name
        '#theme' => 'filterable_block_template',
        '#elementSettings' => $element_settings,
        '#elementMarkup' => $element_markup,
        '#elementClass' => $element_class,
        '#filteredData' => $view->buildRenderable(),
      ];
    }

   In this example, you must update the view_name and display variables based on the machine name of the view you want to render.

3. In your .module file, add the filteredData variable in the return array before your hook_theme variables.

   copy

   function filterable_block_theme($existing, $type, $theme, $path) {
    return [
      'filterable_block_template' => [
        'variables' => [
          'elementSettings' => NULL,
          'elementMarkup' => NULL,
          'elementContext' => NULL,
          'elementClass' => NULL,
          'filteredData' => NULL,
        ],
        'render element' => 'children',
      ],
    ];
   }

   Update any instances of filterable_block to the machine name of your custom element module.

4. Edit your twig template and add the theme variable that you set to render out the view. In this example, filteredData is used:

   copy

   <div class="" >
      
   </div>

Enabling the custom element module

1. Enable your custom element module either through the UI or using Drush.
2. Verify that your custom element is displayed in the sidebar browser in Custom elements.

Creating a component

Create a component that uses the custom element that you have created.

1. Navigate to Site Studio > Components > Add Component.
2. Add your custom element to the layout canvas.
3. Add an Entity browser element to the component form, set this to typeahead, and save it.
4. Get the form token from the Entity browser form field and tokenize to the News type field created earlier in the custom element.
5. Add an input element to the component form and set it to type of number.
6. Get the form token from the Input form field and tokenize to the Number of items to show field created earlier in the custom element.
7. Save the component
8. Add your component to a node layout canvas and configure it.