When displaying Drupal content through Views you’d sometimes like the user to be able to dynamically filter the content from a list of links. Ajax is already part of Drupal 8 Views. This is how you change the default <select> list into themable links.
In a previous post I’ve written about how you can do this same thing in Drupal 7. This time around we are going to explore how it can be done in Drupal 8, which is currently in beta (8.0.0-beta15). The nice thing about Drupal 8 is that the Views module which we are going to use is now part of Drupal core, which means you can get a lot more done “out of the box” without installing any contrib-modules.
I’m sure there are other methods to achieve the same result, but in my experience, a leaner solution, with a relatively simple override is usually the quickest and most reliable way to go. The alternative of adding one or more contrib-modules to a site for a small thing such as this means that those modules have to work (in themselves and with each other) and be without bugs, patches, dead-end issue queues and so on. That’s not always the case. You could wind up spending hours trying to solve a tiny problem only to find in the end that it can’t be done with the current state of the modules.
We’re assuming that you’ve already created articles and tagged them. In this clean install of Drupal 8 beta I created three articles and tagged them alfa, beta and gamma. Next we need to create a View. In the Drupal 8 admin section you choose Structure -> Views and then click the blue button that says + Add new view.
Choose Show Content of type Article. Check Create a page for this example. Display format should be Unformatted list of fields. Remove (empty) the default number of items to display and uncheck Use a pager. When you’re done click Save and edit.
Next we need to create the exposed filter which will let the user click and sort the content.
The Exposed Filter
Add a filter criteria to your view by clicking the add button in Filter Criteria section of the views interface.
At this point we have our View and our Exposed Filter, but we still need to activate AJAX to make the view filter the content dynamically. In the Advanced section of your View configuration screen you will find what you need. Per default these settings are collapsed. Open it by clicking the Advanced section label.
Now change the setting for Use AJAX. This should simply be switched from No to Yes.
To make the effect of the filtering more visually clear while developing I’ve added the fields image and tags to the fields section (and removed title). I also changed the Sort Criteria to Tags (desc) to have the tags display in alphabetical order. Simply because it looks more orderly to me.
So up to this point we’ve created our content, our view, added the filter criteria and activated AJAX in the view. So we have the basic “stuff” we need:
- we can display the content of our choice, with the presentation of our choice (teaser, fields or something else)
- we can filter the content by the terms the editor has tagged it with
- the content gets refreshed with AJAX without reloading the entire document
Now all we need is to tweak the presentation to suit our taste – or the taste of the designer who handed us their fancy design.
The Custom Module
To be able to use hook_form_alter and do our magic we need to create a custom module. Start by creating a new folder called custom in the modules folder. The purpose of this is to set custom made modules apart from contributed modules (downloaded from Drupal.org). Now in the custom folder create your new custom module folder. In this example we are naming the module popolo_custom. You can name it anything you want. But remember to replace all occurrences of popolo_custom in the following code examples with the name you’ve chosen.
Now begin by declaring your module with a yml-file: popolo_custom.info.yml
Next we need to find out the form id of the exposed filter we’re trying to manipulate. To to this inspect the form in your browser.
Now let’s create the popolo_custom.module file. And paste the following code into it. Make sure the id on row 8 matches the id we just inspected:
Thanks to Earl Fong for explaining how this works in this post. Now we create the file popolo_custom.js in a new subfolder named js:
Notice the id of our view being used in the above code.
Finally to polish the look of the view we create popolo_custom.css in a new subfolder named css. This css hides the select list and apply button. The additional styling would normally go into your sites theme.
Next activate the module in Extend (admin/modules), empty the sites cache and then load the page. If everything works your page should now look something like this:
That’s it – you’re done!