Views

This chapter shows how to set up Drupal 7 to use use version 3 of the Views project. There is also a tutorial that shows how to use the view editor provided by the Views UI module to create list of recent blog entries.

Table of contents

• Introduction to the Views project
• Setting up
• Rough guide to the view listing
• Creating a new view with a page display
• First column
• Second column
• Third column
• Adding the view to a menu
• Troubleshooting
• Final word

Drupal projects discussed in this chapter: Advanced help, Chaos tool suite, Devel, Views.

This chapter is seriously outdated, and need to be rewritten from scratch.

Some screen shots are from an older version of Views. Those I am aware of are marked “(OLD)”. They will be replaced with newer versions eventually. While what you see on your screen may be slightly different from the screen shots shown in this tutorial, the differences makes no difference for the narrative.

Introduction

The Views project provides the capability, via a program code or the included Views UI user interface submodule, to define the criteria by which to select content, process it, manipulate it, and format its presentation. It is, at its heart, a smart SQL query builder with many additional functional layers.

Typical applications of Views include lists, summaries, collections (of images and other content), searches, RSS feeds, and taxonomy-driven navigation. It also gives the designer some means to control how lists are presented.

An essential part of the project is the Views UI editor module, which is a graphical user interface used to construct queries. This tutorial focuses on interacting with the Views module through Views UI.

Setting up

Views is a contributed project, so you will need to install it before you can use it. You also need the Chaos tools module from the Chaos tool suite project in order to use Views.

In this example, we are also going to use the Devel Generate module from the Devel package. This module is not required for normal use of Views.

While not required, having the Advanced help module enabled will give you access to more documentation about Views, so enable that module as well. Some of the screen shots used to illustrate this chapter reproduces text from the Advanced help module.

The following sequence of drush commands will prepare your site for working through this example:

$ sudo drush dl views -y
$ sudo drush dl ctools -y
$ sudo drush en views_ui -y
$ sudo drush dl devel -y
$ sudo drush en devel_generate -y
$ sudo drush en advanced_help -y
$ sudo drush en blog -y

You may want to check that drush did sort out the dependencies and enabled the modules. Navigate to Modules » List. The Views project adds its own panel to the Modules page, and within this panel, the modules in this project appear. Verify that both Views and Views UI is checked.

Notice that the checkmark for the Views module is greyed out. That is to prevent you from inadvertently disabling it without first disabling the Views UI module (and other modules that require it).

The view that will be created in this example is one to show a list of blog entries. As part of the setting up, you should also make sure that some blog entries exist (otherwise, there will be nothing to show). So if there are no blog entries already, go ahead and create at least 20 blog entries using Devel Generate!

Navigate to Configuration » Development » Generate content, fill in the form to generate content:

Press “Generate” to generate 20 blogposts.

After enabling the Views module, there should be an extra Views item in the administrator's menu, under Structure.

Rough guide to the view listing

To see the list of views, navigate to Structure » Views » List. You will see something similar to the screen shot below, but without the view named (blogpages), since you have not created it yet. If you follow this tutorial, we will show you how to create it in the next section, but first we shall become familiar with all the elements in the view list, shown below.

As you can see, there is a lot of details. The red numbers in circles enumerate the elements that make up the view listing, and are explained below:

1. The human readable name of the View. You can hover over this label to see the machine name.
2. The description. Note that it only appears in the administrative list. It is useful when looking at all the available Views and you need to determining what each does.
3. The tags. You may use tags to categorise your Views.
4. The path to a Page display of the View.
5. Operations This pull down menu let you carry out a specific operation on the View. Each operation is explained below.
6. Displays. The main display types are Page and Block. A single View may have several displays attached to it. For example, a View of blog entries may have a block that shows the title of the most recent five and a page that shows all teasers for blog entries published in a single month.
7. Storage. There are three alternatives:
   • In code means that the code for the View is stored in a module file.
   • Database overriding code means that a module originally defined the View, but you have modified it and saved a copy in the database. It is the copy in the database that is currently being used on the site.
   • In database means that you created the View using Views UI editor and the code is stored only in the database.
8. Type. This tells us what type of entity the View displays. Options are content, user, comment, term, file, etc.

The operations pull down menu gives access to the following operations:

Edit:

You may edit this View and save your revised version. If this View was stored in code, you will be making an active copy of its definition and saving it in the database. You will always have the option to revert to that original version that is stored in code.

Enable/Disable:

If the View is avaialble as code and it is not enabled, you may enable it. If you no longer want to use it, you may disable it. If you disable it, whatever the View displays will no longer visible on your website. This means that blocks or pages may disappear.

Revert/Delete:

If the View was created using code and you've changed it using the GUI, you may undo those changes by selecting revert. If the view is created from scratch using the GUI, the option to delete it appears instead. Both operations will permanently remove anything related to the view from the database.

Clone:

If you prefer to make a View that is similar to an existing View, you can clone it. This makes an exact copy of the View so that you may rename it and make as many changes as you would like. Cloning allows you to create a copy of an existing view in the database. You can then edit the new View without affecting the original.

Export:

Exporing a view gives you access to the code (mainly SQL queries wrapped in PHP) that constitues the view. Clicking this will take you to a page where you may copy the code and place it in an include-file. See the chapter about exporting content types as code to learn more about this.

The Views module includes some commonly used Views that are implemented in code. These appears in the views listing, but are initially disabled:

• Archive – Displays a list of months that link to content published during that month.
• Backlinks – Displays a list of nodes that link to the node, using the search backlinks table.
• Front page – Emulates the default Drupal front page.
• Glossary – A list of all content, by letter.
• Recent comments – Contains a block and a page to list recent comment. The block will automatically link to the page, which displays the comment body as well as a link to the parent node.
• Taxonomy term – A view to emulate the Drupal core's handling of taxonomy terms.
• Tracker – Shows all new activity on system.

Other modules may come with other views stored in code. If you enable such modules, the views they contain will also show up in the views listing.

Creating a new view with a page display

For the purpose of this tutorial, we are first going to create a view to list the most recent blog entries on the site. This is not a very sophisticated use of the Views module, but we need to start somewhere.

To start creating this view, navigate to Structure » Views » Add new view. You then get to give the view a name. You may also add a description. Below the description, select what to show. In this case, the view will be set up to show “Content” of type “Blog entry” sorted by “Newest first”. The “Add new view” panel also let you choose whether to create a page or a block, but we leave those boxes unticked until later.

Below is an screen shot that shows the “Add new view” panel with these inital fields filled in.

Click “Save & exit” to create the view. Now we have a (very basic) view that will list the titles of the last five blog entries on the site in an itemized HTML-list, newest first. The titles will be shown linked to the blog entry. The path to this view will be the base URL to the website, plus blogpages.

After we've saved the newly created blogpages view we take a look at it by clicking om the path (4) in the views list. It will look something like this:

It is listing the title of the five most recent blog entries with a pager that allows us to access the rest. It looks a bit bare. We want the list to at least contain the date the entry was posted.

To improve the view, we select on “Edit” from the “Operations” column. This takes us to the view editor shown below. Before drilling down into the individual settings, we shall make some observation about the view editor user interface, based upon this screen dump:

The view editor may seem a little intimidating to begin with. There is a lot of controls and settings. However, you should notice small question-marks inside a gray disc that appears in various places in the view editor (visible in the screen dump above). These link to popup help panels (provided Advanced help is enabled), and provides on-screen contextual help for the item they appear above.

At the top of the view editor there is a row of buttons that let us navigate between displays. In the screen shot above, only a single page display exists. There is also a button to add a display. Adding extra displays will not be covered by this tutorial – we will just work with the defult Page display.

In the view editor, you may notice that there are a lot of wordlinks (they are shown in blue in the screen dump above, but how links appear depends on teh style sheet used). Most of these wordlinks indicate the current setting. Clicking the wordlink let you change the setting. There are lso some wordlinks with the word “Settings”. Clicking on these wordlinks let you change these multiple settings. The buttons (most of them containing the word “Add” have a down-arrow on their right. Clicking the down-arrow gives access to the button sub-menu. Many of these sub-menus let you reorder things by using the -button to drag&drop to change the order of items. The view editor makes extensive use of AJAX to provide an interactive experience where changes in the preview pane take place immediately..

Referring to the screen dump above, we see that under “Page details” there are three columns. We are going to use an ordinal number to separate the columns to make it a little easier to locate the settings we discuss.

First column

In this section, the settings that appear in the first column will be discussed, and we shal walk through all the steps required to add a post date field.

In the first column, the following settings appear:

• Title: This sets the title that is displayed as a heading when the view appears.
• Format:
  • Format: Styling.
  • Show: What to show (see below).
• Fields: List of fields to show (if we've opted to show “Fields”).
• Filter criteria: Criteria for selection.
• Sort criteria: Criteria for sorting.

The “Format” setting not only selects the format to use when displaying the list, but also what to show. In the example we use in this tutorial, it is set to show “Fields”.

The other available settings for what to show may be “Content” and “Rendered entity”. The “Content” setting will only be available if we are constructing for a node content type, while “Rendered entity” is available for any type of entity can be rendered.

Since we have chosen to show Field we get to pick the fields to include in the view. This is not possible if we choose to sgow “Content” or “Rendered entity” – these settings will instead inherit use the entity's display field property to select what fields to show and what view mode to use.

To add a new field click on “Add” above the “Fields” setting. This pops up an overlay that let us select a field to add to the view (i.e. it is the Views representation of the SQL SELECT statement).

The Add fields panel lists up all the fields that exist. They have been divided up in groups than can be filtered to make selection easier. All the fields that belong to a Content entity is located in the “Content” group.

To add the post date, the field to select is named “Content: Post date”. You select a field by locating in the list, ticking it and clicking “Apply (all displays)”.

Since we're working with default display, it only make sense to apply the setting to all displays. As we noted in the beginning, there is a button at the top of the view editor to add more displays. If there are alternative displays, you can choose between all displays, or overriding for the current display.

This takes you to a new overlay where you can configure the field. The default Label (“Post date”) is fine as a default, so leave it alone. The only change we want to make is to make sure that the date format uses the short format, so change the format using the pull-down menu below “Date format”.

The screen shot below shows you how to may configure the field “Content: Post date” for use in a view:

After configuring you should click “Apply (all displays)”. This should take you back to the view editor, with the date field added.

To make the added date field visible outside the preview inside Views, you need to click “Save” in the upper right corner of the view editor.

Revisiting the path blogpages below the site's home page should now show the revided view where the post dates are included and where postings are sorted descending (i.e. newst first).

Second column

In the second column, the following settings appear:

• Page settings (for page displays):
  • Path: the path to access the page view (the leading slashis added by views and is not part of the path).
  • Menu: to create a menu entry for the view.
  • Access: Limit access to the view by permission or by role.
• Block settings (for block displays):
  • Block name: Block admin description to appear on the block administration page.
  • Access: Limit access to the view by permission or by role.
• Header: What to display above the view.
• Footer: What to display below the view.
• Pager: Set up a pager for the view.

By default, to access a view is determined by “Permission” (i.e. permission to “View published content”).

You may change this by clicking in the first link to the right of “Access” below page or block settings. The values are:

• None: No access restrictions (not recommended)
• Permission: The user's role must have the permission.
• Role: The user must have the role.

The second link let you select the permission or role that applies.

Both links display the currently selected value.

Users with the bypass views access control (People » Permissions) permission set can see any view, regardless of what access you set inside the Views module. This permission should only be given to roles that also have the administer views permission.

Third column

The third column is headed “Advanced” and is collapsed by default. It provides advanced functions that are beyond the scope of this tutorial. These functions are instead discussed in separte chapters of this ebook. See, for instance:

• Views: Contextual filters
• Views: Using relationships
• Views: Styling output

Adding the view to a menu

After creating a page display for a view, we can make the view accesible by adding its path to one of the menus Drupal provides for navigation. Click: Structure » Menus » List menus. To add a link that will display the page to the main menu, click “add links” to the right of “Main menu”, then fill in all the required fields. In this example fill in the plain text fields “Menu link title” and “Description” with sensible values. For the “Path” field, you must use the path for the page as used in the views configuration og the page (i.e. “blogpages“ – without a leading or trailing slash.).

While “blogpages” (internal path) and “https://example.org/blogpages” (absolute URL) both are valid paths to the view created in this tutorial, the former is what you should use. A menu entry with an absolute URL will always be displayed, even if there is access restrictions in place that prevents the user from accessing the linked view. For menu items where the path is internal, Drupal will automatically hide menu entries leading to restricted content from users that do not have the required access.

Troubleshooting

Pager disappears

If two views has the same Pager ID, the pager will not show up on one of them. The solution is to change the Pager ID.

Sources: KnackForge:pager not visible, SE: views pager not rendered, Drupal.org: how to change Page ID, Drupal.org: different pager id.

Final word

You may want to familiarise yourself with what can be done by means of the view editor by making use of the Preview function. You can experiment with the settings and watch the result. As long as you don't click Save, your experiments will not be saved so you need not worry about messing up you work.

This tutorial is a short and not very comprehensive introduction to the Views module. There is an impressive amount of functionality in this module and this tutorial only scrapes the surface. The user contributed documentation provides more information. If you want to learn more about working with the Views module, this is the best place to start.

One particular area that you should explore further is the use of arguments in combination with taxonomies. In particular, check out how to use create taxonomy-driven navigation by using Taxonomy: Term to display a list of content tagged with a certain taxonomy term name that is passed as an argument as part of the path.

---

Last update: 2019-02-17 [gh].