1. This work is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 3.0 United States LicenseCreative Commons Attribution- NonCommercial-ShareAlike 3.0 United States License Drupal Training Series Foundations for OSU Drupal 6 205: How to Use Views

2. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 2 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 Views Block Display Views in Action Overview Ex. 10 Add New Equipment Nodes Summary

3. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 3 Getting Started As a reminder, to get to your personal development site go to: http://drupaldev.cws.oregonstate.edu/training/ /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.

4. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 An Equipment book page should be added to your Cooking Companion book

5. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 5 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.

6. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 6 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.

7. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 7 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/glossaryhttp://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.

8. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 8 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).

9. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 9 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

10. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 10 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.

11. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 11 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.

12. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 12 Views Basics: Control Panel Overview – Views List Tab – Components To get to the Views list, go to Admin menu > 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. 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. 1 2 3

13. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 13 Views Basics: Control Panel Overview – Views List Tab – Basic Information & Tools 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 – Clone Create a copy of a view which can then be used as a template – Disable Disable a view 1 2

14. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 14 Views Basics: Control Panel Overview – Ex. 01 Add People View 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 Must be lowercase alphanumeric & underscores only 3. View description field = A view of all Food for Thought people Provides information regarding what the view is for 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 1 2 3 4 5 6

15. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 15 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. 2. Fields group 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. 1 2 3 4 5

16. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 16 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.

17. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 17 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 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. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 18 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 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 Views Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Row Style 1 2 3 4 5

19. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 19 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.

20. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 20 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 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 Views Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Filters 1 2 3 4 5 6

21. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 21 Views Basics: Views UI – Ex. 02 Configure People View – Basic Settings – Now You Do It 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 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.

22. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 22 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.

23. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 23 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.

24. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 24 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 it 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. Be patient with this and do not 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. 1 2

25. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 25 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 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 4. Click the Save button to save the view 1 2 3 4

26. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 26 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 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.

27. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 27 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. Header = click on the None link 2. Header text area = ex-02.txt Paste in the Header HTML code from Section Ex. 02a. 3. Set the Input format to Full HTML 4.Click the Update button 5. Click the Save button to save the view 1 2 3 4 5

28. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 28 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…

29. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 29 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. 3. Input format option = Full HTML Important! There are inline CSS styles used in this little code snippet. 4.Click the Update button 5.Click the Save button to save the view 1 2 3 4 5

30. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 30 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.

31. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 31 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 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. 1 2 3

32. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 32 Views Basics: Views UI – Ex. 02 Configure People View – Set Pager 1 2 To add a Pager to the display, do the following: 1. Use pager = click on the No link 2. Pager option = Full Pager 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. 3 4

33. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 33 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.

34. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 34 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.

35. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 35 Views & CCK: Ex. 03 Adjust Display Via CCK – Field Manager – Reposition Fields 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. 1 2 3

36. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 36 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. 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. 1 2 3 4

37. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 37 Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Non-Grouped Items Set the non-grouped items as shown below.

38. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 38 Views & CCK: Ex. 03 Adjust Display Via CCK – Display Manager – Contact Info Group Items Set the Contact Info group items as shown below.

39. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 39 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.

40. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 40 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.

41. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 41 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.

42. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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 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. 1 2 3 4

43. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 43 Build Modes: Ex. 04 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.

44. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 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. 1 2 3 4

45. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 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.

46. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 display the full-sized image.

47. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

48. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 3. Type option = Normal menu entry 4. Title field = Our Special Ingredient 5. Description field = About the Food for Thought employees 6. Menu field = Primary Links 7. Weight field = -48 8. Click the Update button 9. Click the Save button to save the view 1 2 3 4 5 6 7 8 9

49. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 49 Views & Menus: Ex. 05 Add Menu Item From Views UI – Completed Looking directly up on your screen, you’ll see the new menu addition.

50. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

51. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 51 Style Options: Ex. 06 Create Employee Directory – Add View 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 = directory 2. View description field = An employee directory. 3. View tag field = Directory 4. View type option = Node default 5. Click the Next button 1 2 3 4 5

52. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 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. 1 2 3

53. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 53 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 5.Check the Link the field to its node option 6.Click the Update button Style Options: Ex. 06 Create Employee Directory – Set Defaults – Add First & Last Name Fields 1 2 3 4 5 6

54. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 54 Style Options: Ex. 06 Create Employee Directory – Set Defaults – Add Position Field 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 This will open another configuration panel under the main Views UI 5. Click the Update button 1 2 3 4 6 5

55. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 55 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.

56. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 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 1 2 3 4 5 6

57. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

58. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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. 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. 1 2 3

59. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.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 1 2 3 4 5 6

60. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 60 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.

61. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.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 1 2 3

62. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

63. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 63 Style Options: Ex. 06 Create Employee Directory – Set Defaults – Now You Do It Fields group Click the + button Groups filter field = Content Content option = check Content:Department Click the Add button Click the Update button (no extra configurations) Repeat this process for both the Email and Office Phonel fields 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. 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

64. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

65. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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. 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. 5.Click the Save button. 1 2 3 4 5

66. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 66 Style Options: Ex. 06 Create Employee Directory – 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. Go to Admin menu > Site building > Menus > Primary links item and click the Add item tab 2. Path field = view/directory 3. Menu link title field = Directory 4. Parent item field = Our Special Ingredient 5. Weight field = -50 6. Click the Save button 1 2 3 4 5 6

67. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

68. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

69. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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. Equipment Catalog view creation Go to Admin menu > Site building > Views > Add View name = equipment_catalog View description = Kitchen equipment catalog View tag = Equipment Catalog View type = Node (default) Click the Next button In the Views UI, enter the specifications shown at right Equipment Catalog view default specifications Basic Settings Title = Equipment Catalog Use Pager = Yes, full Items to Display = 10 (default) Header = paste in HTML from Section Ex. 07a, Full HTML Footer = paste in HTML from Section Ex. 07b, 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 After all specifications are entered, click the Save button

70. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

71. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 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. 1 2 3 4

72. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 72 Grouping & Sorting: Ex. 07 Create Equipment Catalog – Add Taxonomy Field 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 3.Check Taxonomy: Term 4.Click the Add button After selecting and adding the field, it must be configured. 1 2 3 4

73. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 73 Grouping & Sorting: Ex. 07 Create Equipment Catalog – Configure Taxonomy Field Now configure the Taxonomy field: 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 1 2 3

74. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

75. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 link. 2. Style option = Grid 3. Click the Update button After clicking the Update button, the configuration panel will appear. 1 2 3

76. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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

77. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

78. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 78 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 Grouping & Sorting: Ex. 07 Create Equipment Catalog – Add Sort Criteria 1 2 3 4 5 6

79. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

80. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 80 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 Node 3.Check the Node:Title 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 Grouping & Sorting: Ex. 07 Create Equipment Catalog – Sort Sub-Group Items 1 2 3 4 5 6

81. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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. You may now start recognizing that there are sub-groups within the main groups. For example, within utensils, we have knives and a lobster cracker. If you wanted to create an extra level of sorting, how do you think you would go about doing this?

82. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

83. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 83 Configuration Details: Overview As you’ve probably witnessed by now, Views is full of different configuration options. Virtually everything in 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.

84. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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. 4 1 2 3

85. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 85 Configuration Details: Ex. 08 Adjust Equipment Catalog – Apply ImageCache Preset 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-fft- people 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. 1 2 3 4

86. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 86 Configuration Details: Ex. 08 Adjust Equipment Catalog – Add Column in Grid 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. 1 2 3 4

87. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 87 Configuration Details: Ex. 08 Adjust Equipment Catalog – Center Image Now, let’s center the images in the cells: 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 – copy the [field_equipment_image_fid] token and paste it into the text area. 4.Surround the token with div HTML tags at the beginning of the token and at the end of the token. 5.Click the Update button. 1 2 3 4 5

88. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.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. 1 2 3 4

89. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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.

90. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://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 our Equipment node in the Cooking Companion.

91. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 91 Display Options: Ex. 09 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. 2.Click the Add display button. 3.In the Basic settings group, click on Name: Block. 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 Now the block must be configured and enabled. 1 2 3 4 5 6

92. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 92 Display Options: Ex. 09 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.Go to Admin menu > Site building > URL aliases 2.In the Filter aliases search box type in Equipment 3.Click the Filter button 4.The Equipment book page Node ID for the example site is node/55 Note: the Node ID that your Equipment page has will probably differ from the one shown 1 2 3 4

93. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 93 Display Options: Ex. 09 Create Views Block Display – Configure Equipment Catalog Block 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 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 Catalog block by placing it in the post_content group. Remember to click the Save blocks button. 1 2

94. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 94 Display Options: Ex. 09 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.

95. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 95 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.

96. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 96 Views in Action: Ex. 10 Add New Equipment Nodes – Now You Do It Using the text located in Section Ex. 10 and the images from your …lab/ex-10-images folder, add some additional Equipment nodes to your site to test your new Equipment Catalog block.

97. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 97 Views in Action: Ex. 10 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.

98. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 98 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.

99. Provided by Central Web Services 541-737-1189 http://oregonstate.edu/cwshttp://oregonstate.edu/cws 99 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