Add Exposed filters in Views in Drupal 9

In order to proceed you should have:
- Drupal installed
- virtual host ready for you
- xampp setup or other web server
- composer installed
- drush installed
- views created

#STEP 1: Exclude current page from results

In previous tutorial we have added an exposed block to all article pages. This block shows the latest 4 items added to the system. We want to exclude the current page from the list in order to avoid doubling of content.

Navigate to Block view and find the CONTEXTUAL FILTERS section. Click on “Add” button.

Search for id and find the ID title in Content Category. Make sure that we are doing this only for “This block (override)

Set a default value for the ID — Content ID from URL

In order to exclude the item from the view we need to click on “MORE” section and then next to “Exclude” checkbox.

Then save the option and save the view.

Issue is fixed.

#STEP 2: Install Better Exposed Filters

https://www.drupal.org/project/better_exposed_filters

composer require drupal/better_exposed_filters

Once this is done, go to admin panel. Extend and find “Better Exposed Filters” module.

Install the module.

We need to install the library manually.

jQuery UI Touch Punch requires the jquery.ui.touch-punch.min.js library. Download it (https://github.com/furf/jquery-ui-touch-punch) and place it in the libraries folder (/libraries)

Create the libraries folder if you are missing it. Download the file and place it in it.

#STEP 3: Alter page view and add expose filters

Navigate to the view page edit.
Click on “Add” button next to FILTER CRITERIA

Search for title

Then on the next screen expose the filter.

We are marking the Operator to be “Contains all words”.

Add second filter related to Authored on.

Save the view.

If we try to access the view now we have two filters and we could play with them. Sadly the date one is not really UX friendly.

#STEP 4: Better UX for exposed filters

Install https://www.drupal.org/project/date_popup

composer require drupal/date_popup

Install the module

Clear cache

drush cr

Our filters are done. We could search based on title and select dates.

VIDEO

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store