Drupal Training Series
Foundations for OSU Drupal 6
How to Use Views
This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License
What We’ll Be Covering…
Data vs. Information
About Views and the Views Module
Control Panel Overview
• Using the Views List
– Interpreting the Views List
• Add a View
–
Ex. 01 Enter Special Ingredient View Information
• Using the Views UI
–
–
–
–
–
Ex. 02 Configure the View Defaults
Ex. 03 Create a Basic Page Display
Ex. 04 Add a Header
Ex. 05 Add a Footer
Ex. 06 Pagination
Views & CCK
• Refining CCK Element Display
–
Ex. 07 Adjust Field & Label Visibility
Build Modes
• Full Node v. Teaser Build Mode
–
Ex. 08 Teaser Build Mode
Views & Menus
• Adding Menu Items Through Views
–
Ex. 09 Add Menu Item Through Views UI
Field Row Style
• Style Types for Field Row Style
–
–
Ex. 10 Create Employee Contact List
Lab Create an Equipment List View
Sorting
• Ordering, Sorting, & Grouping
–
Ex. 11 Refine Equipment List View
Block Display
• Creating a Block Display
–
Ex. 12 Create and Enable a Views Block
Summary
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
Getting Started
As a reminder, to get to your personal development site go to:
http://drupaldev.cws.oregonstate.edu/training/<yourONIDname>/login
From there, log in with your ONID information.
After logging in, please open a second tab in your browser and go
to CWS Training at
http://oregonstate.edu/cws/training
Locate the name of this workshop in the list and click it. This will
take you to a page describing the course with download links at
the bottom of the page.
Download the lab materials to your desktop and unzip them.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
Assignment
A few items should have been addressed
prior to this workshop:
• All Taxonomy vocabularies must be included
and the content in your Cooking Companion
tagged
• All Employee and Equipment nodes from the
Drupal 6 Generating Custom Content Types
lab material should be added
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Data vs. Information
Often times the terms “data” and “information” are used
interchangeably. In fact they are two different things.
Data is only a fragment of information.
Bits of data, such as what you enter into a field in a database
record (or on your Drupal site), by themselves mean very little.
For example, on a single data field in a record you might see a
field called Date of Birth, with an entry of 02/28/1901 in it. By
itself, all you know is that it’s the birth date of something.
It’s not until you look at the First Name field, which is Linus, and
the Last Name field, which is Pauling, where you have the
information that this particular date is Linus Pauling’s date of
birth.
This is the difference between data and information.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Data vs. Information: Same Data – Different Information
Most of us are now accustomed to seeing screen elements such
as drop down boxes when filling out an electronic form.
If there is a particular set of data that is used repeatedly in the
same fashion, it makes no sense to have to manually type it in all
of the time, correct?
For example, a list of State Codes in a drop down box is quite
common. This drop down box might be used in combination with
other fields to create Physical Address information, or Mailing
Address information, or Birth Record information, etc.
It’s the same group of state codes, the same data, but when used
in conjunction with varying bits of other data, it results in
different information.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
Data vs. Information: Relational Database At Work
It’s been mentioned in past sessions that your Drupal site utilizes
a very powerful relational database at its back-end. This doesn’t
mean much to most people, though, until it’s put into practice.
Do the following:
Type the word glossary at the end of your site root:
Ex: http://drupaldev.cws.oregonstate.edu/training/yourONID/glossary
This will open your Glossary. Click on the List link in the Cooking
Methods row.
Click on the letter B up in the alphabar and then click on the
Detailed definition of Bake link within the Bake term.
When the term displays, you’ll see a list of content underneath.
These items have been tagged with the Bake term – the content
is related to the term.
This is a relational database at work.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
Data Views: Overview
A view isn’t just a Drupal term. It’s actually a database
management term.
In general, a view is a particular way of looking at information
contained in a database.
Many of us may be more familiar with the term report, which is a
type of view – though today’s views can show much more than
just rows and columns of data.
A view arranges the records of a database in a pre-defined order
and makes only the desired fields visible. The structure of the
database is not changed – you’re just looking at the data in a way
that provides the particular type of information desired.
Views are compiled by means of a query – a set of commands and
parameters that are issued in a database language – in this case
Standard Query Language (SQL).
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
Data Views: Drupal Data
Everything that is entered into your Drupal site via a content type
or configuration panel gets stored into the supporting MySQL
database.
Given the fact that this data resides in a database, it’s a logical
reasoning that this data can be refined using methods such as:
• Filtering
• Sorting
…and displayed in a variety of different ways such as:
• Tables
• Grids
• Lists
This is where the Views module comes into play
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Views: Overview
The Views module is one of the most popular, integrated, and
well-supported modules available for Drupal.
In its most simple usage, the Views module is a smart query
builder. Among other things, it allows a user to filter content
based on different node types, user information, post
information, even field information.
In its more evolved usage, Views works with advanced features
such as CCK and Taxonomy to apply advanced sorting & grouping,
some basic styling methods, and a variety of different display
types.
Additionally, many sub-modules have been created to work with
Views in interesting ways. A good example is the Views Carousel
module, which will soon be integrated into the OSU Drupal 6
installation package. This module provides the ability to show a
scrollable collection of content such as images, text, and even
entire nodes.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Views: Control Panel Overview
The Views module can be intimidating to many who are new to it,
so we’ll break it down into pieces to explain what each piece
does.
The Views control panel consists of four tabs:
• List
• Add
• Import
• Tools
Additionally, Views also has the Views UI (User Interface) which is
where the bulk of the work is done.
For the purpose of this workshop, we’ll focus on the List tab, Add
tab, and the Views UI.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Views: Control Panel Overview – Views List Tab – Components
To get to the Views list, go to Administer >
Site building > Views:
1. The top section of the list are filtering
tools. Large sites may be composed of
many views. These tools can be used
to help site builders quickly locate the
view needed.
1
2
2. The bottom section of the Views list
contains all of the views available on
the site.
3. Like Blocks, Views can be enabled and
disabled. Enabled views are blue,
disabled views are grey.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
Views: Control Panel Overview – Views List Tab – Basic Information & Tools
2
Quite a bit of information and a few handy
tools are included on the Views list:
1. Each view has its own set of
information. This information can vary
and include a number of things such as:
– Display type (Page, Block, etc)
– URL paths for Page displays
– A description of what the view does, etc.
2. At the upper right of the list are four
links to tools:
– Edit
Edit any view on the list
– Export
Export the code for a view to be imported into
another site
1
– Clone
Create a copy of a view which can then be used as a
template
– Disable
Disable a view
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
Views: Control Panel Overview – Add Tab – Ex. 01 Enter Employee View Information
Just like many other items that we’ve created
so far, Views has an information panel as well.
Let’s add a view of our Employee content:
1
2
1. Click the Add tab.
3
2. View name field = employee
Must be lowercase alphanumeric & underscores only
4
5
3. View description field = A view of all Food
for Thought Employees
Provides information regarding what the view is for
4. View tag field = Employee
Used to help sort views on the Views list
5. View type option = Node (default)
A Node View type option is generally what is used
6. Click the Next button
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Views: Control Panel Overview – Views UI – Overview
The Views UI looks quite complicated (and it
can be), but we’re only going to be using a
portion of it for right now:
1. Basic settings group
5
3
This group of configurable items controls the “style” of
the display including elements such as Header text and
how many items to show per display.
1
4
2. Fields group
2
This group determines the data fields that will be used in
your view. Some view styles do not use fields.
3. Sort criteria group
This group determines how the query result is sorted.
4. Filters group
This group determines the way content is filtered.
5. Display group
This tool allows a user to create different display types
based upon the default settings. An example would be a
Page display, which looks like a page, or a Block display,
which creates a block.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Views: Control Panel Overview – Views UI – Ex. 02 Configuring View Defaults – Basic Settings – Name
To add a name to the view, in the Basic settings
group do the following:
1. Name = click on Defaults link
This will open up a field at the bottom of the control panel.
2. Display name field = Employee Main View
1
3. Click the Update button
A red message will appear at the bottom telling you that there
are no fields defined for this view. This is normal.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Views: Control Panel Overview – Views UI – Ex. 02 Configuring View Defaults – Basic Settings – Title
To add a Title to the view, do the following:
1. Title = click on None link
This will open up a field at the bottom of the control
panel.
2. Title field = Food for Thought
Employees
1
3. Click the Update button
A red message will appear at the bottom telling you that
there are no fields defined for this view. This is normal.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
Views: Control Panel Overview – Views UI – Ex. 02 Configuring View Defaults – Basic Settings – Row Style
Now it’s time to set the Row Style – this will get
rid of the message that has been showing:
1. Row style = click on Fields link
This will open up an option group at the bottom of the control
panel.
2. Row style option = Node
1
3. Click the Update button
This will open up another option group at the bottom of the
control panel.
4. Build mode = Full node
5. Click the Update button
2
4
3
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Views: Control Panel Overview – Views UI – Ex. 02 Configuring View Defaults – Basic Settings – Live Preview
Looking down at the bottom of the
screen it can be seen that the Live
Preview feature has suddenly sprung
into action.
What’s occurring is that we’ve told
Views to show us nodes in Node view
and it has responded.
The thing is, we haven’t filtered any
of these out, so Views is starting with
the first node and just displaying
them all.
Now we’re going to work a bit with
Filters, to sift through the content
and extract only what we want –
namely the Employee nodes.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Views: Control Panel Overview – Views UI – Ex. 02 Configuring View Defaults – Basic Settings – Filters
To filter content based upon the Node type,
do as follows in the Filters group:
1. Click on the + button
1
2. In the Groups filter field, select Node
This will open a box at the bottom of the screen
3. Find the Node: Type option and check it
4. Click the Add button
This will open another box at the bottom of the screen
5
5. From the Node type options, check
Employee
2
6
6. Click the Update button
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
20
Views: Views UI – Ex. 02 Configuring View Defaults – Basic Settings – Now You Do It
It’s always good practice to set the Published filter. For views that will be available to
the general public, it’s good to make sure the content is ready to be viewed first.
Keeping that in mind, filter the Employee content so that only Published items show.
Filters group
Click the + button
Groups filter field = Node
Node option = check Node:Published
Click the Add button
Published option = check Yes
Click the Update button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Views: Views UI – Ex. 03 Create a Page Display – Add Page Display
To date, the default settings for the
Employee Main view have been established,
but there is no display type yet – the only
way to see it is through the Live Preview.
Let’s create a Page display:
1. In the upper left of the screen is a
selection box with the word Page in it.
Click the Add display button beneath
this box.
2. The Page display type will show. All
default settings will appear in italics
and, below the Basic settings group, a
new group will appear titled Page
settings. These items only relate to
pages.
1
2
The message that displays is normal. It will go away
after a path is set.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Views: Views UI – Ex. 03 Create a Page Display – Set Path
When a Page display is used, it will require a
path to be set. This is the URL to the view.
To set the Path for this view, do the
following within the Page settings group:
1. Path = click on None link
2. Path field = view/special-ingredient
The Path can be any word, phrase, or number sequence
desired. Avoid spaces and non-alphanumeric characters
other than underscores or dashes. Adding ‘view’ to the
front is a convention used to distinguish the fact that it is
a view – this isn’t necessary, though.
3. Click the Update button
1
4. Click the Save button to save the view
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Views: Views UI – Ex. 03 Create a Page Display – Check Path
Now check the path by opening
another tab in your browser.
Enter the URL of your site and
then add the view/specialingredient path at the end.
Keep this tab open – it’s a good
way to flip-flop between your
work environment and your
results environment.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Views: Views UI – Ex. 04 Add Header
Return to the tab with your Views UI in it.
Now we’ll add a few items to dress the view
up, starting with a Header. To add a
Header, do the following within the default
settings:
1. Header = click on the None link
2. Header text area = ex-04.txt
Paste in the HTML code from the ex-04.txt file. Note that
you do not have to use HTML tags, but you can if desired.
1
3. Click the Update button
4. Click the Save button to save the view
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
Views: Views UI – Ex. 04 Add Header - Result
Switch to the page view tab in your browser
and click on the Reload button. This will
refresh the page and show the new changes
that have just been added.
Now let’s add a Footer…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
Views: Views UI – Ex. 05 Add Footer
Return to the tab with your Views UI in it. To
add a Footer, do the following within the
default settings:
1. Footer = click on the None link
2. Footer text area = ex-05.txt
Paste in the HTML code from the ex-05.txt file. Note that
you do not have to use HTML tags, but you can if desired.
3. Input format option = Full HTML
Important! There are inline CSS styles used in this little
code snippet.
1
4. Click the Update button
5. Click the Save button to save the view
2
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Views: Views UI – Ex. 05 Add Footer - Result
So now a small footer will appear which will
only show on this particular view.
After scrolling down to view the footer, it
may have come to your attention that this is
a very long page.
Let’s paginate the view to shorten things up
a little bit.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
Views: Views UI – Ex. 06 Pagination – Set Items to Display
The number of items that are displayed in
any given view can be restricted to show
only a certain amount per page – this is
known as pagination. To paginate the
Employee Main view, do the following:
1. Items to display = click on the 10 link
2. Items to display field = 1
1
2
3. Click the Update button
You’ll notice immediately that only one
node shows in the Live Preview with no way
to view the other items. We’re not quite
done yet…we have to add a Pager.
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
Views: Views UI – Ex. 06 Pagination – Set Pager
To add a Pager to the display, do the
following:
1. Use pager = click on the No link
2. Pager option = Full Pager
1
3. Click the Update button
4. Click the Save button to save the view
Now take a look at your results page so you
have an idea of how this will look overall.
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
Views: Views UI – Ex. 06 Pagination – Result
The pager will show at the bottom of the
view. Click through a few pages and
observe how it behaves.
So now, quite a few things have been
manipulated – but the view is still rather
clunky in appearance.
Let’s go back to CCK and see what can be
done about this.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
Views & CCK: Refining CCK Display Elements
Views and CCK are two entirely different modules which are built
and maintained by a completely different group of people.
The developers of both modules were aware, though, from early
on, how these modules could benefit each other.
As two of the most prominent pieces of contributed
programming in the drupal.org collection, these modules have
been developed to accommodate each other nicely – as we’ll see
in the following example where we will refine the Employee
content type via CCK to assist the Views output.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
Views & CCK: Refining CCK Element Display – Ex 07 Adjust Field & Label Visibility
In the Generating Custom Content Types
workshop, we touch on adjusting CCK
element display – now we’re going to revisit
this.
1. As a refresher, go to Administer >
Content management > Content types >
Employee manage fields link
1
2
2. Once within the Manage fields control
panel, click on the Display fields tab.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
Views & CCK: Refining CCK Element Display – Ex 07 Adjust Field & Label Visibility – Exclude Fields
The first thing we’ll do is exclude some
fields that we don’t really need on this
particular view:
1. First name = exclude, Teaser & Full
2. Last name = exclude, Teaser & Full
Paste in the HTML code from the ex-05.txt file. Note
that you do not have to use HTML tags, but you can if
desired.
1
2
3. Department = exclude, Teaser & Full
3
Important! There are inline CSS styles used in this
little code snippet.
4
5
4. E-mail = exclude, Teaser & Full
5. Phone = exclude, Teaser & Full
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
Views & CCK: Refining CCK Element Display – Ex 07 Adjust Field & Label Visibility – Hide Label & Field
And, to finish off, we’ll hide the Experience
field’s label – because the information in
this field is fairly obvious:
1. Experience label field = <Hidden>
2. Experience teaser field = <Hidden>
3. Click the Save button
It may seem as if we’re undoing a good
part of what our custom content type
was built for – but we’re not.
CCK and Views, together, can do some
very interesting things.
1
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
2
Views & CCK: Refining CCK Element Display – Result to Date
Refresh your results page and take a look at
the changes.
The page is looking smoother and more
inviting.
Contact data has been hidden, but not
forgotten. For the moment, we’ll focus on
the parts of the page that best describe the
employee.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
Build Modes: Overview
Up to this point, we’ve been using what is known as a Full Node
Build Mode. It’s a relatively simple type of view that lists and
displays the actual nodes as the normally appear.
Within the Row Style in your basic view settings, there are two
other available Build modes:
• Teaser
• Print
We’ll take a look at the Teaser Build Mode for our next exercise
as it provides us an opportunity to show a few of our employees
together on a single page without taking up an abundance of
space.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
Build Modes: Full Node v. Teaser – Ex 08 Teaser Build Mode – Preparation – Filter Employee Content
To utilize the Teaser build mode, a little bit
of preparation must be done in advance. An
HTML break must be inserted into each
node to signal to Drupal where the teaser
cutoff should be placed. First let’s filter the
content that needs to be edited:
1
3
2
1. Go to Administer > Content
management > Content
2. Filter type option = Employee
3. Click the Filter button
This will filter all Employee nodes. Click the
edit link of the first node in the list.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
Build Modes: Full Node v. Teaser – Ex 08 Teaser Build Mode – Preparation – Add HTML Breaks
To add an HTML break, do the following:
1. In your text editor toolbar, click on the
HTML button. This will open the HTML
Source Editor dialog box.
2
2. Pick the spot within the text in the
dialog box that you would like to break
off at and then type <!--break--> at
your desired cutoff point
3. Click the Update button
3
4. Click the Save button
Repeat this process for at least a few other
Employee nodes.
4
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
Build Modes: Full Node v. Teaser – Ex 08 Teaser Build Mode
The site’s Employee content is now ready for
the Teaser build mode. Return to the
browser tab with your Views UI in it and do
the following:
1. In the Basic settings group, click on the
little cog button next to the Row style
item to open up the Row style options
1
2. Build mode option = Teaser
3. Click the Update button
4. Click the Save button to save the view
Now jump over to the results browser tab,
refresh it, and take a look at the changes.
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
Build Modes: Full Node v. Teaser – Ex 08 Teaser Build Mode – Result to Date
Note how the teaser text displays, versus all
of the text that’s present on the Full node
view.
Enough space has been saved that we can
actually put a few more items on this page.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
Build Modes: Full Node v. Teaser – Ex 08 Teaser Build Mode – Increase Items Per Page
Now, return to the Views UI and increase
the number of Items per page allowed:
1. Items to display = click on the 1 link
2. Items to display field = 5
3. Click the Update button
1
4. Click the Save button to save the view
Now take a look at your results page so you
have an idea of how this will look overall.
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
Build Modes: Full Node v. Teaser – Ex 08 Teaser Build Mode – Final Result
The final result is starting to look a little
more interesting.
Adjust the Items per page to suit your own
tastes, if you so choose.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
Views & Menus
There are a couple of different ways that a view can be attached
to a menu.
Views that will reside at the top level of a menu can be added to
the desired menu straight from the Views UI.
Views that will appear as hierarchical menu items must be added
through the Menus control panel – which will be covered later in
this workshop.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
Views & Menus: Ex 09 Add Menu Item From Views UI
To add the Special Ingredient view to a
menu from the Views UI, do the following:
1
1. Click on the Page display
2. In the Page settings group, click on the
No menu link
3. Type option = Normal menu entry
4. Title field = Our Special Ingredient
2
5. Description field = About the Food for
Thought employees
4
6. Menu field = Primary Links
3
5
7. Weight field = -48
6
8. Click the Update button
7
8
9. Click the Save button to save the view
9
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45
Field Row Style: Overview
Up to this point, we’ve been working exclusively with a Node Row
Style. The items that show in a display of this type look just like
they do on the source nodes that the view is made up of.
There is another Row Style that can be used, though, which will
allow the user to create more data driven types of displays.
Both Node and Field Row styles can be presented in many
different ways:
• Grid
• HTML List
• Table
• Unformatted
Following, we’ll work on an exercise that builds an Employee
Contact list using a Field Row style in a table format.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
Field Row Style: Ex 10 Create Employee Contact List – Add View
1
2
We’ll need to create a brand new view, so
click on the Add tab from your Views UI to
initiate the new view.
1. View name field = contact_employee
3
2. View description field = An employee
contact list
4
3. View tag field = Employee Contact List
4. View type option = Node default
5. Click the Next button
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Set Title
To add a Title to the view, do the
following:
1. Title = click on None link
1
2. Title field = Employee Contact List
3. Click the Update button
Remember, a red message will appear at the bottom
telling you that there are no fields defined for this view.
This is normal.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Add First & Last Name Fields
1
Now to add some fields.
1. In the Fields group, click the + button
2. In the Groups filter field, select Content
3. Check the First Name field option
4. Click the Add button
This will open another configuration panel under the main Views UI
2
3
5. Check the Link the field to its node option
6. Click the Update button
7. Click the Save button then repeat this process
for the Last Name field
5
4
6
7
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Add Position Field
The Position field is a little
different as this is actually a
Taxonomy term.
1. In the Fields group, click the
+ button
2. In the Groups filter field,
select Taxonomy
3. Check the Taxonomy field
option
3
4. Click the Add button
1
5
2
This will open another configuration
panel under the main Views UI
5. Label field = Position
6. Click the Update button
7. Click the Save button
7
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
6
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Display to Date
Click on the Preview button, down in the
Live Preview section of the Views UI.
The result, currently, is a little bit confusing.
It’s because the View is currently looking at
every single node in the site and just
lumping it all together in one long,
unformatted list.
This is going to be fixed by first applying a
Filter and then applying a Style.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Add Filter
We want to filter the content based on
Node type, so do as follows in the Filters
group:
1. Click on the + button
2. In the Groups filter field, select Node
1
This will open a box at the bottom of the screen
3. Find the Node: Type option and
check it
4. Click the Add button
This will open another box at the bottom of the
screen
5. From the Node type options, check
Employee
6. Click the Update button
7. Click the Save button
2
5
6
7
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Results to Date
Click the Preview button in the Live Preview
section of the Views UI.
Now the display is starting to make a bit
more sense.
It can be further refined by adding a Style to
it. Let’s turn this into a Table Style view.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
53
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Table Style
To display this view using a Table Style, do
the following:
1. In the Basic settings group, click on
the Unformatted link.
2. Style option = Table
1
3. Click the Update button
After clicking the Update button, a new
configuration panel will appear. There are a
few extra items that can be configured for a
table display, which will be covered next.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
54
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Table Style Configuration
1
2
4
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
Fields can actually be combined into
columns here in the style
configuration panel, additionally sort
options can be set as well. To
configure this, do the following:
1. In the First name Column field,
select Last name
2. In the Last name Separator field,
add a comma followed by one
space
3. Check the Sortable option for
both available checkboxes
4. In the Default sort column, check
the radio button in the Last name
row
5. Click the Update button
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Display to Date
Looking at the Live Preview, it is
immediately obvious that
something is wrong – the Last
Names should be showing before
the First Names, correct?
They should, but Views actually
also takes into consideration the
order that the fields appear in
when they’re initially added.
It’s simple to fix, we’ll just reorder
the fields.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
56
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Reorder Fields
To reorder fields in a view, do the following:
1. In the Fields group, click on the ↑↓
button
2. Drag the Last name field up over the
First name field
1
3. Click the Update button
4. Click the Save button
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
57
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Reorder Fields
Click the Preview button in the Live Preview
section of the Views UI.
Things are in order now and the table looks
pretty good.
Now it’s time to add the final columns.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
58
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Now You Do It
Three fields need to be added and one additional filter should be applied as well.
Using the instructions below, add the Department, Phone, and E-mail fields to the view
and then add a Node:Published filter.
Fields group
Filters group
Click the + button
Click the + button
Groups filter field = Content
Groups filter field = Node
Content option = check Content:Department
Node option = check Node:Published
Click the Add button
Click the Add button
Click the Update button (no extra configurations)
Published option = check Yes
Repeat this process for both the Phone and Email fields
Click the Update button
Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
59
Field Row Style: Ex 10 Create Employee Contact List – Set Defaults – Display to Date
Click the Preview button in the Live Preview
section of the Views UI.
The View is ready to be accessed.
Now a Page display must be created, it must
be provided a Path, and the view must then
be connected to a menu.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
60
Field Row Style: Ex 10 Create Employee Contact List – Create Page Display
To create a Page display and give it a Path:
1. In the upper left, click the Add display
button
2. In the Page settings group, click on the
None link
3. Menu path field = view/contact-employee
4. Click the Update button
5. Click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
61
1
2
Field Row Style: Ex 10 Create Employee Contact List – Add to Menu
This particular view will be a child of the Our
Special Ingredient item in Primary Links.
Currently, there is no ability to add child menu
items in Views, so we’ll have to do it via the
standard method:
1
2
3
1. Go to Administer > Site building > Menus >
Primary links item and click the Add item tab
2. Path field = view/contact-employee
3. Menu link title field = Employee Contact List
4
4. Parent item field = Our Special Ingredient
5. Weight field = -49
5
6. Click the Save button
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
62
Field Row Style: Ex 10 Create Employee Contact List – Completed
After the menu item is created,
test it out.
As can be seen the appearance of
the final view is slightly different
than what was seen in the Live
Preview. This is due to the fact
that the font sizes are slightly
different.
Let’s adjust the configuration on
the right side blocks so they only
show on the front page.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
63
Refresher
Adjust the configuration of all right sidebar blocks (except the Book navigation block) so
they only show on the front page.
Block configuration
Go to Administer > Site building >
Blocks
Locate the desired block in the right
sidebar group and click its configure
link
Show block on specific pages option =
Show on only the listed pages
Pages field = <front>
Click the Save block button
Repeat on all other blocks in the Right
Sidebar with the exception of the Book
navigation block.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
64
Now You Do It: Create Equipment View
Using the specifications below, create your own view using the Equipment nodes.
Equipment view creation
Equipment view default specifications
Basic Settings
Go to Administer > Site building > Views
Name = Equipment
Title = Equipment List
Row Style = Fields
Use Pager = Yes, full
Items to Display = 10 (default)
Header = paste in HTML from ex-10a, Full HTML
Footer = paste in HTML from ex-10b, Full HTML
Click the Add tab
View name = equipment
View description = Kitchen equipment list
View tag = Equipment
View type = Node (default)
Click the Next button
Fields
In the Views UI, enter the specifications shown at
right
Node = Title, erase Label, Link this field to its node
Content = Image (field_equipment_image)
Label = none
Format = Image
After all specifications are entered, click the Save
button
Filters
Node = Published, yes
Node = Type, Equipment
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
Sorting & Grouping: Overview
The Live Preview of the Equipment List view isn’t very impressive,
yet. Through the use of Style, Sort criteria, and Taxonomy,
though, we’ll have a nice looking and highly functional view in no
time.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
Sorting & Grouping: Ex 11 Refine Equipment List View – Add Page Display
First, a Page display should be created and
a Path set.
1. Click the Add display button
2
1
2. Name = Equipment List
3. Path = view/equipment-list
4. Click the Save button
Now you can view the page as it’s being
developed in another window if desired.
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
Sorting & Grouping: Ex 11 Refine Equipment List View – Add Taxonomy Field
1
To add a Taxonomy field to this view,
which we’ll use to group our Equipment
items on, do the following:
1. Click the + button in the Fields group
2. Select Taxonomy from the Groups
drop-down menu
2
3. Check Taxonomy: Term
3
4. Click the Add button
After selecting and adding the field, it
must be configured.
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
68
Sorting & Grouping: Ex 11 Refine Equipment List View – Configure Taxonomy Field
Now configure the Taxonomy field:
1. Remove the word Term from the
Label field
1
2. Check the Link this field to its
taxonomy page option
3. Click the Update button
4. Click the Save button
The result still isn’t too impressive.
Setting the Style will help remedy this.
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
69
Sorting & Grouping: Ex 11 Refine Equipment List View – Adding the Grid Style
Let’s take a look at the Grid style.
To add it to the view, do the
following, within the Basic Settings
group:
1
1. Click on the Unformatted link.
2. Style option = Grid
3. Click the Update button
After clicking the Update button,
the configuration panel will appear.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
Sorting & Grouping: Ex 11 Refine Equipment List View – Configuring the Grid Style
We’ll set the view so that it displays according
to the Taxonomy group it belongs in by doing
the following:
1. Grouping field drop down = Taxonomy: Term
2. Number of columns field = 3
3. Alignment option = Horizontal
4. Click the Update button
5. Click the Save button
1
2
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
71
Sorting & Grouping: Ex 11 Refine Equipment List View – Preview to Date
Looking at the Live Preview might prove to
be a little confusing because we’ve
performed a Grouping action without doing
an accompanying Sort.
This can be fixed quite easily by using the
Sort criteria group in the Views UI.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
72
Sorting & Grouping: Ex 11 Refine Equipment List View – Add Sort Criteria
To sort this view by Taxonomy term, do the
following within the Sort criteria group:
1. Click on the + button
2. In the Groups filter field, select
Taxonomy
3. Check the Taxonomy:Term option
4. Click the Add button – this will open a
configuration panel
5. Leave the Sort order option at
Ascending
6. Click the Update button
7. Click the Save button
1
2
3
5
6
4
7
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
73
Sorting & Grouping: Ex 11 Refine Equipment List View – View To Date
The view is starting to take shape and
make sense now.
This view, while fun and good for an
exercise, is actually rather bulky and
could definitely be laid out more
efficiently – this is one of the nice
things about Views – the display can
be quickly changed without disturbing
the original content.
Let’s condense the view a little bit by
removing the images and individual
tags.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
74
Now You Do It: Condense Equipment View
Condense the Equipment view by doing the following:
Equipment view condensing
Remove Image field
Edit Taxonomy: Term field to Exclude from
display
Edit Grid configuration so it displays 4
items per row
Increase Items per page to 88
Save the view
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
75
Block Display: Ex 12 Create and Enable A Views Block Display – Create Display
We have a Page display, but what if we
wanted to “attach” this view to the
Equipment book page in our Cooking
Companion? Can this be done? Yes, by
doing the following:
3
1. In the Views UI, choose Block from the
display drop down list
1
2
2. Click the Add display button
3. In the Basic settings group, name the
block Equipment List Block
4. Click the Save button
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
76
Block Display: Ex 12 Create and Enable A Views Block Display – Locate Equipment Book Page Node ID
A little information is necessary on the way
to attaching the Equipment List block. We’ll
want the Node ID of the Equipment book
page to set the Page Visibility of the block.
1. Go to Administer > Site building > URL
aliases
2. In the Filter aliases search box type in
“Equipment”
3. Click the Filter button
1
3
2
4
4. The Equipment book page Node ID for the
example site is node/115
Note: the Node ID that your Equipment page has will
probably differ from the one shown
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
77
Block Display: Ex 12 Create and Enable A Views Block Display – Configure Equipment List Block
To configure the Equipment List block, go to
Administer > Site building > Blocks, locate
the Equipment List Block and click on its
corresponding configure link. Within the
configuration panel, do the following:
1. In the Page specific visibility settings,
enter your node id using a relative URL
(node/#)
2. Click the Save block button
After redirection back to the Blocks main
page, enable the Equipment List block by
placing it in the post_content group.
1
Remember to click the Save blocks button.
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
78
Block Display: Ex 12 Create and Enable A Views Block Display – Completed
Notice that the Equipment List now
appears below the Equipment parent page,
and only below this page.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
79
Summary
Quite a bit was covered today:
• Views Defaults
• Build Modes
• Page & Block Displays
• Field Row Styles
• How Views Interacts with CCK & Menus
• Sorting & Grouping Options
Actually, this isn’t all there is to Views. You may have noticed
that we haven’t even touched the Recipe nodes yet. Views is,
indeed, the powerhouse of Drupal.
Views training will continue through the OSU Drupal 6
Intermediate Views workshop.
In the meantime, you’re strongly encouraged to go into the
Equipment and Employee views and experiment with different
styles, displays, and filters.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
80
Conclusion
This completes the OSU Drupal 6 How to Use Views tutorial. For
additional tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training
To view and register for all OSU Drupal 6 Workshops, visit the
Professional Development Central Registration site at:
http://oregonstate.edu/cws/register
To submit a Help Ticket or make a Site Request on-line, go to:
http://oregonstate.edu/cws/contact
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
81