Views
Up to this point we have discussed how content is structured, how are fields added to it, and even the actual styling of it's view and creating content.
An important aspect of working with content is not just about creating, editing, or deleting but also retrieving this content and displaying it as a list of items in many different styles (although do not confuse this with a content type's view modes).
Views, another powerful community-contributed module, aids in this task of providing an administrative user interface (UI) for building content listings, among many other tasks. If you have a little bit of database background then you can think of the Views module as a tool to create the SQL queries that retrieve and build content, which is exactly what Views is doing behind the scenes.
With Views you can create content listing as follows:
- Recent Memos that were created by users
- Reports about Memos used in your website
- Upcoming events mentioned in Memos
The Views module is one of tens of thousands of modules available to download, from the Drupal project homepage (http://drupal.org). While Drupal itself ships with some modules, these are considered core modules which provide very basic and essential functionality for Drupal websites to work (we can find these modules in Drupal's top level /modules directory). To extend this functionality, Drupal has been designed to be very modular and flexible so that community members can develop and contribute their own modules.
Installing the Views module
To begin, we'll need to first install the Views module. Navigate to http://drupal.org/project/views, scroll down and download the Drupal 7 version listed under Recommended releases option (at the time of writing this book, this was 7.x-3.5).
It is good practice to avoid mixing Drupal's core modules and contributed modules (or those of which you develop on your own). For this reason, you should unpack the archive in your contributed modules directory, which is in sites/all/modules directory of your Drupal's 7 install path.
Tip
Drupal 7 features a new way of installing modules and themes via the administrative interface itself. To make use of it, enable the Update Manager module in the Modules page (/admin/modules), after which you will see a new link at the top of that page to install modules just by providing it the URL for the direct download of the module or theme (which you usually grab from http://drupal.org module's page).
Views is dependent upon another module being present, the Chaos Tool Suite (also known as CTools), which is a developer's helper code module. If you don't have this module installed, then download it from http://drupal.org/project/ctools and extract it to the contributed modules directory too.
Navigate in the top administrative bar to Modules and scrolling down you'll see a new section called View with a couple of modules Views and Views UI. You can also notice the version detected for these modules as well as the useful information regarding the dependencies of this module, such as if this module requires other modules to be enabled. To continue, just toggle on the Views modules and click on Save. If any dependencies of the disabled modules have been found, you'll be asked to confirm enabling those modules so comply and then click on Continue.
Tip
The Views module, much like CCK, had a tremendous impact on Drupal and while attempts to add it to Drupal 7's core did not succeed it will be included in Drupal 8.
Adding a new Views
Views is now installed and we can start using it to configure content listing. Access it from the top administrative bar via Structure | Views (/admin/structure/views).
In the main Views page we see a listing of Views that were already created by default with the Views module but remain disabled, including a helpful description, tags to categorize and filter quickly through the list, the path to access a particular view, and the actions that we can perform; enable and edit, being the most common of them that we will work with.
Tip
Installing the Advanced Help module will greatly help around when dealing with Views in specific, as well as other areas of Drupal.
At the top of the page we can also see more general actions to perform, out of which we care most about the Add new view, so let's click on it and continue with creating our first view as shown in the following screenshot:
Let's follow on how we filled the details for this view.
We've chosen helpful texts for the view name and it's description. Next, we decided what is our primary content type that we want to list. The select box features listing of users, comments or even files but we're interested in content in general, and specifically of type Memo. Notice how we can cherry-pick specific Memo content types that are tagged with one of the tags that have been submitted. Lastly on that row we see the sorting options.
Before we continue with the rest of this settings page let's recap on what vViews are all about. We have described the Views module as a tool for easily creating (complex) queries on the database and generating an output. What format is this output exactly? Views has a feature called Displays where it is able to create different kinds of outputs, depending on your needs. Some examples are as follows:
- Page: Probably the most common display mode, a page output represents an HTML page output. As such, a page has some settings unique for it like the URL path to access the page, the title that would be set, and can even integrate well with Drupal's menu system to also add a menu entry which will display this page view.
- Block: We will understand this topic very soon but we'll just point out that blocks represent components of information that can be placed anywhere in a theme. The Views module enables to generate actual blocks of content information.
- RSS: Turns your content listing into RSS feeds.
To continue, in the next configuration block we further refine the settings for the view that we are about to create.
We toggle on the page display and set the title, the path, and updated the Display format to Unformatted list of fields. By toggling the menu link option we added a menu entry for this page too. Let's finish by clicking on Save & exit.
Once we created a view and saved it, we'll be redirected to the Views page.
You can see how it looks now, taking notice of the path that was also created and the left-hand side menu entry to access Recent Memos as shown in the following screenshot:
That listing is nice but it's very basic and we can probably add more information like who created each Memo, when was it and maybe add a little eye candy with attached images.
To edit the view go to Structure | Views, you'll notice the newly created Recent Memos fields at the top as an enabled view.
Tip
Drupal has support for contextual actions. Meaning that on every piece of content that the user is able to modify via a configuration interface you will see a gray gears icon with a down arrow which if you hover on will also create a border across the related object.
Interesting to note in this page that under the view name we also see more helpful information as follows:
- Display mode: We're seeing page as this is the only mode we've chosen for this view.
- The source of the view: Because we created this view from the user interface that the Views module provides, it will be saved to the database, which is why it says In database. The Views module exposes an application programming interface (API) which allows developers to create and manipulate views by writing code. If we had gone that road then it would have said In code.
- Type: The primary type of content that the view is based on. Content can be node content types, in which case that means actual content like our Recent Memos view, or it can also be a view that deals with users, for example showcasing a list of newly registered users.
In the operations we can click on the selected edit action to resume with our progress of editing the view. Once opened, the page may seem overwhelming with the amount of settings and configuration and indeed we can dedicate an entire book on the Views module to cover all of its features and capabilities (one book on this subject is Packt Publication's Drupal 7 Views Cookbook available at http://www.packtpub.com/drupal-7-for-views-module-cookbook/book).
We will logically break that views edit page into parts so that it will be easier for us to understand.
At the top we have on the left-hand side, the list of displays that are available in this view. The only display output is Page and it's also selected by default. We can click on the Add button and choose to add more displays like feeds or blocks but we won't do that now.
To the right we have a generic actions button to handle this view, for example to change the name, description and tags that were set for this view, or to perform more advanced actions like exporting or cloning the view as shown in the following screenshot:
At the bottom of the view we have an automatic preview generated for us every time we make some changes to the settings so that we can see what it looks like.
Specifically it shows general details such as the view's Title and Path in the mid of that section and beneath it the output page's title text and output content. It is also possible to debug the SQL query that is generated by the view by navigating to /admin/structure/views/settings and toggling on the option Show the SQL query, after which the SQL query will be displayed in the view editing page as shown in the following screenshot:
Concentrating on the very heart of the view's page settings, at this point, it looks like the following screenshot:
We will begin customizing our view by setting up the FIELDS section where the content's title is the only field and what we really want is to add a few more fields. In order to this, perform the following steps:
- Click on the add button to the right of the FIELDS section.
- In the opened dialog screen we can browse through the different fields and either use the Search text box or the Filter select box to focus on fields relevant to us. Out of that list toggle the following options:
- Content: Image
- Content: Updated/commented date
Once selected, click on Apply:
- A configuration dialog screen will open now for each field we chose to add to further configure that field's settings:
- For the Content: Image field toggle off the Create a label setting and choose the thumbnail option for the Image style select box and finally click on Apply.
- For the Content: Updated/commented date field toggle off the Create a label setting and choose the Time ago (with "ago" appended) option for the Date format select box. We are now done so clicking on Apply for this last field will bring us back to the main views edit page.
We also want to add the username of the user who created each Memo but if you search on the listing of the possible fields to add you might have noticed that there is no such field. This is because our primary entity for this view is a (node) content type, hence there's no mentioning of users, comments or taxonomy. To pull in this further information we need to declare a relationship of other entities to the node's Memo content type.
Note
Relationships are very much a representation of database's JOIN queries where a base table exists (this is our primary entity for the view) is joined against more tables (more entity types) which result in creating relationships, out of which we gain more fields to use.
To declare relationships, toggle the Advanced field set to the right of the page and click on the add button to the right of the RELATIONSHIPS section. We can now choose the Content: Author from that list and click on Apply, another relationship configuration dialog will display but the defaults there are fine. hence we'll click on Apply again as shown in the following screenshot:
By now we can open the fields option again and locate a field called User: Name.
In the field's configuration page we can clearly see that this field is a result of the author relationship we created. Let's set the label name to by and click on Apply.
Once we're satisfied with the collection of fields we can choose to rearrange their order by clicking on the down arrow on the add button of the FIELDS section and selecting rearrange. In the Rearrange fields dialog display let's set the image field at the bottom.
Most important part—to save this view's settings we need to click on the top right Save button and see how our content listing looks now:
Views is very powerful and we have only scratched the very surface of it. In evidence of it's flexibility you can find many modules on Drupal.org that build on it more and more functionality and we will indeed re-visit some of them in the upcoming chapters.