Drupal Training Series

1
Drupal Training Series

• How to Use Views

2
What Well 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

3
Getting Started

• As a reminder, to get to your personal
  development site go to
• http//drupaldev.cws.oregonstate.edu/training/ltyou
  rONIDnamegt/login
• From there, log in with your ONID information.
• After logging in, please open a second tab in
  your browser and go to WebTrain at
• http//oregonstate.edu/cws/webtrain/drupal-6/prese
  ntations-1
• and download the workshop materials to your
  desktop

4
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

5
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 its the birth date of something.
• Its 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 Paulings date of birth.
• This is the difference between data and
  information.

6
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.
• Its 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.

7
Data vs. Information Relational Database At Work

• Its been mentioned in past sessions that your
  Drupal site utilizes a very powerful relational
  database at its back-end. This doesnt mean much
  to most people, though, until its 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, youll 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.

8
Data Views Overview

• A view isnt just a Drupal term. Its 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 todays
  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 youre 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).

9
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, its 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

10
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.

11
Views Control Panel Overview

• The Views module can be intimidating to many who
  are new to it, so well 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, well focus on
  the List tab, Add tab, and the Views UI.

12
Views Control Panel Overview Views List Tab
Components

• To get to the Views list, go to Administer gt Site
  building gt Views
• 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.
• The bottom section of the Views list contains all
  of the views available on the site.
• Like Blocks, Views can be enabled and disabled.
  Enabled views are blue, disabled views are grey.

1
2
3
13
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
• 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.
• 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
• Clone
• Create a copy of a view which can then be used as
  a template
• Disable
• Disable a view

1
14
Views Control Panel Overview Add Tab Ex. 01
Enter Employee View Information

• Just like many other items that weve created so
  far, Views has an information panel as well.
  Lets add a view of our Employee content
• Click the Add tab.
• View name field employee
• Must be lowercase alphanumeric underscores only
• View description field A view of all Food for
  Thought Employees
• Provides information regarding what the view is
  for
• View tag field Employee
• Used to help sort views on the Views list
• View type option Node (default)
• A Node View type option is generally what is used
• Click the Next button

1
2
3
4
5
6
15
Views Control Panel Overview Views UI
Overview

• The Views UI looks quite complicated (and it can
  be), but were only going to be using a portion
  of it for right now
• 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.
• Fields group
• This group determines the data fields that will
  be used in your view. Some view styles do not
  use fields.
• Sort criteria group
• This group determines how the query result is
  sorted.
• Filters group
• This group determines the way content is
  filtered.
• 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.

5
3
1
4
2
16
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
• Name click on Defaults link
• This will open up a field at the bottom of the
  control panel.
• Display name field Employee Main View
• 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.

1
2
3
17
Views Control Panel Overview Views UI Ex. 02
Configuring View Defaults Basic Settings Title

• To add a Title to the view, do the following
• Title click on None link
• This will open up a field at the bottom of the
  control panel.
• Title field Food for Thought Employees
• 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.

1
2
3
18
Views Control Panel Overview Views UI Ex. 02
Configuring View Defaults Basic Settings Row
Style

• Now its time to set the Row Style this will
  get rid of the message that has been showing
• Row style click on Fields link
• This will open up an option group at the bottom
  of the control panel.
• Row style option Node
• Click the Update button
• This will open up another option group at the
  bottom of the control panel.
• Build mode Full node
• Click the Update button

1
2
4
3
5
19
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.
• Whats occurring is that weve told Views to show
  us nodes in Node view and it has responded.
• The thing is, we havent filtered any of these
  out, so Views is starting with the first node and
  just displaying them all.
• Now were going to work a bit with Filters, to
  sift through the content and extract only what we
  want namely the Employee nodes.

20
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
• Click on the button
• In the Groups filter field, select Node
• This will open a box at the bottom of the screen
• Find the Node Type option and check it
• Click the Add button
• This will open another box at the bottom of the
  screen
• From the Node type options, check Employee
• Click the Update button

1
5
2
6
3
4
21
Views Views UI Ex. 02 Configuring View
Defaults Basic Settings Now You Do It
Its always good practice to set the Published
filter. For views that will be available to the
general public, its 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
NodePublished Click the Add button Published
option check Yes Click the Update button
22
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. Lets create a Page
  display
• 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.
• 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.
• The message that displays is normal. It will go
  away after a path is set.

1
2
23
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
• Path click on None link
• 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 isnt necessary,
  though.
• Click the Update button
• Click the Save button to save the view

1
2
3
4
24
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/special-ingredient path at the end.
• Keep this tab open its a good way to flip-flop
  between your work environment and your results
  environment.

25
Views Views UI Ex. 04 Add Header

• Return to the tab with your Views UI in it. Now
  well add a few items to dress the view up,
  starting with a Header. To add a Header, do the
  following within the default settings
• Header click on the None link
• 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.
• Click the Update button
• Click the Save button to save the view

1
2
3
4
26
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 lets add a Footer

27
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
• Footer click on the None link
• Header 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.
• Input format option Full HTML
• Important! There are inline CSS styles used in
  this little code snippet.
• Click the Update button
• Click the Save button to save the view

1
2
3
4
5
28
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.
• Lets paginate the view to shorten things up a
  little bit.

29
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
• Items to display click on the 10 link
• Items to display field 1
• Click the Update button
• Youll notice immediately that only one node
  shows in the Live Preview with no way to view the
  other items. Were not quite done yetwe have to
  add a Pager.

1
2
3
30
Views Views UI Ex. 06 Pagination Set Pager

• To add a Pager to the display, do the following
• Use pager click on the No link
• Pager option Full Pager
• Click the Update button
• 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.

1
2
3
4
31
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.
• Lets go back to CCK and see what can be done
  about this.

32
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 well see in
  the following example where we will refine the
  Employee content type via CCK to assist the Views
  output.

33
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
  were going to revisit this.
• As a refresher, go to Administer gt Content
  management gt Content types gt Employee manage
  fields link
• Once within the Manage fields control panel,
  click on the Display fields tab.

1
2
34
Views CCK Refining CCK Element Display Ex 07
Adjust Field Label Visibility Exclude Fields

• The first thing well do is exclude some fields
  that we dont really need on this particular
  view
• First name exclude, Teaser Full
• 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.
• Department exclude, Teaser Full
• Important! There are inline CSS styles used in
  this little code snippet.
• E-mail exclude, Teaser Full
• Phone exclude, Teaser Full

1
2
3
4
5
35
Views CCK Refining CCK Element Display Ex 07
Adjust Field Label Visibility Hide Label
Field

• And, to finish off, well hide the Experience
  fields label because the information in this
  field is fairly obvious
• Experience label field ltHiddengt
• Experience teaser field ltHiddengt
• Click the Save button

It may seem as if were undoing a good part of
what our custom content type was built for but
were not. CCK and Views, together, can do some
very interesting things.
1
2
3
36
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, well focus on the parts of the
  page that best describe the employee.

37
Build Modes Overview

• Up to this point, weve been using what is known
  as a Full Node Build Mode. Its 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
• Well 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.

38
Build Modes Full Node v. Teaser Ex 08 Teaser
Build Mode

• To utilize the Teaser build mode, return to the
  browser tab with your Views UI in it and do the
  following
• In the Basic settings group, click on the little
  cog button next to the Row style item to open up
  the Row style options
• Build mode option Teaser
• Click the Update button
• 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.

1
2
3
4
39
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 thats present on the Full node view.
• Enough space has been saved that we can actually
  put a few more items on this page.

40
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
• Items to display click on the 1 link
• Items to display field 5
• Click the Update button
• 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.

1
2
3
4
41
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.

42
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.

43
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
• Click on the Page display
• In the Page settings group, click on the No
  menu link
• Type option Normal menu entry
• Title field Our Special Ingredient
• Description field About the Food for Thought
  employees
• Menu field Primary Links
• Weight field -48
• Click the Update button
• Click the Save button to save the view

1
2
4
3
5
6
7
8
9
44
Field Row Style Overview

• Up to this point, weve 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, well work on an exercise that builds
  an Employee Contact list using a Field Row style
  in a table format.

45
Field Row Style Ex 10 Create Employee Contact
List Add View

• Well need to create a brand new view, so click
  on the Add tab from your Views UI to initiate the
  new view.
• View name field contact_employee
• View description field An employee contact
  list
• View tag field Employee Contact List
• View type option Node default
• Click the Next button

1
2
3
4
5
46
Field Row Style Ex 10 Create Employee Contact
List Set Defaults Set Title

• To add a Title to the view, do the following
• Title click on None link
• Title field Employee Contact List
• 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.

1
2
3
47
Field Row Style Ex 10 Create Employee Contact
List Set Defaults Add First Last Name Fields

• Now to add some fields.
• 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
• Check the Link the field to its node option
• Click the Update button
• Click the Save button then repeat this process
  for the Last Name field

1
2
3
5
4
6
7
48
Field Row Style Ex 10 Create Employee Contact
List Set Defaults Add Position Field
1

• The Position field is a little different as this
  is actually a Taxonomy term.
• In the Fields group, click the button
• In the Groups filter field, select Taxonomy
• Check the Taxonomy field option
• Click the Add button
• This will open another configuration panel under
  the main Views UI
• Label field Position
• Click the Update button
• Click the Save button

5
2
3
6
7
4
49
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.
• Its 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.

50
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
• Click on the button
• In the Groups filter field, select Node
• This will open a box at the bottom of the screen
• Find the Node Type option and check it
• Click the Add button
• This will open another box at the bottom of the
  screen
• From the Node type options, check Employee
• Click the Update button
• Click the Save button

1
2
5
6
7
3
4
51
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. Lets turn this into a Table Style view.

52
Field Row Style Ex 10 Create Employee Contact
List Set Defaults Table Style

• To display this view using a Table Style, do the
  following
• In the Basic settings group, click on the
  Unformatted link.
• Style option Table
• 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.

1
2
3
53
Field Row Style Ex 10 Create Employee Contact
List 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
• In the First name Column field, select Last name
• In the Last name Separator field, add a comma
  followed by one space
• Check the Sortable option for both available
  checkboxes
• In the Default sort column, check the radio
  button in the Last name row
• Click the Update button

1
4
2
3
4
54
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 theyre initially added.
• Its simple to fix, well just reorder the
  fields.

55
Field Row Style Ex 10 Create Employee Contact
List Set Defaults Reorder Fields

• To reorder fields in a view, do the following
• In the Fields group, click on the ?? button
• Drag the Last name field up over the First name
  field
• Click the Update button
• Click the Save button

1
2
56
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 its time to add the final columns.

57
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
NodePublished filter.
Fields group Click the button Groups filter
field Content Content option check
ContentDepartment Click the Add button Click
the Update button (no extra configurations) Repeat
this process for both the Phone and E-mail
fields Click the Save button
Filters group Click the button Groups filter
field Node Node option check
NodePublished Click the Add button Published
option check Yes Click the Update button
58
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.

59
Field Row Style Ex 10 Create Employee Contact
List Create Page Display

• To create a Page display and give it a Path
• In the upper left, click the Add display button
• In the Page settings group, click on the None
  link
• Menu path field view/contact-employee
• Click the Update button
• Click the Save button

1
2
60
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 well have to do it via the
  standard method
• Go to Administer gt Site building gt Menus gt
  Primary links item and click the Add item tab
• Path field view/contact-employee
• Menu link title field Employee Contact List
• Parent item field Our Special Ingredient
• Weight field -49
• Click the Save button

1
2
3
4
5
6
61
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.
• Lets adjust the configuration on the right side
  blocks so they only show on the front page.

62
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 gt Site
building gt 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
ltfrontgt Click the Save block button Repeat on all
other blocks in the Right Sidebar with the
exception of the Book navigation block.
63
Now You Do It Create Equipment View
Using the specifications below, create your own
view using the Equipment nodes.
Equipment view creation Go to Administer gt Site
building gt Views Click the Add tab View name
equipment View description Kitchen equipment
list View tag Equipment View type Node
(default) Click the Next button In the Views UI,
enter the specifications shown at right After all
specifications are entered, click the Save button

• Equipment view default specifications
• Basic Settings
• 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
• Fields
• Node Title, erase Label, Link this field to its
  node
• Content Image (field_equipment_image)
• Label none
• Format Image
• Filters
• Node Published, yes
• Node Type, Equipment

64
Sorting Grouping Overview

• The Live Preview of the Equipment List view isnt
  very impressive, yet. Through the use of Style,
  Sort criteria, and Taxonomy, though, well have a
  nice looking and highly functional view in no
  time.

65
Sorting Grouping Ex 11 Refine Equipment List
View Add Page Display

• First, a Page display should be created and a
  Path set.
• Click the Add display button
• Name Equipment List
• Path view/equipment-list
• Click the Save button
• Now you can view the page as its being developed
  in another window if desired.

2
1
3
4
66
Sorting Grouping Ex 11 Refine Equipment List
View Add Taxonomy Field
1

• To add a Taxonomy field to this view, which well
  use to group our Equipment items on, do the
  following
• Click the button in the Fields group
• Select Taxonomy from the Groups drop-down menu
• Check Taxonomy Term
• Click the Add button
• After selecting and adding the field, it must be
  configured.

2
3
4
67
Sorting Grouping Ex 11 Refine Equipment List
View Configure Taxonomy Field

• Now configure the Taxonomy field
• Remove the word Term from the Label field
• Check the Link this field to its taxonomy page
  option
• Click the Update button
• Click the Save button
• The result still isnt too impressive.
• Setting the Style will help remedy this.

1
2
3
4
68
Sorting Grouping Ex 11 Refine Equipment List
View Adding the Grid Style

• Lets take a look at the Grid style. To add it
  to the view, do the following, within the Basic
  Settings group
• Click on the Unformatted link.
• Style option Grid
• Click the Update button
• After clicking the Update button, the
  configuration panel will appear.

1
2
3
69
Sorting Grouping Ex 11 Refine Equipment List
View Configuring the Grid Style

• Well set the view so that it displays according
  to the Taxonomy group it belongs in by doing the
  following
• Grouping field drop down Taxonomy Term
• Number of columns field 3
• Alignment option Horizontal
• Click the Update button
• Click the Save button

1
2
3
4
5
70
Sorting Grouping Ex 11 Refine Equipment List
View Preview to Date

• Looking at the Live Preview might prove to be a
  little confusing because weve 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.

71
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
• Click on the button
• In the Groups filter field, select Taxonomy
• Check the TaxonomyTerm option
• Click the Add button this will open a
  configuration panel
• Leave the Sort order option at Ascending
• Click the Update button
• Click the Save button

1
2
3
5
6
4
7
72
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.
• Lets condense the view a little bit by removing
  the images and individual tags.

73
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
74
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
• In the Views UI, choose Block from the display
  drop down list
• Click the Add display button
• In the Basic settings group, name the block
  Equipment List Block
• Click the Save button

3
1
2
4
75
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. Well want
  the Node ID of the Equipment book page to set the
  Page Visibility of the block.
• Go to Administer gt Site building gt URL aliases
• In the Filter aliases search box type in
  Equipment
• Click the Filter button
• 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

1
3
2
4
76
Block Display Ex 12 Create and Enable A Views
Block Display Configure Equipment List Block

• To configure the Equipment List block, go to
  Administer gt Site building gt Blocks, locate the
  Equipment List Block and click on its
  corresponding configure link. Within the
  configuration panel, do the following
• In the Page specific visibility settings, enter
  your node id using a relative URL (node/)
• 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.
• Remember to click the Save blocks button.

1
2
77
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.

78
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 isnt all there is to Views. You
  may have noticed that we havent 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, youre strongly encouraged to go
  into the Equipment and Employee views and
  experiment with different styles, displays, and
  filters.

79
Conclusion

• This completes the OSU Drupal 6 How to Use Views
  Tutorial. For additional tutorials, please visit
  WebTrain, the CWS web publishing training site,
  at
• http//oregonstate.edu/cws/webtrain
• To submit a Help Ticket or make a Site Request
  on-line, go to
• http//oregonstate.edu/cws/contact