Learn how to use the Better Exposed Filters module which will give you more control over your exposed filters.
We’ll cover the following:
- Add a filter for tags.
- How to install the Better Exposed Filters.
- How to add checkboxes to taxonomy term filters.
- How to add single checkboxes.
- How to group exposed filters.
Transcript
Trainer (00:00):
Currently, we can filter this view by title and published status, if the article is published or unpublished. Now let’s add in the ability to filter by tags. Because if you remember, we do have a tags field on the articles. Now, to add the tags filter, scroll up and edit the view, and then scroll down to filter criteria and click on add, and search for tags and select the first one. Then click on apply. Make sure you select tags from vocabulary. Normally you will have a number of vocabularies, but on this site we just have tags.
Trainer (00:39):
And then from selection type, you can select auto complete or dropdown. In our example, select dropdown, and then click on apply and continue. Let’s make the filter exposed, and in label, let’s remove the field underscore tags and just make the label tags and make sure the operator is set to is one off and then click on apply. And then if we scroll down, we can see our tags exposed filter, and we can go ahead and now filter by tags.
Trainer (01:13):
Now, another thing we can do is limit which tags or taxonomy terms appear in this dropdown. So let’s configure it so that it won’t show any of the tag one to five. So that is these ones, tag one, two, three, four, and five. Because normally the tags’ vocabulary will have a lot of tags, and sometimes you may want to limit what is available for users to filter on. So scroll back up and click on the filter. Now, if you want to change the selection type or the vocabulary, click on settings, but if you want to edit the actual filter, just click on the filter and then scroll down and select which terms you want to appear. So select the first few and then the last one.
Trainer (02:02):
And if you scroll down a bit more, make sure you check limit list to selected items. This will make sure that only the selected items appear in the dropdown. Then click on apply. And now we won’t see any of the tag one to five. So this is a good way of just controlling which tags appear in the dropdown. Currently we can only filter by one tag, but if we scroll up and edit our exposed filter and then scroll down, you have this option, allow multiple selections. This will allow us to filter using multiple tags. So make sure it is checked, click on apply. And then if we scroll down, and now we can see that the dropdown box has been changed into a multi-select element.
Trainer (02:53):
And to select multiple tags, all you need to do is press down control or command. So control if you’re on Windows or command if you’re on a Mac, and then select the tags you want to filter by, and then click on find. And now views will filter the articles by the selected tags. Now, I personally do not like this multi-select element because it’s easy to lose what has already been selected. So if I click on, say, react without pressing command or control, I lose the previously selected tags. Now, it’ll be better if we could use check boxes for example, but views doesn’t offer that out of the box.
Trainer (03:32):
Now, luckily for us, there is a module called Better Exposed Filters. Now, this module extends the standard exposed filters and it gives you a lot more options, just like a lot of things in Drupal. You can do a lot in core, but if you install a particular module, you’ll get even more functionality. And Better Exposed Filters allows you to add check boxes, radio buttons, single check boxes. It also allows you to group exposed filters, as well. And I use it on pretty much all of my Drupal sites. So I highly recommend that you download and install the module if you are going to use a lot of exposed filters. Now, one thing to be aware of is that this module does require jQuery UI, which was part of core, but as of Drupal 9, it’s being taken out. So that’s just something to be aware of.
Trainer (04:23):
So let’s start things off by downloading the module. Jump over to your terminal and type in the following composer command, composer require Drupal slash better underscore exposed underscore filters. And here you can see the jQuery UI modules that are required. Luckily, we didn’t have to download them ourselves. Composer handles the dependencies.
Trainer (04:46):
So once we’ve downloaded the module, jump over into Drupal. So let me close this tab. And let’s go to extend and search for views, and you should see Better Exposed Filters. Select it, click on instal, and then it’ll tell us these extra modules need to be installed, which is fine. Click on continue, and then close this tab and let’s refresh, and then go to advanced on the right hand side and click on basic, next to exposed form style. And you should see Better Exposed Filters as an option. If you can’t see it, make sure the module has been installed and then click on apply.
Trainer (05:24):
And here you can see all of the options that we have available. Now, if you scroll down, you’ll see options for each filter. Click on the first title. And then if we scroll down, click on advanced filter options, and let’s add in a placeholder text. So often you would add in search title, for example. So let’s put that in there, and then click on apply. And if we scroll down, we can see our placeholder text. Let’s scroll back up, click on advanced, click on settings and scroll back down and click on the status field set.
Trainer (06:01):
And from the exposed filter widget, you can choose different widgets. So currently we do have … Let’s jump back out. What is the published status? That is a bullion field, which means we have a radio button of published and unpublished. Let’s change this to a single check box. So let’s scroll back up, click on settings, and then click on the status field set and select single on/off check box, and click on apply. And if we scroll down, now we have a single check box, which is just published, which will filter published articles. But then if we want to filter published and unpublished articles, we simply uncheck it and click on find.
Trainer (06:42):
Now, one limitation with this single checkbox is that we cannot search for just unpublished content. Currently it’s searching for published and unpublished. But if we check published, it’ll search just for published, but we cannot search for just unpublished. So there is a bit of limitation in using this check box, because if we uncheck it, click on find, we can still see all our unpublished. And I do know that there is one unpublished article. So we can see all of our published and unpublished content.
Trainer (07:13):
But if we switch it back, so let’s scroll back up to advanced, click on settings, and switch it back to the default and scroll back down, and then we select unpublished, we will see our single unpublished article. So just be aware of that. So in some use cases, a simple radio button is enough.
Trainer (07:37):
Let’s now change tags from this multi-select element to check boxes. So again, scroll back up, click on advanced, click on settings, and click on tags and from the exposed filter widget, select check boxes, radio buttons, and then click on apply. And then if we scroll down, we now have check boxes, which makes it much easier to select tags. Scroll back up, and then let’s save the view. And if we go to the front end, we can see our filters, and here we can see the check boxes for the tags. And then if we select a few and click on find, we will filter by those tags.
Trainer (08:19):
Now, if I scroll up a bit, another thing you can do is group and organise filters using the Better Exposed Filters module. So let’s edit the view and click on advanced and then settings, and then check enable secondary exposed form options. And you can change the label if you like, but I will leave it set to advanced options. And then if we scroll down, let’s add the status, exposed filter, into the secondary option and the tags. And then click on apply, and let’s save the view. And now we have the title filter right up the top, but the status and tags are hidden inside of this advanced options.
Trainer (09:06):
And this is a great way to organise your exposed filters, especially if you do have a lot of them. The Better Exposed Filters module is a powerful module, and I highly recommend that you use it on all of your sites. We have just skimmed the surface on what is available in the module, so I recommend that you download it and have a play with it yourself.