Last updated March 26, 2011. Created by xamox on January 31, 2007.
Edited by linclark, arianek, add1sun. Log in to edit this page.

[Written for drupal 4.7, may not be 100% accurate for other versions]

I've decided to write a basic intro on how to use views since many people find it confusing for some reason. Personally I think it's actually quite easy to use once you've grasped the basic understanding of how it works. Also I decided to write it after Merlin (the creator of views, panels, and a bunch of other useful modules post this: http://www.angrydonuts.com/more_on_emails, on his blog).

This is a very basic intro and tells how to create a tabled page view (See figure 2), but it should be easy to apply it to a list view, Full Node view, etc. It's to teach the basic understanding and once you get this working you can start playing with different things on the page to see how it changes stuff. Views is a very powerful and useful module, it is an excellent way to control what & how a group of content (nodes) can be displayed.

*sorry for not being able to display images inline. You will just have to follow the links. Also sorry that I'm not directly linking to fullsized screenshots. I don't want to violate my flickr terms of service. You can click on the all sizes button though and see the images much larger.

Below is an image I think might help people visually grasp what is going on with views.

[figure 1]

In the above example the view is grabbing all the page nodes, just showing their titles, and only if that node is in the published state.


An overview of what the view will look like

The next image shows what the view looks like on my actual page. It is a table view, basically the view shows a table with the node title, the date it was created and how many votes that node has. It is also sorting showing the latest at the top and will only show 10 nodes per page. Notice in the address bar I have 'view URL' underlined because this value is set in the view as well. Keep in mind I am using clean urls here, if I wasn't it would be showing "http://www.example.com/?q=archive" but the value would be specified the same and is handled internally by drupal, so it isn't something you should have to concern yourself with.

[figure 2]


Create the view

Now we are actually going to get into making the view. Go to your views admin page, located at (/admin/views). And just the add button (see figure 3)

[figure 3]


Basic Information Section

So now you should be in the views creation page. The first place to start is the Basic Information section. Each section on the views creation page and be expanded or collapsed just by clicking the link. In the Basic Information section we are going to give the view a name, the name should be unique, keep in mind this is not the name at the top of the page, in the URL, or anything like that, the Basic Information section is for the system administrator of the person whom has access to create/edit views. In my example I call it 'Archive' since it will be an archive list of all my comics. Access is what user roles you want to be able to see that view. On mine I want my users and anonymous users to see the view so I check both boxes. The description is what the administrators of the view will see and will show up on the /admin/views page. See figure 4 for an example of how to fill out the Basic Information section.

[figure 4]


How the view is displayed – Page & Block Sections

Now we want to decide how we want the view to be displayed. There is a page view and a block view. We will discuss a page view first. The page view will give use a URL that we can visit and will display the nodes we specify. In my example the URL is /archive/ so I will check the “provide page view” block. I will then specify the URL (see the address bar in figure 2), which will just be ‘archive’ in my example. Next we have to pick a view type. There is a list view, table view, teaser list view, and Full Node view. A list view will show a list given the fields you specify in the next section, for example we could show my archive as a list view (see figure 5) or as I want it a table view(see figure 1). The teaser list view is a just a list but shortens things up by making them teasers which might be useful in some applications. Full node view will show the node as is, and the fields section has no effect on it, it just shows a list (specified by your filters) of all the nodes.

[figure 5]

So in my example I am using a table view. We select table view from the pull down menu. Now you can give the page a title if you’d like here. I called mine ‘comic archive’, you can see figure 1 to see what it actually looks like. Also I am going to check the “user pager” box, what this will do is add pagination to my view, and I can set the “nodes per page”, which is 10 in this example. If my “user pager” is checked and I have more than 10 nodes (or comics in my instance) then it will add a next page to the bottom of the view (see figure 2). You will also notice the next sections like header, footer, empty text, and menu. For this basic tutorial you do not need them. They are pretty straight forward though, you can insert custom HTML in them if you want, if say to display an image banner, flash banner, etc. Empty text is what is what is displayed if your view doesn't find any nodes; say for instance I didn’t have any comics, then this it what would be displayed. See figure 6 to see how what I explained above is done.

[figure 6]

Now the block section is pretty straight forward as well. It’s used to create a block, say if I wanted to show the latest 3 comics in a block below my main menu I could. In my example I am not using it but if you wanted to you could check the “provide block” checkbox. You will also notice there is the same pull down list of view type and they function the same as described above. Nodes per block will do exactly what it says and if I wanted to show my latest 3 comics I would enter in 3. The [more] link checkbox is used in conjunction with the page view, in that say I had wanted to show my latest 3 comics but I really had 12 comics I would check this box and it would add a more link, which would link to the page view. Header, footer, and empty text function the same way as the page view. See figure 7 to see how what the block section looks like.

[figure 7]


What information to pull from the nodes - Fields Section

The fields section is where you start to dive into views and realize its true power. In this section you will probably find a lot of various things in your pull down menu, and can even have more depending on what modules you have enabled. If you have a module that integrates with views you will probably find that in this list. There are so many options in this list that I am not going to discuss them all. What I want in my list is the node titles, so select that item from the drop down list and click add. You will see it was added above, the label I can set, “Title” is what I called it here and you can see figure 2 to see where it shows up. I am leaving the handler normal, and setting the option “as link”. This will make the title a link to the actual node itself. Sortable is used in table view and I set this option to “yes” to allow people to sort by title field. I will leave the This isn’t used in list view, if you want to do that you would in the bottom section called “sort criteria” in view creation page. The ops section has a trashcan icon if you want to remove that field. And an up/down arrow to arrange the order the items are displayed. See figure 6 to see what I am talking about.

Next I add the “node created” field, set the Label to “posted on”. I set my handler to “custom date” because I want to display my date differently. It used the standard PHP date formatting. You can just select short, medium, or long date and it will work accordingly. You will notice I pass it “M d, Y” in the option section, that is because I am using custom date and those are the parameters I want it to display. I set this field to sortable and set the default soft to descending since I want my latest comic to be shown first. See figure 6.

I then add the “voting api: voting results” field since my comics can be voted on and I want to display their values as well, in case someone wanted to sort and see what comic got the most votes. So I set my label to “# of Points” (see figure 2 to see what it looks like after) and then in the pull downs, I select “points, vote, and number of votes” I set sortable to “yes” but leave the default sort to none. Keep in mind you can only have one default sort. See figure 8 to review all my above actions.

[figure 8]


Arguments

These are used if you want to pass certain things to views, or make them look a certain way. Like if I wanted to display all comics with the tag ‘ninja’ then you could setup an argument handling code so I could have http://www.example.com/archive/ninja. For the most part you do not have to mess with this until you start getting a better understanding of how views works.


Only displaying the particular nodes you want – Filters

Filters are basically, well, a filter. They are used to filter out only the information you want to be shown. In my example all my comics are stored as an image node, so basically I only want to show nodes of that type. The first field I want to add is “node: published”, this is not required but recommend, just because you don’t want to say show a node that is in a draft state. Set the operator to “Equals” and the value to “yes”. You will also notice there is a button called expose, this will add that filter to exposed filters, which will be discussed in the next section. You will also notice I have added “node:type” as another filter. Here I only want to show image nodes, so I set my operator to “Is one of”, if I wanted to show all nodes except image nodes, then I would choose “is none of”. You will then see a list of node types. You can select your node type here, in my example image, you can also hold down the control button and select multiple types, so If I wanted to show image nodes and page nodes then I would hold down ctrl and select them both. Expose button does the same thing as discussed before here. See figure 9 to see how my filters are setup.

[figure 9]


Exposed Filters


These filters are displayed to the user visiting the page. For instance say you added all your node types to the filter above (i.e. page, mail, image, node) and set it to an exposed filter then you could let the user select the particular type from a pull down menu. I suggest learning the basics of views first before you start playing around with exposed filters.


Sort Criteria

This is the default sort criteria if you are using a list view or Full Node view when using pages or blocks.


Conclusion

Hopefully after reading this tutorial you now get the big, “Ahh-ha, that’s how views works”. And suggestions are welcome. Keep in mind this was meant to be a very basic tutorial and in no way shows off the true power of views. More and more modules everyday are integrating with views. Once you get a basic understanding it isn’t hard to start using and learning everything views is capable of. Below is a figure of how the view basically works after we have added everything.

[figure 10]

AttachmentSize
1.jpg64.05 KB
2.jpg42.29 KB
3.jpg74.35 KB
4.jpg36.97 KB
5.jpg26.4 KB
6.jpg42.25 KB
7.jpg33.75 KB
8.jpg40.18 KB
9.jpg32.99 KB
10.jpg53.65 KB

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

It was helpfully for a friend to understand how views works :)

(I do not need, I am 2 years using it :P)

Drupal Association individual member