Learn how to create exposed filters that will let users filter content themselves.
We’ll cover the following:
- How to make filter exposed.
- Change option values in exposed filter.
- Change the submit button on exposed filter form.
- Adjust exposed form style: basic and input required.
The current filters in the filter criteria section are static. They can’t be changed without modifying the view. But you can expose filters to users on the front end, so they can change the filter when using the view. Let me show you an example. Click on content in the admin toolbar. And this page is powered by views and these form elements right here, these are exposed filters. We can use these filters to filter the content by title. So, if I enter in this keyword into title, it’ll return all content with that keyword in the title. Then from the content drop down, we can filter just article content type, and then from published status, we can filter the content even further and display published or just unpublished content. And then from language, we can filter using a specific language. And if we want to reset the filter altogether, we can just click on reset.
Let’s jump back into our view and make the published filter an exposed filter. To do that, just click on published and then check exposed this filter to visitors to allow them to change it. Then click on apply and if we scroll down to the previous section, we now see this exposed filter, which displays published content by default. And if we change it to no and then click on apply, this should display unpublished content. But we don’t have any unpublished content. So, let’s change it back to yes and let’s open up this article and unpublish it.
Let’s close this tab and let’s update the preview. And if we select no from the dropdown and click on apply, we can see our one unpublished content. So, now users will be able to view published or unpublished content, it is their choice, and that’s the benefit of using exposed filters. Let’s scroll back up to the filter criteria section and click on the published filter and from filter type to expose, select grouped filters. This will allow us to change the dropdown options. So, instead of having just yes or no as the two options, we can change it to something more useful, such as published or unpublished. Now to do that, make sure you select grouped filters and then scroll down. And it may not be obvious, but make sure you scroll down. And then in grouping one, add in the first option, which would be published and the value should be yes, and make sure the operator is set to is equal to. And then from grouping two, adding unpublished and then from value select, no, and let’s remove the grouping three and then click on apply.
And if we scroll down, click on update preview, and if we scroll further down, we have this any option. This will display published and unpublished content. But if we select published and click on apply, it’ll only display published content of course. And then if we select unpublished, it’ll only display unpublished content. So, if you want to change the options in the dropdown, change the filter to a grouped filter, and then simply change the labels. Now, another thing you can do is change the form from a dropdown, which is a select list to a radio button. Now to do that, scroll back up and click on published and from widget type select radios, and then click on apply. And if we scroll down, we can now see our three options, any published or unpublished as radio buttons. And finally, if you want to remove the any option, so that users have to select published or unpublished, then scroll back up, click on the published filter, and then uncheck optional. Then click on apply.
And if we scroll down, you can see that the any option is no longer there. Now one request I often get is can the label on this apply button be changed? Because when you think about it, the word apply doesn’t really mean anything. And the answer is yes, you can change the label in this button. Now to do that, scroll back up, click on advanced, and then from the exposed form section click on settings on the exposed form style row. And then from submit button text, just change it to whatever you want. So, often I change it to find or search. So, let me change it to find and then click on apply. And if we scroll down, we can see that the button now has been changed. Let’s give this view a proper test. Scroll up and click on save, and let’s open up a new tab and let’s go to latest articles.
And at this point, our view is kind of broken because no content is being displayed. And the reason for that is because we haven’t set a default value on the published filter. As you can see, nothing is selected, published or unpublished. But if I select published and click on find, we can see all of the content. So, let’s fix that up now. Let’s edit the view and we can do that by hovering over the view and clicking on edit view. Then click on published, scroll down, and select grouping one. If you want to show published content by default or if you want to display unpublished, then select grouping two. But for this example, I want to show published content. Then click on apply and then click on save. And now if we refresh, we can see all the published content because it is the default option for the published filter.
Now, while we are here, let’s remove this latest article’s block view, so it’s not displayed on this page. So, click on the cog wheel, then configure block, and in pages entering latest articles, and then select hide for the listed pages. This means the block will be hidden just on the latest articles page. Now an exposed form has two style options, basic and input required. Basic is what we are using right now. It simply displays the filter and the content at the same time. But if we were to change it to import required, that means users will have to click on find, to show the content. So, if we were to come to this page, you won’t see any content until you click on find, hence the name import required. So, let’s change this filter now to use the import required form style. So, let’s edit the view, then click on advanced, and on the exposed form style row, click on basic and then select import required, then apply.
And then from text on demand, which is shown to the user when they go to the page, let’s change apply to find because our submit button says, find. Then click on apply, click on save, and now when we go back to latest articles, we can’t see any content because we first have to click on the exposed filter. Now in all of my years of building Drupal sites, I think I’ve only ever used this option once. But it’s there if you need it. Let’s go back and edit the view and let’s change it back to basic. And while we are here, let’s add in the title as an exposed filter, click on add in the filter criteria section, search for title, then click on apply, then check expose this filter to visitors. And from the operator drop down, make sure you change it to contains, then click on apply.
And if we scroll down, we can see the title exposed filter but let’s move it, so that title is before published. To do that, scroll back up to the filter criteria section, click on the dropdown arrow, and click on rearrange and then move title above published. Then if we scroll back down, we can see titled first and then published. Let’s save the view and if we enter in a keyword into title, it’ll show us all published articles with that keyword in the title.