---
title: "Creating a Drupal view component with configurable filters"
date: "2026-04-02T06:59:04+00:00"
summary:
image:
type: "article"
url: "/drupal-starter-kits/add-ons/site-studio/help/96926-creating-drupal-view-component-configurable-filters"
id: "9b1c98a7-b006-4431-9c5f-bc1ec40717ea"
---

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](/drupal-starter-kits/add-ons/site-studio/how-create-custom-element "How to create a custom element").

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:
    
        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:
    
        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.
    
        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:
    
        <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.