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.

About The Author

78 thoughts on “Using Simple Hierarchical Select Module in Drupal 7”

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

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

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

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

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

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

    1. I haven’t used SHS this way. But it seems to me that the module doesn’t support an exposed filter as “Links”.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  15. Ivan,

    Bonzer tutorial!

    I have been working on a very large vocabulary using HS. However, I am running into a lot of problems and want to shift to SHS. Will my vocabulary survive if I make the change?

    Thanks,

    Al

    1. The HS and SHS module never change vocabularies or terms within the vocabularies. You won’t have to change vocabularies or terms to use the other module.

      You can easily switch between modules. 🙂

  16. ‘-BMW
    –1er
    —114

    my request is that how can i make it obligatory to choose -BMW and –1er but the —114 is optional.
    besides if i tell HS to select from deepest level, it removes the labels that i want, and it automatically select the first car, so anyone could simply press next and continue.

  17. Is it possible to use something like that as a search block that user can filter content based on hierarchical taxonomy? How can we do that?

    Thx

  18. Hi any idey why the views filter throws no result on taxonomy field inside field colection.
    child filtering works ok just parent term.
    Thank you

    1. After a quick google search, I found this issue “https://drupal.org/node/1968308”. It looks like the module does not support field collections yet.

  19. Hi Ivan,
    Thank you so much for the awesome and thorough tutorials! They’ve saved me many times and I appreciate you taking the time to do this. It’s made learning Drupal a lot easier. Looking forward to learning more from you!

    Thanks again

  20. hi Ivan
    I’m wondering if your module can help me in my view of files. I have an exposed filter of ‘taxonomy’ term which presents as a very long select box – very hard to use.
    I have deployed SHS with great success on a view of a content type but for the view of files (file entities do have a taxonomy reference field), there are no ‘content: ‘ options or “Output filter as hierarchical select” possibility.
    We have 400 editors on our site who would much appreciate any help you could offer me.
    thanks
    Paul

  21. thanks for your swift reply.
    I suspect the same – that it isn’t built for other entity types such as file. I’ll ask on the SHS issues queue.
    thanks, Paul

  22. checked on the project site and the issue is already raised – seems SHS does not currently support other entity types.
    Paul

  23. I want you on my views of parents choosing vocabulary that a child’s vocabulary in the select list to select multi select
    I have a chak box.
    With this module, I can do this?
    How did it right away ?
    If this module does not do it after you’ve introduced a module

  24. Is SHS compatible with Profile2? Or does it only work with nodes? When selecting terms via the widget (a) the parent terms does not saved (and I do not have the force deepest level enabled) and (b) the values do not get loaded into the widget on the /user/[uid]/edit/[profile] page.

  25. First off thank you for a great tutorial!

    I’ve got the module set up and working fine. However I’m looking to import items using Feeds but I can only select the name of the field and not specifiy parent or children terms. Any ideas?

    Thanks

  26. I’ve implemented SHS on a taxonomy term “lesson type” for a TEFL resource in Japan, but have an issue where Google Pagespeed Insights is giving me this notice:

    Leverage browser caching for the following cacheable resources:
    https://www.kobejet.com/shs-term-data/shs-field-lesson-topics/lesson_category/0 (24 hours)

    which, when followed, shows:

    [{“tid”:”847″,”name”:”ES”,”description__value”:null,”langcode”:”en”,”hasChildren”:true},{“tid”:”628″,”name”:”GENERAL”,”description__value”:null,”langcode”:”en”,”hasChildren”:true}…

    Which turns out to be the top-level terms in the “lesson category” taxonomy. E.g.;
    ES
    – Actions
    – Adjectives
    – Alphabet & Phonics
    – Animals
    General
    – 3-4 person conversation
    – ALT self intro
    – International cultural understanding
    – KICP ideas

    Any ideas on what’s causing a “24 hours” only expiry time to be set for this or a remedy?

  27. I need to build a D7 view that has two filters. Currently the first filter is a ‘category’ (taxonomy term) and second filter is a ‘subcategory’ (taxonomy term) from separate vocabularies.
    I need to have the ‘subcategory’ filter tied to the ‘category’ filter. For example, when I choose ‘Category A’ in the first filter and it has 6 Subcategories, those 6 subcategories will display in the dropdown of the second filter. When I choose ‘Category B’ in the first filter and it has 15 Subcategories, those 15 subcategories will display in the dropdown of the second filter.
    Can this functionality be exposed to site visitors in the Views filters?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top