Having multiple displays displayed simultaneously allows us to use parts of the viewing area for distinct but related content, and, if desired, interactive functionality, much like a desktop application. This enables an enhanced user experience and increased site value.
In this recipe we will have a display that lists available courses; another that lists
departments, which drives the course list; and a third display that provides course details.
This view will also make use of contextual filters. Information about the Course and
Department content types can be found in Appendix B, Bundles.
How to do it...
On the view list page (admin/structure/views): 1. Click the + Add new view link.
2. Enter Departments and courses as the View name.
3. Check the box for Description and enter Interactive course and department listing in the textbox.
4. In the Show select boxes, change sorted by to Title.
5. On the Display format line of the Create a page section, change teasers to full
6. Change Items to display to 1, and click the Continue & edit button. 7. Click the + Add button and select Attachment.
8. Click the Attachment link next to Display name, change the name to Department list, and click the Apply button.
9. Click the + Add button and select Attachment.
10. Click the Attachment 2 link next to Display name:, change the name to Course list
and click the Apply button.
Create the Course list attachment with the following steps:
1. Click the Content link next to Show in the Format section, select This attachment (override) from the select box, click the Fields radio button, and click the Apply (this display) button.
2. Click the Apply (this display) button in the subsequent Row style options window. 3. Click the Add button in the Fields section, select This attachment (override) from the select box, check the checkbox for Content: Nid, and click Apply (this display)
button.
4. Check the box for Exclude from display and click the Apply (this display) button. 5. Click the downarrow next to the Add button in the Fields section, select Rearrange,
drag the Nid field above the Title field, and click the Apply (this display) button. 6. Click the Content: Title link in the Fields section and uncheck the checkbox for Link
this field to the original piece of content.
7. Click the Rewrite Results link to reveal its settings, check Output this field as a link, enter departments-and-courses/!1/[nid] in the Link path textbox, and click the Apply (this display) button.
8. Click the Add button in the Filter Criteria section.
9. Select This attachment (override) from the select box, check the checkbox for
Content: Type and click the button for Apply (this display).
10. Check the checkbox for Course and click the Apply (this display) button.
11. In the Attachment settings section, click the Not defined link next to Attach to, check the checkbox for Page, and click the Apply button.
12. Click the link for Before next to Attachment position:, change the setting to After, and click the Apply button.
Configure the Department list attachment with the following steps: 1. Click the button for the Department list display.
2. Click the Content link next to Show in the Format section, change All displays to
This attachment (override), click the Fields radio button, and click the Apply (this display) button.
3. Click the Apply (this display) button in the subsequent window.
4. Click the Add button in the Fields section, select This attachment (override) from the select box, check the checkbox for Content: Nid, and click the Apply (this display)
button.
5. Check the box for Exclude from display and click the Apply (this display) button. 6. Click the downarrow next to the Add button in the Fields section, select Rearrange,
drag the Nid field above the Title field, and click the Apply (this display) button. 7. Click the Content: Title link in the Fields section, select This attachment (override)
from the select box, and remove the check from Link this field to the original piece
of content, click the Rewrite Results link to reveal its settings, and check Output
this field as a link checkbox.
8. Click the Add button in the Filter Criteria section, select This page (override) from the select box, check the checkbox for Content: Type, and click the Apply (this display) button.
9. Check the Department checkbox, then click the Apply (this display) button
10. In the Link path textbox, enter departments-and-courses/[nid] and click the
Apply (this display) button.
11. In the Attachment settings section, click the Not defined link next to Attach to, check the checkbox for Page, and click the Apply button.
12. Ensure that the Attachment position link reads Before. 13. Click the Apply (this display) button.
Complete the page display with the following steps: 1. Click the Page display button.
2. Click the Add button in the Filter Criteria section, select This page (override) from the select box, check the checkbox for Content: Type, and click the Apply (this display) button.
3. Check the Course checkbox, then click the Apply (this display) button. 4. Click the Advanced link.
5. Click the Add button in the Contextual filters section, select This page (override)
from the select box, check the checkbox for Global: Null and click the Apply (this display) button.
6. Beneath When the filter value is NOT in the URL, click the radio button for Display contents of "No results found" and click the Apply (this display) button.
7. Click the Add button in the Contextual filters pane, check the box for Content: Nid, and click the Apply and configure contextual filters button.
8. Select This page (override), and beneath When the filter value is NOT in the URL click the radio button for Display contents of "No results found" and click the Apply
button.
9. Also in the Advanced section, click the Add button for No Results Behavior, select
This page (override) from the select box, select Global: Text area, and click the Apply (this display) button.
10. In the subsequent configuration pane, select This page (override), enter Select a course as the Label, enter <h2>Please select a department and then a course</h2> in the large textbox, and click the Apply (this display) button. 11. Click the Information link next to Theme in the Other section, scroll down and
copy the right-most file name from the Display output line, views-view-- departments-and-courses--page.tpl.php.
12. Click the Ok button and then the Save button. Create the template with the following steps:
1. From the Views module theme directory (probably sites/all/modules/views/ theme or sites/all/modules/contrib/views/theme), copy the file views- view.tpl.php and save it into the directory of the theme you're using (sites/ all/themes/your_theme) that contains template files, naming it views-view-- departments-and-courses--page.tpl.php.
2. Clear your caches (admin/config/development/performance). 3. Edit this new file and look around line 48 for:
<?php if ($attachment_before): ?>
<div class="attachment attachment-before"> <?php print $attachment_before; ?> </div>
<?php endif; ?>
4. Select that block of code, cut it, and paste it around line 62 immediately before: <?php if ($attachment_after): ?>
5. Around line 74 look for: <?php if ($more): ?>
6. Immediately before that line enter: <div style="clear:both"></div>
7. Edit your theme's CSS file (in my case it's style.css) and add the following at the
bottom of the file:
.page-departments-and-courses .attachment-before, .page-departments-and-courses .attachment-after { border: 2px solid black;
width: 46%; min-height: 300px; background-color: #eee; float: left; padding: 3px; }
10. Click a course for that department:
How it works...
The secret of this recipe is the use of attachment displays to augment the normal content of
the page display, and contextual filters moving data between the steps.
The first step is to display a list of departments in the first attachment display, and to rewrite
the department titles as links back to the same page, departments-and-courses, but containing an argument that is the department node ID (nid), such as departments-and- courses/32. We set the page to display Please select a department and then a course
The second attachment display is set up to display a list of courses, but only courses that belong to the chosen department. We did this with a contextual filter that takes the nid passed in the URL and matches it to the department nid that is present in course records, so every course that points to that department will be selected and used to populate the course list. We again rewrite the title as a link, in this case the course title, but this time we pass a second argument in the URL, the nid of the course.
The page display provides the course details and uses the second URL argument to identify which course to display based on the course nid.
We edited the views template to move the before attachment to appear after the content
rather than in its normal position, and then edited the theme CSS file to format the two
attachments and have them appear side by side.
There's more...
For more information on using multiple displays, see Packt Publishing's book, Drupal 6 Attachment Views at https://www.packtpub.com/drupal-6-attachment-views/ book. The concepts in it apply to Drupal 7 as well.