Last updated April 8, 2011. Created by amalaer on April 8, 2011.
Log in to edit this page.

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 incidents support agent example (with dropdowns):

  1. User selects an incident (problem) category
  2. User selects a subcategory (screenshot)
  3. User selects a subsubcategory
  4. Possible solutions and a form are displayed for a given subsubcategory (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

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)
    • 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 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
      • Fields
      • 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
      • Fields
      • 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 :-)

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.