Drupal Training Series
Foundations for OSU Drupal 6
205: 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 Primer
•
Overview
Views Basics
• Overview
• Ex. 01 Add People View
• Ex. 02 Configure People View
Views & CCK
• Overview
• Ex. 03 Adjust Display via CCK
Build Modes
• Overview
• Ex. 04 Teaser Build Mode
Views & Menus
• Overview
• Ex. 05 Add Menu Item Through Views UI
Style Options
• Overview
• Ex. 06 Create Employee Directory
Grouping & Sorting
• Overview
• Lab Start Equipment Catalog
• Ex. 07 Create Equipment Catalog
Configuration Details
• Overview
• Ex. 08 Adjust Equipment Catalog
Display Options
• Overview
• Ex. 09 Create Equipment Child Page
• Ex. 10 Create Views Block Display
Views in Action
• Overview
• Ex. 11 Add New Equipment Nodes
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/view/training-materials
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
Our Project To Date
A few items should have been addressed
prior to this workshop:
• All Taxonomy vocabularies must be included
and your Cooking Companion content
appropriately tagged
• All Employee and Equipment nodes from the
Drupal 6 Generating Custom Content Types
lab material should be added
Please note that if these elements are missing or
not complete, the results of your exercises in this
workshop will vary.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Data Primer: Overview
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 Primer: 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 Primer: 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 Primer: Data Views
The term 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 Primer: 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 Basics: 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.
Many sub-modules have been created to work with Views in
interesting ways, and many other major modules such as CCK and
ImageCache work exceptionally well with it and may even have
special features to accommodate easier Views handling.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Views Basics: 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 Basics: Control Panel Overview – Views List Tab – Components
To get to the Views list, go to Admin menu
> Site building > Views:
1
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.
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 Basics: 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 Basics: Control Panel Overview – Ex. 01 Add People View
1
2
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 FFT People content:
1. Click the Add tab.
2. View name field = people
3
Must be lowercase alphanumeric & underscores only
4
3. View description field = A view of all Food for
Thought people
Provides information regarding what the view is for
5
4. View tag field = People
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 Basics: 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
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.
5
2. Fields group
1
4
This group determines the data fields that will be used in
your view. Some view styles do not use fields.
2
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
3
15
Views Basics: Views UI – Ex. 02 Configure View Defaults – Basic Settings – Name
The Name element is used to add a
name to the tab on the left hand side.
For your default settings, it’s suggested
that you leave the name as Defaults.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Views Basics: Views UI – Ex. 02 Configure People View – 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
3. Click the Update button
1
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 Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Row Style
Now it’s time to set the Row Style – this will get
rid of the message that’s 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
4
2
5
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Views Basics: Views UI – Ex. 02 Configure People View – 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 FFT People nodes.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Views Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Filters
To filter content based upon the Node
type, 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 FFT
People
6. Click the Update button
2
5
3
6
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
20
Views Basics: Views UI – Ex. 02 Configure People View – 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 Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Live Preview
Looking at the Live Preview, you’ll
notice that all of the nodes are now
of the FFT People content type.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Views Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Update vs. Save
Up to this point, we have not yet saved our view. It’s important to
remember that Update and Save are not the same thing in Views.
Update allows you to make small incremental changes that you
can see in the Live Preview. Once you save, the Live Preview goes
away until you make your next update.
If you accidentally move away from Views, it does a good job of
holding on to your settings, but if your browser is closed, the
settings will be lost if you don’t save.
Before we proceed, take a moment
to save your view by clicking the
Save button. Note the behavior of
the Live Preview as you do so.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Views Basics: Views UI – Ex. 02 Configure People View – Add Page Display
To date, the default settings for the People
view have been established, but there is no
display type yet – the only way to see the
view is through the Live Preview. A display
must be used to share the view with an
audience. Let’s create a Page display:
1. In the upper left of the screen, click the
Add display button.
1
2
Be patient with this - don’t click the Add display
button more than once.
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.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Views Basics: Views UI – Ex. 02 Configure People View – 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 nonalphanumeric 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.
1
3. Click the Update button
2
4. Click the Save button to save the view
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
Views Basics: Views UI – Ex. 02 Configure People View – Check Path
Now check the path by opening
another tab in your browser.
Enter the URL to the front page of
your site and then add the
view/special-ingredient 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
26
Views Basics: Views UI – Ex. 02 Configure People View – 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
1. Header = click on the None link
2. Header text area = ex-02.txt
Paste in the Header HTML code from Section Ex. 02a.
2
3. Set the Input format to Full HTML
4.Click the Update button
5. Click the Save button to save the view
3
5
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Views Basics: Views UI – Ex. 02 Configure People View – 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
28
Views Basics: Views UI – Ex. 02 Configure People View – 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-02.txt
Paste in the Footer HTML code from Section Ex. 02b.
1
3. Input format option = Full HTML
Important! There are inline CSS styles used in this little
code snippet.
2
4. Click the Update button
5. Click the Save button to save the view
3
5
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
Views Basics: Views UI – Ex. 02 Configure People View – 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
30
Views Basics: Views UI – Ex. 02 Configure People View – 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
People view, do the following:
1. Items to display = click on the 10 link
2. Items to display field = 1
1
3. Click the Update button
2
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
31
Views Basics: Views UI – Ex. 02 Configure People View – 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
32
Views Basics: Views UI – Ex. 02 Configure People View – 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
33
Views & CCK: Overview
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
34
Views & CCK: Ex. 03 Adjust Display Via CCK – Field Manager – Reposition Fields
1
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 Admin menu > Content
management > Content types > Edit FFT People
> Manage fields link
2. Once within the Field manager control panel,
move the Department and Position fields up
directly beneath the Name to be displayed field.
3. Click the Save button.
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Overview
Now, we’ll head to the Display manager and
take a look at how CCK and Views work
together.
1. Click on the Display fields tab.
1
2. The Teaser column is used to create summary
views.
3. The Full node column is used for the general
node display.
4. The Exclude checkboxes will keep the field
from showing in either the Teaser or Full node
view – depending on which is checked.
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
3
36
Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Non-Grouped Items
Double-check your non-grouped items to ensure they are set as
shown below.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Contact Info Group Items
Set the Contact Info group items as shown below. Make sure you
switch your email field format options to Email contact form.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Biographical Info Group Items
Set the Biographical Info group items as shown below.
After all your settings are in place, make sure to click the Save
button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Completed
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
40
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
41
Build Modes: Ex. 04 Teaser Build Mode – Set Post Trimming Settings
1
Before heading back into the view, we need to
adjust how we want to trim our posts for our
teaser text:
1. Go to Admin menu > Content management >
Post Settings
2
2. Length of trimmed post option = 600 characters
3. Click the Save configuration button
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
Now we’re ready to change the row style of
our view…
42
Build Modes: Ex. 04 Teaser Build Mode – Change Row Style
The site’s People view 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
43
Build Modes: Ex. 04 Teaser Build Mode – Result to Date
You may have to look at the
second node in the group as
the first node hits the trim
limit from the start.
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
44
Build Modes: Ex. 04 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 = 3
1
3. Click the Update button
4. Click the Save button to save the
view
Take a look at your results page so
you have an idea of how this will look
overall.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
4
45
Build Modes: Ex. 04 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
46
Build Modes: Ex. 04 Teaser Build Mode – Comparison
You may be wondering why your image changed.
The change in the image display occurred due to the ImageCache
presets we created and applied in the Generating Custom
Content types workshop. The settings are in CCK’s Display
manager:
The teaser also exhibits slightly different behavior than the node
view in the fact that if you click on the teaser image, it will then
take you to the full node.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
Views & Menus: Overview
There are a couple of different ways that a view can be attached
to a menu.
Views that will appear as child menu items must be added
through the Menus control panel – which will be covered later in
this workshop.
Views that will reside at the top level of a menu, though, can be
added to the desired menu straight from the Views UI.
In the following exercise we’ll add the People view to the Primary
links menu at the top of your content area.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Views & Menus: Ex. 05 Add Menu Item From Views UI – Adjust Page Display Settings
To add the Special Ingredient view to a
menu from the Views UI, do the following:
1. Click on the Page display
2. In the Page settings group, click on the No
menu link
1
3. Type option = Normal menu entry
4. Title field = Our Special Ingredient
5. Description field = About the Food for
Thought employees
2
6. Menu field = Primary Links
7. Weight field = -48
4
3
8. Click the Update button
5
9. Click the Save button to save the view
6
8
9
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
7
Views & Menus: Ex. 05 Add Menu Item From Views UI – Completed
Looking directly up on your screen, you’ll see the new menu
addition.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
Style Options: 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
51
Style Options: Ex. 06 Create Employee Directory – Add View
1
We’ll need to create a brand new view, so
click on the Add tab from your Views UI to
initiate the new view:
2
3
1. View name field = directory
4
2. View description field = An employee
directory.
3. View tag field = Directory
4. View type option = Node default
5. Click the Next button
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Set Title
To add a Title to the view, do the
following:
1. Title = click on None link
1
2. Title field = Directory
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
53
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Add First & Last Name Fields
1
Now to add some fields.
1.
2.
3.
4.
In the Fields group, click the + button
In the Groups filter field, select Content
Check the First Name field option
Click the Add button
This will open another configuration panel under the
main Views UI
5. Check the Link the field to its node option
6. Click the Update button
Repeat this process for the Last Name field
2
3
5
6
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
54
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Add Position Field
1
Add the Position field:
1. In the Fields group, click the +
button
2. In the Groups filter field, select
Content
3. Check the Position field option
4. Click the Add button
2
This will open another configuration panel under
the main Views UI
5. Click the Update button
3
5
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
6
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Display to Date
Looking at the Live Preview you may notice
that 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
56
Style Options: Ex. 06 Create Employee Directory – 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 FFT
People
6. Click the Update button
2
5
6
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
57
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Results to Date
Looking in the Live Preview section of the
Views UI, it can be seen that 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
58
Style Options: Ex. 06 Create Employee Directory – 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.
1
2. Style option = Table
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
59
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Table Style Configuration
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
2
3
4
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
60
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. Check the Enable Drupal style “sticky”
table headers checkbox.
6. Click the Update button
Style Options: Ex. 06 Create Employee Directory – 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
61
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Reorder Fields
To reorder fields in a view, do the
following:
1
1. In the Fields group, click on the ↑↓
button
2. Drag the Last name field up over the
First name field
3. Click the Update button
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
62
Style Options: Ex. 06 Create Employee Directory – 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
63
Style Options: Ex. 06 Create Employee Directory – 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, E-mail, and Office Phone 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 Office Phone
and Email fields
Click the Update button
Note: for the Email field only
Format field = Email contact form
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
64
Style Options: Ex. 06 Create Employee Directory – Set Defaults – Display to Date
Now check the Live Preview
and you’ll see your view is
ready to be accessed.
Click the Save button to avoid
losing all the work you’ve put
into it and then we’ll create a
Page display, give it a Path,
and connect it to a menu.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
Style Options: Ex. 06 Create Employee Directory – Create Page Display
To create a Page display and give it a
Path:
1. In the upper left, click the Add display
button.
1
2. In the Page settings group, click on the
None link.
3. In the Menu path field type
view/directory.
4. Click the Update button.
2
5. Click the Save button.
3
4
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
Style Options: Ex. 06 Create Employee Directory – Add to Menu
1
2
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. Go to Admin menu > Site building > Menus >
Primary links item and click the Add item tab
3
2. Path field = view/directory
3. Menu link title field = Directory
4. Parent item field = Our Special Ingredient
5. Weight field = -50
4
6. Click the Save button
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
Style Options: Ex. 06 Create Employee Directory – 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
68
Grouping & Sorting: Overview
Sorting and grouping can be a tricky thing when working with
data views. There are a few different elements in a view that can
affect the sort of items such as filters that are applied and the
order that the fields are added in.
In following exercise, we’ll add and configure a basic Equipment
Catalog view, focus on how to group the view based on its
taxonomy terms, and then sort the individual items within each
group.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
69
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Add New View – Now You Do It
Using the specifications below, create your own view using the Equipment nodes. These
instructions are also available in Ex. 07a of your lab materials.
Equipment Catalog view creation
Equipment Catalog view default specifications
Basic Settings
Go to Admin menu > Site building > Views > Add
Title = Equipment Catalog
Use Pager = Yes, full
Items per page = 10 (default)
Header = paste in HTML from Section Ex. 07b, Full HTML
Footer = paste in HTML from Section Ex. 07c, Full HTML
View name = equipment_catalog
View description = Kitchen equipment catalog
View tag = Equipment
View type = Node (default)
Fields
Click the Next button
Node = Title, erase Label
Content = select Image (field_equipment_image)
Label = select none
Format = select Image
In the Views UI, enter the specifications shown at
right
Filters
Node = check Published, check yes
Node = check Type, check Equipment
After all specifications are entered, click the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Result to Date
The Live Preview of the Equipment Catalog 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
71
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Add Page Display
First, a Page display should be created and
a Path set:
1. Click the Add display button
2. Name = Equipment Catalog Page
1
2
3. Path = view/equipment-catalog
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
72
Grouping & Sorting: Ex. 07 Create Equipment Catalog – 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 dropdown menu
2
3
3. Check Taxonomy: Term
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
73
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Configure Taxonomy Field
Now configure the Taxonomy field:
1
1. Remove the word Term from the
Label field
2. Check the Link this field to its
taxonomy page option
3. Click the Update button
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
74
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Live Preview
Looking at the Live Preview, the result still isn’t too impressive.
Setting the Style will help remedy this.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
75
Grouping & Sorting: Ex. 07 Create Equipment Catalog – 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. Click on the Unformatted element
1
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
76
Grouping & Sorting: Ex. 07 Create Equipment Catalog – 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. Click the Update button
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
77
Grouping & Sorting: Ex. 07 Create Equipment Catalog – 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. The groups aren’t in alphabetical order and
neither are the items within the groups.
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
78
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Add Sort Criteria
To sort this view by Taxonomy term, do
the following within the Sort criteria
group:
1
1.
2.
3.
4.
Click on the + button
In the Groups filter field, select Taxonomy
Check the Taxonomy:Term option
Click the Add button – this will open a
configuration panel
5. Leave the Sort order option at Ascending
6. Click the Update button
2
3
5
4
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
79
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Live Preview
Our groups are now in line, but if you notice, most of the items
within the groups are not. We need to add an additional level of
sorting.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
80
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Sort Sub-Group Items
To sort this view by Taxonomy term, do
the following within the Sort criteria
group:
1
1.
2.
3.
4.
Click on the + button
In the Groups filter field, select Node
Check the Node:Title option
Click the Add button – this will open a
configuration panel
5. Leave the Sort order option at Ascending
6. Click the Update button
2
3
5
4
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
81
Grouping & Sorting: Ex. 07 Create Equipment Catalog – Live Preview
Now things are looking as they should. Make sure you save this
view as you’ve put a lot of work into it.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
82
Grouping & Sorting: Ex. 07 Create Equipment Catalog – View to Date
Go to another tab in your browser and take a look at
the view in its page display.
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 play with the display a little bit to see how we
can improve it.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
83
Configuration Details: Overview
As you’ve probably witnessed by now, Views is full of different
configuration options. Virtually everything is configurable in
some way.
The following exercise will demonstrate some of the various
configurations that you might find useful.
We’ll also revisit ImageCache within Views, and make further use
of the ImageCache presets we configured back in the Generating
Custom Content Types workshop.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
84
Configuration Details: Ex. 08 Adjust Equipment Catalog – Exclude Field
If you notice, the view currently displays our
taxonomy terms both at the group level as well
as on each individual item. This is redundant.
Let’s exclude the display of the term on each
item by doing the following:
1. In the Fields group, click on Taxonomy: Term to
open its configuration panel.
2. In the Taxonomy: Term field configuration panel,
check the Exclude from display checkbox.
3. Click the Update button.
4. Note in the Live Preview how the term no longer
displays for each item but is still visible as a group
header.
1
2
4
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
85
Configuration Details: Ex. 08 Adjust Equipment Catalog – Apply ImageCache Preset
1
Remember the ImageCache presets we
created in the Generating Content Types
workshop? We can use those here in Views as
well. Let’s apply one to shrink up those images
a bit:
1. In the Fields group, click on Content: Image to
open its configuration panel.
2. In the Content: Image field configuration panel,
Format drop down box, select the 90x90-scalecrop image linked to node option.
3. Click the Update button.
4. The Live Preview will take a second to refresh.
After it does, note the smaller images – we now
have
more space to add an extra column.
4
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
86
Configuration Details: Ex. 08 Adjust Equipment Catalog – Add Column in Grid
1
To add an additional column in the grid, do
the following:
1. In the Basic settings group, click on the
Style: Grid cog button to open its
configuration panel.
2. In the Style options field configuration panel,
Number of columns field, change the
number to 4.
3. Click the Update button.
4. The Live Preview will display an extra
column. Note that if there is no content to
fill the column, it appears as a smaller,
empty cell.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
3
4
87
Configuration Details: Ex. 08 Adjust Equipment Catalog – Center Image
Now, let’s center the images in the
cells:
1
2
1. In the Fields group, click on Content:
Image to open its configuration panel.
2. In the Content: Image field
configuration panel, check the Rewrite
the output of this field option.
3. In the text area that appears, note the
token values that are provided
beneath the text area – we’re going to
use the [field_equipment_image_fid]
token.
4. Paste the code from Section Ex. 08 into
the Rewrite output Text field.
5. Click the Update button.
4
3
5
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
88
Configuration Details: Ex. 08 Adjust Equipment Catalog – Items Per Page
And, finally, we should increase the number
of items that can be shown on the page:
1
1. In the Basic settings group, click on Items per
page: 10 to open its configuration panel.
2. In the Items per page configuration panel,
change the 10 to 100.
3. Click the Update button.
4. Click the Save button.
2
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
89
Configuration Details: Ex. 08 Adjust Equipment Catalog – Completed
Return to the tab with your Equipment Catalog page display in it
and refresh the page.
Something to remember is that we’ve set it up so there are no blocks in the sidebars
on our admin pages, this includes the Views UI, so items in tables and grids will
spread out the entire available distance. We have blocks on our regular pages, so
the grid shrinks to the available space it has.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
90
Display Options: Overview
To date, we’ve only experimented with one very basic display
option, the Page display. Views is capable of outputting several
different display options, though:
• Attachment
• Block
• Date Browser
• Feed
• Page
In the following exercise, we’ll create a Block display from our
Equipment Catalog view and configure it so it only displays on an
Equipment node in the Cooking Companion.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
91
Display Options: Ex. 09 Create Equipment Node – Now You Do It
Using the specifications below, create a Book page node titled Equipment.
Go to your Cooking Companion parent
page, click the Add child page link, and add
the following data:
Title field = Equipment
Body field = paste in content from Section
09 of your lab materials. Upload image ex09.jpg into your equipment directory and
then embed it into your body content.
Input format option = Full HTML
After all specifications are entered, click the Save
button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
92
Display Options: Ex. 10 Create Views Block Display – Create Display
To create a Block display, just do the
following:
1. In the Views UI, choose Block from the
display drop down list.
3
2. Click the Add display button.
1
3. In the Basic settings group, click on Name:
Block.
2
4. In the Block: The name of this display
configuration panel that opens, name the
block Equipment Catalog Block.
5. Click the Update button.
6. Click the Save button
4
Now the block must be configured and
enabled.
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
93
Display Options: Ex. 10 Create Views Block Display – Locate Equipment Book Page Node ID
A little information is necessary on the way
to attaching the Equipment Catalog block.
We’ll want the Node ID of the Equipment
book page to set the Page Visibility of the
block.
1
3
1. Go to Admin menu > Site building > URL
aliases
2
2. In the Filter aliases search box type in
Equipment
4
3. Click the Filter button
4. The Equipment book page Node ID for the
example site is node/85
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
94
Display Options: Ex. 10 Create Views Block Display – Configure Equipment Catalog Block
1
To configure the Equipment Catalog block,
go to Admin menu > Site building > Blocks,
locate the Equipment Catalog Block and click
on its corresponding configure link. Within
the configuration panel, do the following:
1. In the Block title field, enter <none>
2. In the Page specific visibility settings, enter
your node id using a relative URL (node/#)
3. Click the Save block button
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
After redirection back to the Blocks main
page, enable the Equipment Catalog block
by placing it in the content region.
Remember to click the Save blocks button.
95
Display Options: Ex. 10 Create Views Block Display – Completed
Go to your Equipment node by clicking on the
Cooking Companion link in your primary links,
then clicking on Equipment in the Cooking
Companion block in the right sidebar.
Notice that the Equipment Catalog now
appears below the Equipment parent node, and
only below this node.
At the moment the view looks in a bit of a
disarray, but we’ll fix that in just a second…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
96
Views in Action: Overview
So we’ve spent a lot of time in Views and you’ve seen firsthand
how you can create a variety of different displays.
But there’s a bigger payoff when views are used than you might
initially realize.
Views are dynamic. Once you have a view set up, it just
automatically displays as you’ve set it up to.
Let’s take a minute to add a couple extra Equipment nodes and
see how our new Equipment Catalog block behaves.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
97
Views in Action: Ex. 11 Add New Equipment Nodes – Now You Do It
Using the text located in Section Ex. 11 and
the images from your …lab/ex-11-images
folder, add some additional Equipment
nodes to your site to test your new
Equipment Catalog block.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
98
Views in Action: Ex. 11 Add New Equipment Nodes – Result
Return back to your Equipment node, refresh it, and
take a look at the Equipment Catalog block.
This is the true beauty of Views. As new content is
added into the system, it is immediately, and
automatically, represented in the view as it’s
configured to.
When a site is properly constructed and configured,
users with minimal technical skills can simply log in to a
site, add content, and not have to worry about things
such as layout or menu administration.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
99
Summary
Quite a bit was covered today:
•
•
•
•
•
•
Views Defaults
Build Modes
Page & Block Displays
Style Options
How Views Interacts with CCK & Menus
Grouping & Sorting 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
100
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/views/training-materials
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
101