Cascading select using views

Introduction

This how-to describes by example how to provide a cascading select (e.g. dropdowns)
using the Views module
with Attachment displays. Like this, we can use the whole power of Views to select and display the items of a given level.

This how-to is based on J. Ayen Green's
book "Drupal 6 Attachment Views". Thanks!

This how-to serves as a proof of concept, it needs fine-tuning to be production-ready.

What

We use an incident support agent example (with dropdowns):

1. User selects an incident (problem) category
2. User selects a subcategory (screenshot)
3. User selects a subcategory
4. Possible solutions and a form are displayed for a given subcategory (screenshot)

Note: solutions and/or a form can be displayed at any level.

How

1. Add forms using the Webform module
2. Add content types "Incident solution"
3. Add content types "Incident item"
4. Create an incident tree using the References module
5. Add a view "incident" using the Views module
   • Add a Page display for the 1st level
   • Add an Attachment display for the 2nd level
   • Add an Attachment display for the 3rd level
   • Modify the templates
   • Add an Attachment display for the solutions
   • Add an Attachment display for the form

Requirements

• Views module
• References module
• Node Reference URL Widget module (optional)
• Webform module
• Webform validation module (optional)
• CAPTCHA module (optional)
• Note: you are expected to have a working knowledge of the above modules.

Instructions

(All screenshots as a gallery.)

1. Add forms using the Webform module (screenshot)
2. Add content types "Incident solution" (screenshot)
3. Add content types "Incident item" (screenshot)
4. Create an incident tree with incident items (nodes of type "Incident item") using the node reference relationship "Parent" (the field type is provided by the References module) (screenshot)
   • ROOT
     • Cat 1
       • Subcat 1.1
         • Subsubcat 1.1.1
         • Subsubcat 1.1.2
       • Subcat 1.2
       • Subcat 1.3
       • Subcat 1.4
       • Subcat 1.5
     • Cat 2
       • Subcat 2.1
     • Cat 3
       • Subcat 3.1
     • Cat 4
       • Subcat 4.1
       • Subcat 4.2
5. Add a view "incident" using the Views module (screenshot)
   • Configure view defaults (used for the 3 levels) (screenshot)
   • Add and configure a Page display for the 1st level (screenshot)
     • For Fields configuration see 3rd level.
   • Add and configure an Attachment display for the 2nd level (screenshot)
     • For Relationships, Fields, and Arguments configuration see 3rd level.
   • Add and configure an Attachment display for the 3rd level (screenshot)
     • We use the following URL structure: incidents/<current item id>/<level 1 id>/<level 2 id>/<level 3 id>
     • Relationships
       • parent (screenshot)
       • grandparent (screenshot)
     • Fields
       • grandparent id (screenshot)
       • parent id (screenshot)
       • node id (screenshot)
       • node title (screenshot)
     • Arguments
       • Global: Null (screenshot)
       • Global: Null (screenshot)
       • Node id (of parent) incidents/<current item id>/<level 1 id>/<strong><level 2 id></strong>/<level 3 id> (screenshot)
     • Result before using modified templates: screenshot
   • Modify the templates (screenshot)
     • Add templates to your theme's templates folder
       • Note: For your displays' fields set all "* HTML element" to "- None -" and exclude given fields from the display.
       • Note: The example files are intended for a multilingual site, adjust the templates if you use a single language.
       • views-view-unformatted--incident--level-3.tpl.php
         

         <?php 
           global $base_url;
           global $language;
           $uri_wo_lingo = substr(request_uri(),4);
           /* TODO: treat case when no language given */
         ?>
         <?php if (!empty($title)): ?>
           <h3><?php print $title; ?></h3>
         <?php endif; ?>
         <form class="views-dropdown-form">
         <select onchange="window.location='<?php print $base_url . '/' . $language->language; ?>/'+this.value">
         <option value="<?php print $uri_wo_lingo; ?>"><?php print t('Select...'); ?></option>
         <?php foreach ($rows as $id => $row): ?>
         <?php print $row; ?>
         <?php endforeach; ?>
         </select>
         </form>
         <noscript>JavaScript is disabled, please enable it to use functionality!</noscript>
         			  

       • views-view-fields--incident--level-3.tpl.php
         

         <?php 
         $level = 3; // adjust this to match the template
         $view_path = 'incidents/';
         $uri_relevant_part = strrev(stristr(strrev(request_uri()),strrev($view_path),TRUE)); // remove unnecessary parts from URI
         $link_relevant_part = strrev(stristr(strrev($fields['nid']->content),strrev($view_path),TRUE)); // remove unnecessary parts from link
         $uri_array = explode('/',$uri_relevant_part);
         $link_array = explode('/',$link_relevant_part);
         ?>
         <option value="<?php print $fields['nid']->content; ?>"<?php if (isset($uri_array[$level]) && ($link_array[$level] == $uri_array[$level])) print ' selected="true"'; ?>>
         <?php print $fields['title']->content; ?>
         </option>
         			  

   • Add and configure an Attachment display for the solutions (screenshot)
     • Relationships
       • solutions (screenshot)
     • Fields
       • node title (screenshot)
     • Arguments
       • Node id (of incident current item) incidents/<strong><current item id></strong>/<level 1 id>/<level 2 id>/<level 3 id> (screenshot)
   • Add and configure an Attachment display for the form (screenshot)
     • Relationships
       • form (screenshot)
     • Fields
       • webform form body (screenshot)
     • Arguments
       • Node id (of incident current item) incidents/<strong><current item id></strong>/<level 1 id>/<level 2 id>/<level 3 id> (screenshot)
6. Try it :-)
   • Select (screenshot)
   • Result (screenshot)