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 and follow these steps:
- Describe the view.
- Select the type of data and filters.
- Select a display type.
- Set display type options.
- Set the display format.
- Edit the view and follow these steps:
- Add fields.
- Add/edit filters.
- Add/edit contextual filters (optional).
- Edit display format (optional).
- Set additional configuration options (optional).
- Define multiple display types (optional) and follow these steps:
- Override the default values (optional).
In this example, we will create a view that displays bookmarks, and all taxonomy terms connected with those bookmarks.
Step 1 – adding a view
To add a view, click on Structure | Views link or navigate to admin/structure/views:
The Views administration page, shown in the preceding screenshot, provides tools for finding, creating, and organizing views. The first marked item provides the links for adding and importing views. The field set indicated by the second marked item lists and describes the different views saved on the site, as well as provides a way to sort the views on the site.
Click on the Add new view link; this brings you to admin/structure/views/add.
Step 1 (a) – describing the view
The section a on this screen is the name of the view and can only contain letters, numbers, and underscores. The optional Description field holds a brief description that is displayed on the view's administrative page.
Step 1 (b) – selecting the type of data and filter
You can use views to display different collections of information; the view type (section b) 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.
Step 1 (c) – selecting a display type
The sections c and f allow you to choose a display type for the view. A page display type allows you to display all your data on a full page on the site, while a block display type allows you to create a block of information from the view that can be placed in a region of the site. Check the box next to Create a page for now, and we will add a block to the view later.
Step 1 (d) – setting display type options
The display type options allow you to set options that will help the data make more sense to your users.
The following is the description of the sections mentioned in the previous screenshot:
- Title: This section lets you set a title for your view. For this example view, we will set the title to
All Bookmarks. - Path: A page display type requires a path where you can see the page on the site. For this example, set the path to
bookmarks/all, which will cause the page to be visible athttp://yoursite.org/bookmarks/all. - 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. - Use a pager: A pager allows you to show multiple pages of data and controls if the data shown by the view are more than the number set under Items to display. We will leave this option unchecked for now.
- Create a menu link: This option allows you to easily add the page created by the view to a menu on the site. The menus will be covered in Chapter 14, Theming and User Interface Design. Leave this option unchecked for now.
- Include an RSS feed: Really Simple Syndication (RSS) allows other websites and programs to access the data from your site in a standardized way. Since this is more of an advanced option, we will leave it unchecked for now.
Step 1 (e) – setting the display format
The Display format settings allow you to specify how the view will be displayed on the page. The default style is an unformatted list; this allows for the view to be adjusted via CSS. In this example, we want to create a table view by following these steps:
- Choose Table from the select box under Display format.
- Click on Continue & edit to continue creating the view.
Step 2 – editing the view
The Page display type now holds the defaults for the view. The settings stored in the defaults are used in step 3, where we will add another Display type. The initial screen allows us to edit the default values for the view.
Step 2 (a) – adding fields
To add fields to your view, click on the add link next to the FIELDS option, as indicated by section 1 in the following screenshot:
This brings up the list of available fields. These fields can be organized by group, as shown 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—all of our fields will be under the Content group.
The Views module automatically selected the Content: Title field when we selected the Table display format.
Add the Content: Updated date field as shown in the following screenshot:
Select the Content: Link to source field as shown in the following screenshot:
Select the Content: All taxonomy terms field as shown in the following screenshot:
As this is the last field we need to add, click on the Apply (all displays) button. This will automatically bring us to the wizard that walks us through configuring some display options for these fields.
Configuring fields
Once you choose to add fields to your view, you will automatically be prompted to configure your newly added fields. The fields will be presented to you alphabetically based on the field group. After you have configured them, you will be able to order them as you want, as described later in this section.
The first field we are presented with is the Content: All taxonomy 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:
- Set Label to Keywords; this field will show terms from the Keywords vocabulary
- Empty list text under the No Results Behavior link will read No terms available for this post
- Limit terms by vocabulary and the Keywords vocabulary is selected
Then, click on Apply (all displays) to continue. The second field we are presented with is the Content: Link to source field, as shown in the following screenshot:
In the Formatter 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 Label, we will use the same value we created when we added the node type earlier in this chapter.
Click on the Apply (all displays) 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, change Date format to Short format.
Click on the Apply (all displays) button to finish configuring these fields.
Then, click on the Rearrange icon as shown in the following screenshot. This allows us to reorder the fields within the view:
Reorder the fields as shown in preceding screenshot, then click on the Apply (all displays) button to save the changes.
Step 2 (b) – adding/editing filters
Once we have finished configuring the fields for our views, you can see the Auto preview option of the view.
Since we added all our necessary filters on the first screen, we don't need to add or change any filters now. Adding filters will be covered again in Chapter 4, Creating a Teacher Blog and Chapter 6, Creating the Student Blog.
Step 2 (c) – adding/editing contextual filters (optional)
The contextual filters 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 that is not possible with the filters. The arguments are covered in Chapter 13, Tracking Student Progress.
Step 2 (d) – editing display format (optional)
Although we set the display format on the first screen, we need to change some of the default options for our example view.
Click on the Settings link next to Table in the Format section, as shown in the following screenshot by section 1:
As shown in the following screenshot by section 1, you need to select DEFAULT SORT for the Updated date field, and select Descending for the DEFAULT SORT order. This will show the most recently added or commented on bookmarks at the top of the table.
You also want to check the Enable Drupal style "sticky" table headers (Javascript) checkbox. This setting makes it such that the heading of the table scrolls down the page if the list goes longer than one screen.
Click on the Apply (all displays) button to save your settings. To see the effect of the new settings, look at the Auto 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.
Step 2 (e) – setting additional configuration options (optional)
As it 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.
- Access: This setting allows you to control access to the view based on user roles or user permissions.
- HEADER and FOOTER: These settings allow you to set headers and footers for your view.
- NO RESULTS BEHAVIOUR: 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 – defining multiple display types (optional)
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, the 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, click on the Add button under the Displays heading. The most commonly used options are Page and Block, and the different options will be discussed throughout the text as they become relevant. Refer to the following screenshot:
To begin, we will add a block display by selecting Block from the drop-down menu. This will create a block that we can then enable via Administer | Structure | Blocks or via the admin/structure/block page.
Tip
The blocks are covered in more detail in Chapter 14, 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/structure/block page.
Step 3 (a) – overriding the default values (optional)
For the next step, we need to remove some fields from the block view.
Tip
Given that most blocks are displayed in the sidebar and that the width of a sidebar is limited, you usually want to limit the number of fields in blocks to three or fewer.
To remove fields, click on the rearrange icon as shown by section 2 in the preceding screenshot.
This will show the options shown in the following screenshot:
First, select This block (override) as indicated in section 1; this sets specific values for the block display separate from the default display. Then, remove the Node: Update/commented date and Taxonomy: All terms Keywords fields by clicking on the icons indicated in section 2.
A successful edit will look like the following screenshot:
Click on the Apply (this display) button to make your changes.
For the final step in editing the block display, we will edit the Items to display and More link options as shown in section 3 in a previous Edit View screenshot.
In order to minimize the size of the block, we will set the Items to display option to 5 and have the block display a More link option 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 on the link next to Display a specified number of items. This brings up the options shown in the following screenshot:
As you can see in the preceding screenshot in section 1, after you elect to override the default settings, the Apply (all displays) button switches to a Apply (this display) button. Once you have elected to override the default values, set the Items to display option to 5, as shown in section 2.
Click on the Apply (this display) button to make your changes.
For the final step, we will add a More link option 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 on the link as shown in section 1 in the following screenshot:
As we did earlier, select This display (override) as shown in section 2. Then, select the option Create more link as shown in section 3 and click on the Apply (this display) button to save your changes.
Saving your view
Once you have set your defaults and specified the view display, you need to do the most important thing, that is, to save the view. None of the changes, settings, or configuration options are permanently stored until you click on 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 the display types.