Creating Views
The Views module allows site administrators to sort and display content created on the site. The views module is incredibly flexible, but initially, the process of creating views can seem daunting.
In this section, we will examine the basic steps that you will follow as you create different views on your site. Although each view will vary depending on what you are trying to show, the steps outlined here provide the basis for getting started.
To create a view, follow these steps:
- Add a view: The View type determines what type of data will be shown in the view. The next steps determine how it will be displayed.
- Set the defaults
- Add fields to the view
- Add filters
- Add arguments
- Set style
- Set additional configuration options
- Add a display type
- Define multiple display types (optional)
- Override the default values (optional)
In this example, we will create a view that displays bookmarks, and all terms connected with those bookmarks.
Step 1: Add a View
To add a view, click the Administer | Site Building | Views link, or navigate to admin/build/views:
The Views administration page, shown in the preceding screenshot, provides tools for finding, creating, and organizing views. Item 1 provides the links for Listing, Adding, and Importing views. Item 2 provides options for sorting and organizing views. The fieldset indicated by Item 3 lists and describes the different views saved on the site.
Click the Add tab; this brings you to admin/build/views/add.
This screen gives you four options:
- View name: This is the name of the view, and can only contain letters, numbers, and underscores.
- View description: This field holds a brief description that is displayed on the view's administrative page.
- View tag: This optional value allows you to categorize your views using tags. This can be useful on a site where you are using a lot of views.
- View type: You can use views to display different collections of information; the view type specifies what type of data you'll be collecting.
The most significant setting on this screen is the View type, as this determines what type of information will be shown in the view. Although views can be used to collect and display a broad array of information, in this book we will focus largely on using views to display nodes, or content, created by site members.
For this view, as shown in the preceding screenshot, our settings are as follows:
- View name: bookmarks_all
- View description: All bookmarks created on the site
- View tag: public_view
- View type: Node
Click the Next button; this brings you to the Edit view screen, as shown in the next screenshot.
Step 2: Set the Defaults
The default view holds the Basic settings for the view. The settings stored in the defaults are used in Step 3, where we will add a Display type.
The initial Edit view screen allows us to edit the default values for the view.
The process of setting the default values for the view requires:
- Adding Fields, indicated by Item a
- Adding Filters, indicated by Item b
- Adding Arguments, indicated by Item c (optional)
- Setting the Style, indicated by Item d (optional)
- Additional configuration (optional), an overview of which is given below.
To add fields to your view, click the + icon next to the Fields option, as indicated by Item 1 in the following screenshot:
This brings up the list of available fields. These fields can be organized by group, as shown by Item 2 in the preceding screenshot, and also in the following screenshot:
You can select a specific group to limit the number of fields you see, thus making the field list easier to navigate. For our example—creating a view showing all saved bookmarks—we will select Node fields first, Content fields second, and Taxonomy fields third.
For Node fields, select the Node: Title and the Node: Updated/commented date field, as shown in the following screenshot:
Once you have selected these fields, select Content from the Groups drop-down menu.
Content fields list all fields that have been added using CCK-related modules. In this site, the only field we have added so far is the Link field for the Bookmark. As shown in the following screenshot, this is the only option we have under the Content option:
Select the Content; Link: Link to Source field, and then select Taxonomy from the Groups drop-down menu.
Select Taxonomy: All Terms, as shown in the following screenshot:
As this is the last field we need to add, click the Add button. This will automatically bring us to the wizard that walks us through configuring some display options for these fields.
Once you choose to add fields to your view, you will automatically be prompted to configure your newly-added fields.
The first field we are presented with is the Link: Link to Source field, as shown in the following screenshot:
In the Format drop-down menu, we select the URL, as link option. This specifies that the URL will work as a link to the stored location. For the Label, we will use the same value we created when we added the node type earlier in this chapter.
Click the Update button to configure the next field type.
The second field we are presented with is the Node: Title field, as shown in the following screenshot:
For this field, we need to select the Link this field to its node option. This option provides a link back to the original bookmark.
Click the Update button to configure the next field type.
The third field we are presented with is the Node: Updated/commented date field, as shown in the following screenshot:
For this field, we do not need to alter the default values.
Click the Update button to configure the next node type.
The fourth (and final) field we are presented with is the Taxonomy: All terms field, as shown in the following screenshot:
When configuring this field, we will make the following changes from the default values. The preceding screen is a screenshot after these changes have been made.
- The Label is Keywords; this field will show terms from the Keywords vocabulary;
- The Empty list text will read No terms available for this post.
- Select Limit terms by vocabulary, and select the Keywords vocabulary.
Click the Update button to finish configuring these fields.
Then, click the Rearrange icon as shown in the following screenshot. This allows us to re-order the fields within the view.
Click the Update button to save the changes.
Once we have finished configuring the fields for our views, you can see the Live preview of the view, which includes some technical information about the view, including the actual query used to build it, and how long it took to render.
If, however, you look at the Live preview screen as shown in the preceding screenshot, you can see that several posts returned in this view do not show any information for the Link to Source field. As this view is currently configured, it returns all content types. In the next step, we will apply a filter to this view so that the view will only display Bookmarks.
To add filters to the view:
- Click the Add filter icon, as indicated by Item 1 in the preceding screenshot.
- From the Groups drop-down menu, select Node, as shown by Item 2.
- Select Node: Published or admin, as shown by Item 3.
- Select Node: Type, as shown by Item 4.
Click the Add button to save these options; this will bring you to a wizard that walks you through the options for configuring your filters.
As shown in the preceding screenshot, filters can be exposed to the end user. An exposed filter allows site members to select options within the filter. This allows the view to be more dynamic. In some cases this is useful, but in others cases, it's not necessary. In this example, where we are creating a view that shows all bookmarks saved in the view, we do not need to expose any filters.
The first filter presented is Node: Published or admin. No options need to be set for this filter; click the Update button to configure the next filter.
The next filter presented to us is the Node: Type filter, as seen in the following screenshot:
We set the filter to only show Bookmark, and then click the Update button. You can see the changes to the view by looking at the Live preview pane, shown in the following screenshot:
The preceding screenshot shows a Live preview of the view, with filters enabled. Compare this form with the first screenshot under section Adding Filters, which shows the same view with no filters.
Arguments allow you to filter the content returned in a view through a value in the URL; for example, using arguments you can filter for content created by a specific user based on their username—http://yoursite.org/your-custom-view/harry would give you all posts by user harry, and http://yoursite.org/your-custom-view/tom would give you all posts by user tom.
Adding arguments is not necessary for all views, and views can function perfectly well without arguments. Used effectively, however, arguments can add a level of flexibility not possible with filters. Arguments are covered in Chapter 13: Tracking Student Progress.
The Style settings allow you to specify how the view will be displayed on the page. The default style is unformatted; this allows for the view to be adjusted via CSS. In this example, we want to create a table view.
To get started, click the Unformatted link next to Style in the Basic settings section, as shown in the following screenshot by Item 1:
Then, select the Table option, and click the Update button. This brings you to the Style options screen as shown in the following screenshot:
As shown in the preceding screenshot by Item 1, you need to select Default sort for the Updated/commented date, and select Descending for Default sort order. This will show the most recently-added or commented on bookmarks at the top of the table.
You also want to Enable Drupal style "sticky" table headers (Javascript). This setting makes it such that the heading of the table scrolls down the page if the list goes longer than one screen.
Click the Update button to save your settings.
To see the effect of the new settings, look at the Live preview pane shown in the following screenshot:
At this point, the view is functionally complete. However, there are some additional configuration options that can be used to fine-tune and enhance views.
As is probably clear at this point, the Views module exposes an enormous amount of functionality that can be accessed via different configuration options. Although views can function perfectly well without adjusting these last few settings, these options help you to create views that make more sense for people using your site.
Item 1, Title: The Title lets you set a title for your view. For this example view, we will set the title to All Bookmarks.
Item 2, Items to display: This setting lets you adjust the number of items to display on a single page. The default is 10; for table views, you can show more content by setting it higher. For this example view, we will set it to 30.
Item 3, Access: This setting allows you to control access to the view based on user roles, or user permissions.
Item 4, Header and Footer: These settings allow you to set headers and footers for your view.
Item 5, Empty text: This setting allows you to set a message if the view does not return any data. Setting empty text is recommended when you expose filters to end users, as user can potentially set filters that do not return any data.
Step 3: Add a Display Type
When you add a display type to your view, you provide a method of displaying the data returned by your view. The most commonly-used display types are pages and blocks. Any display types added to a view inherit the default settings; however, display types can override the default settings if needed. In this way, for example, we can create a page display type that shows full nodes, and a block display type that shows a table view of just the title.
This section covers adding display types, and overriding the values set in the default display.
To add a Display type, select a specific type from the drop-down menu, and click the Add display button. The most commonly used options are Page and Block, and the different options will be discussed throughout the text as they become relevant.
To begin, we will add a Page display by selecting Page from the drop-down menu and clicking the Add display button.
As shown in the following screenshot, after adding a Page display, you are presented with a status message and some specific options for configuring your display.
As the status message in the preceding screenshot indicates, a Page display requires a path, which needs to be set from the Page settings option.
To set the path, click the link in Page settings (shown by Item 1 in the following screenshot), and then specify the path (shown by Item 2 in the following screenshot):
For this example, set the path to bookmarks/all—this will cause the page to be visible at http://yoursite.org/bookmarks/all.
Click the Update button to save the path.
The same default view can be reused to create multiple display types. In this example, we will create a Block display. This will create a Block that we can then enable via the Administer | Site building | Blocks link, or via the admin/build/block page.
Note
Blocks are covered in more detail in Chapter14 : Theming and User Interface Design.
To emphasize: the block we will create in this section will not be visible until we enable it via the admin/build/block page.
To add a Block display, select Block from the drop-down menu, and click the Add display button, shown by Item 1 in the following screenshot:
For the next step, we need to remove some fields from the block view.
To remove fields, click the rearrange icon, shown by Item 2 in the preceding screenshot.
This will show the options seen in the following screenshot:
First, click the Override button as indicated by Item 1; this sets specific values for the block display separate from the Default display. Then, remove the Node: Update/commented date and the Taxonomy: All terms Keywords fields by clicking the icons indicated by Item 2.
A successful edit will look like the following screenshot:
Click the Update button to save your changes.
For the final step in editing the Block display, we will edit the Items to display and the More link options as shown by Item 3 in the initial Edit View screenshot above.
In order to minimize the size of the block, we will set the Items to display to 5, and have the block display a More link that points to the page view. These settings will display the five most recent bookmarks and a link to the page that displays all stored bookmarks.
To start, click the link next to Items to display. This brings up the options shown in the following screenshot:
Click the Override button to set a different value for the block display. This brings up the admin screen seen in the following screenshot:
As you can see in the preceding screenshot by Item 1, after you elect to override the default settings the Override button switches to a Use default button. Once you have elected to override the default values, set the Items to display to 5, as shown by Item 2.
Click the Update button to save your changes.
For the final step, we will add a More link to the block. This way, if there are more than five bookmarks saved, the block will link to the all bookmarks page.
To add the link, click the link as shown by Item 1 in the following screenshot:
As we did earlier, click the Override button as shown by Item 2. Then, select the option Create more link as shown by Item 3, and click the Update button to save your changes.
Once you have set your defaults and specified the view display, you need to do the most important thing: save the view. None of the changes, settings, or configuration options are permanently stored until you click the Save button. When you are building a view, you should get in the habit of regularly saving the view and then returning to it. This ensures that you don't lose any work.
Creating Views: A Summary
The Views module exposes an incredible range of functionality. At first glance, the amount of options exposed by views can seem overwhelming. At its core, though, using the views module involves three central steps:
- Add a view
- Set up the default view, including adding fields, filters, and arguments
- Add display types