views

Introduction

To illustrate some features of views, we will create an agenda, adding features step by step:

  1. install the modules we need for the demo
  2. create a content type for the agenda and some content
  3. create a view that displays the titles of the agenda, together with the start times and publishing times.
  4. modify this view, such that only events are shown that should be shown, based on the publishing times.
  5. add view to see only the past events for which the publication date has expired.
  6. create a view that does the same as above, only now it will link to a view that will display the event.

install the modules

  • install and enable views from views as usual
  • install and enable date from date as usual

create content type for the agenda

Create a content type ("agenda-item") containing:

  • title (is already present)
  • body (is already present)
  • url path settings (is already present)
  • date field "publish", with a start and an end date
  • date field "from-to", with a start and an end date

admin -> configuration -> url aliases -> patterns -> Pattern for all agenda-item paths: fill in the alias content/agenda/views. An event with the title "party" will get the url "content/agenda/party".

Create a few events, some with publication set that the event should not be published, and some the other way around. Play around with the display settings of the date fields until you are satisfied.

In the real world, you probably would not make visible the publication dates, but for testing purposes it is better to make them visible.

Now you are able to look at the events, if you know the title. In the following we create a view, to see all events in one page.

Create a view on the agenda

admin -> structure -> views -> add new view

You are presented by a first setup page for your new view.

  • call it vagenda
  • choose: show "content" of type "agenda-item"
  • save & exit

The url: /vagenda will show the bodies of your agenda-items.

To see something more: admin->structure->views: edit vagenda. FORMAT Show: displays "content", change this into "fields".

FIELDS: displays: Content: Title. This means that only the titles are shown. Save (right upper corner (!)) and have a look ath the url /vagenda.

You can add fields to be shown using the Add button immediately right above FIELDS. The down-arrow let you rearrange the fields in the display.

Try to produce a screen with events, showing the dates and the title. Note that the title by default links to the corresponding agenda-item.

Show only events with a valid publication time

admin->structure->views-> edit vagenda

Left below there is a thing named "FILTER CRITERIA". You see there already filled in that the content must be publish and that the type must be agenda-item.

We will add criteria, based on publish start and publish-end time, such that our "publish" field in the content type is honoured.

In short, we want to display the event if:

  • publish-start is less then "now"
  • publish-end is greater than "now"

For example: if now is 2015-12-24 then we could have the following situation for our agenda-items:

title   pub-start      pub-end    visible?

party  2015-12-20    2015-12-30    yes
xmas   2015-11-10    2016-01-05    yes
summer 2016-04-20    2016-07-10    no
dinner 2015-03-12    2015-04-11    no

We add filter criteria to accomplish this:

  • click Add, just above right from FILTER CRITERIA.
  • You are presented a window with a search field: fill in publish
  • check "content publish - start date" and "content publish - end date"
  • click apply (all displays)
  • an window to configure start-date pops up: choose for "filter granularity" minute, click "apply and continue"
  • an window to configure the filter criterion pops up:
    • Operator: "is less than"
    • change "select a date" into "Enter a relative date"
    • In the relative date type "now" (without the quotes)
    • Click "apply (all displays)"
  • an window to configure end-date pops up: choose for "filter granularity" minute, click "apply and continue"
  • an window to configure the filter criterion pops up:
    • Operator: "is greater than"
    • change "select a date" into "Enter a relative date"
    • In the relative date type "now" (without the quotes)
    • Click "apply (all displays)"

You will see now the extra criteria, which you can edit if something has gone wrong following the recipe above.

DO NOT FORGET TO SAVE the view, the save button is upper right.

Add a view to see te past

We will create a new view ("vpast") that only shows the events for which the publication date has been expired.

admin->structure->views->vagenda: under the little arrow next to edit, is an option "clone". Click this, and choose "vpast" as the name for the cloned view.

Under PAGE SETTINGS, change the path into /vpast.

Under FILTER CRITERIA, click the criteria for the publish-start-date, and click "remove".

Click the criteria for publish-end-date and change "is greater than" into "is less then or equal to". Click "apply" and save the view. The url /vpast should show now the events that are expired.

Create a view that displays links that show one page in another view

This the idea:

  • create a view "view1" that displays the titles of agenda items, with links to view2
  • create a view "view2" that displays only one agendaitem

To start with view2, we will arrange that the url /view2/123 shows node 123 using view view2. 123 is an example, you can find the number of a page (node id or "nid") by looking at the url of the edit screen of a page: it is something like: http://ratrabbit.nl/ratrabbit/node/44/edit?destination=admin/content In this case, the nid is 44, http://ratrabbit.nl/ratrabbit/node/44 shows node 44, which is this page.

admin->structure->views->add new view and name it "view2".

Save this view and edit it:

admin->structure->views->view2->edit

We want that an url like /view2/43 (the item with title "four") shows node number 43 using view "view2". In earlier documentation of drupal, the term "arguments" was used in stead of "contextual filters". In this case, the term "arguments" is more clear: we call up /view2, and give it the argument 43, and tell drupal that this argument has to be treated as a node id.

To arrange that, click on "Advanced" and "Add" right from "CONTEXTUAL FILTERS". In the search box, type "nid", and select "Content: nid". Click "Apply ...". A configuration window pops up, select "show Page not found". This ensures that the url /view2 displays the "Page not found" screen.

Under FORMAT, change "content" into "fields", and arrange the output of the view under FIELDS.

Now, find a nid of an agenda-item and try the url /view2/nid. In this website, try ratrabbit.nl/ratrabbit/view2/43 .

Now we will create "view1", this view has the task to display the titles and start-time of the events that should be visible. The title will be associated with a link like /view2/43 when the title of the page with nid=43 is chosen.

This view is partly equal to the "vagenda" view constructed above:

admin->structure->views->Add new view

Choose "view1" as name and save.

admin->structure->views->edit view1

Arrange that:

Show [content] of type [agenda-item] sorted by [newest first]

Save.

Edit again:

admin->structure->views->view1 edit

Create filter criteria as with the "vagenda" view above.

Adapt things under FORMAT and FIELDS such that start time and title are shown, and that the title links to the page.

We will arrange that the url under the title will not link to the page, but to /view2/nid, with "nid" the node id of the page.

admin-sturcture->views->view1 edit

We will adapt the configuration of "Title", but first something surprising: in order to be able to use the nid, we have to include under FIELDS a field "Content: nid". Click the "Add" right from FIELDS, type "nid" in the search field, and select "Content: nid". We do not want the nid to be visible on our page, so check "Exclude from display". Click "Apply ...". Click on the little down arrow next to "Add", and arrange that "Content: nid" becomes the first field, because we will use "Nid" in "Title", and only fields that precede "Title" are available there.

Under FIELDS click "Content: Title", uncheck "Link this field to ..." and click then REWRITE RESULTS.

Check "Output this field as a link". Click on REPLACEMENT PATTERNS (somewhere at the bottom of the window), and you will see that "[nid] == Content: Nid" is available, this means that when you put in Link path:

/view2/[nid]

the link generated will become for example /view2/43 if 43 is the nid of the page we want to see. Click "Apply ...", and Save to save the view.

Now, when displaying the url /view1, and clicking on one of the titles, you should see the event in the view "view2".

A view in a block

You can arrange that a view is located in a block, for example in the second sidebar, with links that show the requested content in the content block. (see admin->structure->blocks->Demonstrate block regions)

As an example we will create a version of "view1" as a block view.

admin->structure->views->view1-edit

Under "Displays", you see

[Page] [+Add]

This means, that this is a view for a "Page". From this we create a view suitable for a "Block": click [+Add] and choose "Block".

Save the view.

admin->structure->Blocks

Find View: view1, and place this in "second sidebar". Save and have a look at your website. The view will always be visible, but you can change that:

admin->structure->blocks->View: view1 configure

Under "Visibility settings" you can arrange the visibility using several criteria. This one is appropriate here:

Under "Show block on specific pages", check "Only the listed pages".

In the text field enter:

view2
view2/*

Nicer paged block views

For demonstration purposes the view "simpleview" is constructed, a page version and a block version. The page version is set up, such that by default node 43 is shown (with title "four").

If the view shows itself in a pager, for example "simpleview" then the following undesired result is observed (demonstrated in simpleview, the second sidebar is showing simpleview-block):

  • click on a title in the second sidebar, the correct page will be shown:
    • The url of a title is for example "simpleview/68", this results in:
    • the page view simpleview/68 is shown in the main area
    • the block view of simpleview is shown in the right menu bar, because the url is "simpleview/*", so this block view is always reset to the start
  • click on "next" in the second sidebar. The "results not found" page will be shown, containing some debugging information.
    • Why: look at the url of the "next" button by hovering over it. The url is something like "simpleview/69?page=1", this is not something for page view simpleview: that view is programmed to show only urls like "simpleview/69", so we get a blank page or a page with an error message.
  • click on a title in the second sidebar: the correct content will be shown, but the second sidebar is showing page 1 again.

Because there is no recollection from previous screens and because the screen as a whole gets updated, the undesired behaviour is understandable.

The desired behaviour is:

  • when using the pager in the second sidebar, the page should be frozen.
  • when clicking a title in the second sidebar, the second sidebar should be frozen.

To accomplish the following has to be done:

  • edit the block view: admin->structure->views->view1 edit. Open "Advanced" and change "Use Ajax: No" into "Use Ajax: Yes".
    • Using Ajax ensures that, when paging through the second sidebar, only content for view1 is sent, the rest of the screen is unaffected.
  • still editing the block view1: under FILTER CRITERIA, click "Content: Published", check "Expose this filter to visitors, to allow them to change it" and check "Remember the last selection".
    • This is necessary for the module "lastviewedpage" to work: These settings ensure that the state of view1 (for example: which page is shown) can be accessed by the module.
  • Install module lastviewedpage: install and enable as usual. (Thanks to cvbuyten)
    • This module takes care that view1 is set on the page from the previous time.

Now the desired behaviour is there, but, because of the expose of the filter, two buttons appear at the top of the right view, allowing the user to choose between published and unpublished content. Remove this with a css like:

/* remove exposed thing from view1 */
.view-filters #views-exposed-form-view1-block-1 {
   display:none;
}

In this case, the view is called view1, so you can change this in your case to the name of your view and try if this works. If not, find the correct css-class and css-id using your browser.

An example of a correct behaving view is view2extra. In this case, the following views are used:

  • view2extra (page view): shows the items, the pager is set to "items per page = 1", "number of pages = 1". In this way, only the first item is shown.
  • view2 (page view): set up to show only one NID, see above.
  • view1 (block view): the block will show itself when the url is one of:
   view2
   view2/*
   view2extra