UPDATE: This video is now part of the “Enhanced Field Widgets in Drupal 7” course on WebWash Courses.
The Simple hierarchical select module or SHS for short implements a widget element that allows users to drill down through a hierarchical list of terms within a vocabulary.
The module implements a custom formatter, widget and Views filter. You can create a views listing page that allows users to filter content using SHS. The module only works with vocabulary terms so you’ll need to have Taxonomy enabled to use this module.
Modules
- Simple hierarchical select (7.x-1.6)
- Views
drush dl shs views ctools
Transcript
The Simple hierarchical select module or SHS for short implements a widget element that allows users to drill down through a hierarchical list of terms within a vocabulary.
The module implements a custom formatter, widget and Views filter. You can create a views listing page that allows users to filter content using SHS. The module only works with vocabulary terms so you’ll need to have Taxonomy enabled to use this module.
Getting Started
Download and install Simple hierarchical select and make sure you have the core Taxonomy module enabled. If you installed Drupal using the standard installation profile, then Taxonomy will be enabled.
Throughout this video, we’ll use the Tags vocabulary and Article content type that comes with the standard installation profile.
Configure Simple Hierarchical Select Widget
The first piece of functionality we’ll look at is the widget. Let’s now setup the custom widget on the Article content type.
Go to Structure, then Content types and click on “Manage fields”. Click on “edit” on the Tags field. From the Tags edit page, click on the “Widget type” tab in the top right corner.
From the “Widget type” drop-down, select “Simple hierarchical select” and click on Continue. All we have done at this point is change the default widget on the Tags field to use “Simple hierarchical select” as the widget.
Now, go back to the edit page for the Tags field. Scroll down the page, and you should see a “Simple hierarchical select settings” field-set. In this field-set, you can configure a few options.
Check the “Allow creating new terms” and “Allow creating new levels” checkboxes. This will allow a user to create new terms directly from the node edit page, but make sure you have setup the vocabulary permissions properly.
But before we move on, let’s talk about the other options.
The “Display number of nodes” options displays the number of nodes attached to a specific term. But be careful, if you have a lot of nodes and terms you may have some performance issues.
And finally, the “Force selection of deepest level” option simply forces the user to select the deepest term.
Scroll to the bottom and click on “Save settings”.
Before we go on, go to the Tags vocabulary page and add some terms.
If the “Allow creating new terms” option in field settings page isn’t checked or you don’t have any terms, then the widget will not display.
For this video, I have already added in a bunch of terms like the ones below.
Now that everything has been setup, go to Content then “Add content” and Article. You should see the Tags widget as a drop-down. When you select an option, another drop-down will appear to the right.
If you need to add a new term, select the “<add new item>“, enter the term and click the Save link.
Scroll to the bottom and click on Save.
Simple Hierarchical Select Formatter
The module ships with a formatter that displays the parent or hierarchical order of a term.
For example, here we can only see the Version 8.x term. But what if we want to display the parent term, in our case it’ll be Drupal.
Luckily, SHS module comes with a formatter that does exactly that.
Go to Structure, Content types and click on “Manage display”, select “Simple hierarchy” from the Format drop-down list and click on Save.
Click on the cog wheel and check the “Link to term page” and click on Update, and then Save.
Now if we go back to our node page, you should see the parent term.
Views Integration
As stated earlier, the module also offers a filter for Views. Let’s now create a simple Views listing page with the SHS filter. So go to Structure, Views and “add new view”. We’ll call the view, “Article listing”, and we’ll change the Path to “latest”.
Then click on “Continue and edit”. Now we have a basic view, let’s add the SHS filter as an exposed filter.
Click on “Add” and select the “Has taxonomy term with depth” that has “Simple hierarchical select” in the label. Click on “Apply and continue”.
Check the “Expose this filter” checkbox. And change the Label to Tags. Save the filter by clicking on Apply. And save the View. Now if we go to /latest. You should be able to filer the content using the SHS widget.
