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.
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 would be enabled.
Throughout this tutorial, 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.
1. Go to Structure -> Content types (admin/structure/types) and click on the "Manage fields" link within the Article row.
2. Click on the "edit" link for the Tags field.
3. From the Tags edit page, click on the "Widget type" tab in the top right corner.
4. Select "Simple hierarchical select" from the "Widget type" drop-down and click on the Continue button.
5. Once you click on the Continue button, you'll be redirected back to the "Manage fields" page. Now, go back to the edit page for the Tags field.
6. Scroll down the page, and you should see a "Simple hierarchical select settings" field-set. In this field-set, you can configure the SHS widget.
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.
Scroll to the bottom and click on "Save settings".
Go to the Tags vocabulary administration 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 tutorial, I added in a bunch of terms like the ones below.
Simple Hierarchical Select in Action
Now that everything has been setup, go to Content -> "Add content" -> Article (node/add/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>" and enter the term into the text field and click the Save link.
Simple Hierarchical Select Formatter
The module ships with a formatter that displays the hierarchical order of a term. For example, if you select a term only the single term is displayed and the parents terms are not visible.
Here is an image of the standard term formatter.
Go to the "Manage display" page and select "Simple hierarchy" from the Format drop-down list. If you go back to a node page, you should see the parent term.
As stated earlier, the module also offers a filter for Views. Using the filter is pretty easy, just create a Views page and select the "Content: Has taxonomy terms (with depth; Simple hierarchical select)" filter.
If you have any questions, please leave a comment.
Like what you see?
Join our free email list and receive the following:
- Discover our best tutorials in a 6 part series
- Be notified when free content is published
- Receive our monthly newsletter