Purchase our premium subscription and get access to HD videos and our support forum.

Using Simple Hierarchical Select Module in Drupal 7

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 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.

Fig 1.0

3. From the Tags edit page, click on the "Widget type" tab in the top right corner.

Fig 1.1

4. Select "Simple hierarchical select" from the "Widget type" drop-down and click on the Continue button.

Fig 1.2

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.

Fig 1.3

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".

Taxonomy Terms

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.

Fig 1.4

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.

Fig 1.5

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.

Fig 1.6

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.

Fig 1.7

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.

Fig 1.8

Views Integration

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.

Fig 1.9

If you have any questions, please leave a comment.

Tags: 

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Stefan on

Thank Ivan!
I've linked this great tutorial on the project page of Simple hierarchical select.

ivan's picture

Submitted by ivan on

Cool thanks.

Submitted by Steven on

I find it quite useful also for the menu system. Especially if you have a deep menu hierarchy, much better than a normal confusing select field.

Submitted by David Picciuto on

I've been looking for something like this forever!

Submitted by gangadhara u on

I am trying to use hierchial select in views but it is displaying all categories and subcategories in same dropdown i want subcategories to be displayed after selecting the categories

ivan's picture

Submitted by ivan on

Does the same hierarchical list work on the node form? Make sure you select the "Content: Has taxonomy terms (with depth; Simple hierarchical select)" filter.

Submitted by Anonymous on

I was so relieved to find this module for Drupal 7. Of course, after taking a moment to be overjoyed, I got right down to nuts and bolts issues. Is it possible to resolve the unclean urls resulting from the exposed shs filters in Views? An example of one of my results is: home.com/category?shs_term_node_tid_depth=503 I would much prefer to display the selected terms in the url. Thank you for the tutorial.

ivan's picture

Submitted by ivan on

This is more related to Views (filters) and not SHS module. In Views you should be able to change the "shs_term_node_tid_depth" to something else. If you don't want "shs_term_node_tid_depth=503" to be displayed in the URL, you'll have to search for a module that cleans up the filter URLs.

Submitted by Anonymous on

Thank you for your reply. Yes, when I edit the filter in my View, "Filter identifier" can be specified after clicking on "More." (Following Administrative title.) At least I can get rid of "shs_term_node_tid_depth" that way, which leaves only the leading "?" and the "=503" term id. Much better, if not perfect.
Thanks!

Submitted by naddoo on

I am using drupal 7 with simple hierarchical select and better exposed filters and it works fine. Now I want to change the display of exposed filter from "Default select list" to "Links" so that I can see all my taxonomies as links without dropodown box. In the BEF Settings of the exposed filters I can choose to display as links, but at the filter no taxonomies are displayed. Can you help me?

thanks in advance

ivan's picture

Submitted by ivan on

I haven't used SHS this way. But it seems to me that the module doesn't support an exposed filter as "Links".

Submitted by Michel on

Hello and thank you for this tutorial.
I encounter a problem with the taxonomy when what is translated into different languages​​.
When the user changes language on the site, shs does not use the new language taxonomy taxonomy but uses the default language of the site.
Can you help me ....

ivan's picture

Submitted by ivan on

Sorry I can't help you, I have never worked on a multilingual Drupal website

Submitted by Michel on

thank you

Submitted by Mirkozzo on

is there a way to publish the path in the node of the taxonomy father and son?

example: Drupal>version 8.x

ivan's picture

Submitted by ivan on

Just select the "Simple hierarchy" formatter from the "manage display" section.

Submitted by Mirkozzo on

how can you change the delay of Hierarchical's dropdown menù ?

ivan's picture

Submitted by ivan on

As far as I'm aware, the delay is not configurable. If you do want to change it, I would look at the shs.js file.

Submitted by Mirkozzo on

thanks for the reply.
unfortunately I do not know javascript, could you tell me where to intervene in the script?

ivan's picture

Submitted by ivan on

I don't know where in the code, you'll have to research that.

Submitted by paolo on

Hi Ivan, thank you for your tutorial. I tryed to use HS but now i'm going to use SHS. Can you please just anticipate me if is possible ( with Drupal 7) :
- use SHS with a three level hierarchical taxonomy term
- use in a view more SHS exposed filters based on different taxonomy terms
- enable user to choose not only the deepest level of the hierarchy but also the intermediary levels

Thank you in advance
Paolo

Submitted by Alex on

Hi Ivan! at first - thank you for this module. it's very useful! ,
but i have a little problem - when choose child term in node (by shs) - after save node - "node" doesn't saving in parent term...- only in child... so it's difficult to understand how to show parent term in views page... and also how to show node in parent taxonomy term page. do you have any solution for this problem?

Thank you in advance,
Alex

ivan's picture

Submitted by ivan on

This is how the taxonomy system works. When you assign a term to a node, you are simply assigning the selected term child or parent.

What I recommend is create a custom view which overrides the "taxonomy/term/tid" page and play around with the contextual filter so that the content attached to the parent terms are displayed.

Submitted by Alex on

Thank you for answer. (Certainly it's my problem - you already make a Great work.. - but may be you answer) the problems:

1. When users add new node - it will be better for user to add taxonomy term in "one line" (as usual hierarh select) - now he can do it (in shs) in two lines "first line" -> parent term, then "second line" parent term again -> then child therm - to save in two levels of taxonomy (unfortunately most part of users don't like to read my comments how add info in node) - to "save" two terms.
(* autocompilte and usual hierarh select doesn't work for my tasks - you module is More better! because users can easy add new parent and child terms if they are not in dictionary, and because in shs it's possible easy to add many "lines" like parent->child,,, parent->child...)

as an example what i want to do (when users add new node ):
node (for example "apples") - user add node:

russian apples (parent) -> "name of sort 1" (child)
russian apples (parent) -> "name of sort 2" (child)
german apples (parent) -> "name of sort 2" (child)

... it's easy for user to edit and add node - now in shs it's possible just:
russian apples (parent)
russian apples (parent) again, then ->"name of sort 1" (child)....

2. Second problem (because first problem)
for an example user want to see parent term -(russian apples) - he can't see in parent term "name of sort 1" (child term) if in node doesn't saves two levels, also i have many views with filters, many static information with count nodes in parent and child terms...so it will be the best for me to save in parent and child terms at ones in shs...

Sorry for so much text...

so question is - can you help? where to see in your module to edit to solve my problem... of cause i program by myself.

Thank you for your answer.
Alex

ivan's picture

Submitted by ivan on

Sorry, I did not write this module so I don't have any experience with the code.

If I understand correctly, you want the parent term attached to the node as well as the child term. Look at using Rules (http://drupal.org/project/rules) or write some custom code when a node is saved.

Submitted by Neil on

Hi Ivan - having trouble selecting parent terms. Only seems to allow selections from deepest level terms irrespective of whether or not the Force selection of deepest level option is checked or not. Have you managed to get this working?

regards

Neil

ivan's picture

Submitted by ivan on

Try clearing site cache and make sure the "Force selection of deepest level" option is unchecked.

Submitted by vishal on

Hi Ivan,

I made taxonomy like this, country1
-state1
-state2
--region1
--region2
country2
-state1
--region1
--region2
-state2

But, i want to show it in front end in dropdown manner. for example, in 1st dropdown country1, country2, country3.. should be shown.
according to 1st dropdown the second dropdown of states of that country should be appear.
same as according to 2nd dropdown the 3rd dropdown of regions of that states should be appear.
how can i do this? I have lots of confusion regarding this.

how can i show it in front end?
please help.

Regards,

Vishal

ivan's picture

Submitted by ivan on

Where on the "front end" will you show it? As part of a views listing page? Also, are country1, country2, etc.. are they separate vocabularies?

Submitted by vishal on

Hi Ivan,

Simply i want to display 3 dropdowns which are dependent of each other using any thing means using view or using other things.
i don't know how to do it?
and country 1, country 2, etc.. are in same vocabulary. and country1, country2,..etc are perent terms and states are the child terms of country and regions are the child terms of states means regions are the grand child of country in same vocabulary. can u tell me the flow of how can i generate 3 level dropdowns which are dependent of each other using view or anything?

Submitted by mgomma on

Hi Ivan i used the module to create an exposed filter but i faced a problem that after submitting the filter it redirect to the homepage with no data not the term view page that has the right nodes and so the filter work on that view result

so i need help to avoid that issue ?

ivan's picture

Submitted by ivan on

Are you displaying the view using Panels by any chance? Sometimes exposed filters and Panels don't work well together and you get redirected to the homepage.

Submitted by Denis on

Hi Ivan,
I just wanted to ask few questions:

#1 - I need do display 2 dependent drop-downs: "state" and "city". When "state" is chosen, drop-down "city" becomes visible. Is there any way that "city" would be visible all the time, even "state" isn't chosen?

#2 - Is it possible to add text label for the child drop-downs, in my case that would be "city", and if so, how to do it?

Thanks in advance

ivan's picture

Submitted by ivan on

In regards to your first question, you can't. That is how the module works. First you select a parent then a child term.

And I don't understand your 2nd question. Which text labels?

Submitted by Don on

download conditional fields module, that is your best option...am using it on the site am developing now...its pretty easy to figure out...i recommend a youtube video...cos i used it too...This one is more like a menu that display child item....

Thanks Ivan...am using this for my site now...though am using it for taxonomy only...just had a delay problem...it shows up slowly

Submitted by Miguel on

Hello Ivan and thank you for this tutorial.
Is there a way to create filter shs for user view?
Thanks in advance.

Submitted by Miguel on

Thank you Ivan. Excuse me for my English

Add new view
Type: User
Add Filter criteria:
¿"Content: Has taxonomy terms (with depth; Simple hierarchical select)" ?

… in Spanish:
Quiero crear una vista de usuarios (View Tipe: User) con un filtro shs, pero al seleccionar el filtro no aparece “Content: Has taxonomy terms (with depth; Simple hierarchical select)”

¿Se puede crear un filtro SHS en una vista “Tipe: User”, o solamente se puede utilizar en vistas “Type: Content”

ivan's picture

Submitted by ivan on

The SHS module should work on a listing page of user entities. But make sure you have a taxonomy term reference field on the user entity.

Submitted by Oliver on

Unfortunaly i can`t get it to work with the a user view. Could you be a little more specific about the settings ? I have a multi level taxonomy called regions. I want to use SHS on a user view.
Thx and cheers for the great post!

Submitted by Oliver on

Thx for the answer. So the additional handler is now in the handler folder. Do i have to add a entity reference field in the user ? Or do i have to create a new View on Taxonomy Terms and reference to the user somehow? Sorry, but i still do not understand how to make things work. I have my view of users. What to do now ?

ivan's picture

Submitted by ivan on

Try the following steps on a test Drupal website. You'll need to know how to create content types, fields and a basic Views page.

- Create a content type.
- Add an entity reference field that references the user entity.
- Then, create a Views page and add the entity reference field as a filter. When you configure the filter there should be a "Output filter as hierarchical select" checkbox.

Try the above steps, it's all I can offer as a comment. A proper step-by-step guide will be the size of a tutorial.

Submitted by dharper on

Hi Ivan, Great module - Thanks!

Only thing on my 'wish list' is an option to have views filter on parent taxonomy term. It's kind of the way you have the numbering working, but views only looks to the child term.

Meaning if I had
Fruit(5)
-apple(1)
-ornage(1)
-pear(3)
Veggies (5) .....

and I wanted to sort on Fruit to get a taxonomy list of all the fruit.

Thanks again for a great module!

Dan

ivan's picture

Submitted by ivan on

Hi Dan,

First of all, I didn't write this module. You can thank the module maintainers for this great module. :)

Sorry, I do not understand the problem. :( The parent terms are shown in the exposed filter.

Also, the numbers in the tutorial image is just part of the term name, that's it.

Pages