How to create a flexible events listing with views and panels 2 and CCK node reference
on
How to create a flexible events listing with views and panels 2 and CCK node reference
Required modules: Panels 2 (which includes various sub modules), views, CCK: date, text, noderefence.
Optional: pathauto, path, token
The model that we are creating is one of events that encompass sub events. An example of this could be music events. For example Glastonbury, or Woodstock is an event in itself which can hold a unique start date and end date and a location. Then within either of those there will be sub events such as the performer, the date and time they perform, and on which stage they are performing.
Create the content types
We will generate 2 separate content types. Firstly one to hold the main events and then another to hold the sub-events. You might want to name them something like event_main and event_sub.
We will add a node reference field to the sub event which will reference the main event content type. Then of course we probably want to add date fields and location fields and any other useful fields. In line with our example of music concerts you might want to add a “performer” field. Of course that could also be a node reference to artists whereby you would have separate write up for each artist. Add a description text field to the main event type.
Generate test nodes so that you have at least a couple of different main events and several sub-events that will go under each of the umbrella main events. Remember in the sub event field to reference the main event that they will be showing under.
Create the view
This will be a simple view that will create a list of all the sub events under any one main event. Name it event and with description events.
pageSelect “provide page view” and under URL put event_view – this is just for testing as later we will be running this through a panel.
View type can be table. I would just use table when you are displaying data in tabular form and that is what we are doing here.
BlockUnder “Block” also choose Table as the plugin type.
FieldsUnder fields add all the fields that you were adding to your sub event type. You will probably want to add “title” as well and add labels.
Arguments
Add node reference with the name of the node reference field you added to your sub event type. Use “Display all values” as the default. And under title enter %1
Filters
Add the sub event type you created as a filter of type “Node: Type”.
Sort
You will likely be using your date field
Test your view
Go to your view url event_url and you should see a listing of all your sub events. Add the node ID of one of your main events after the event_url like this event_url/10 where 10 is the number of the node ID. You should now see your view filtered by the main event with the title of the main event above the table listing.
Note. If you are not seeing your events listed with the argument it might relate to the argument field not working. Test it out by removing the argument field and seeing if you are getting a list of all subevents when you go to event_url with no argument in the url.
Build your panel
There are a couple of stages here. As we are using a custom view we need to make it available to panels:
Add view to panels
admin/panels/views
We add our previusly generated panel “Events” here. On the edit page, and under the section that relates to Argument: Node Reference then title “required context” choose node. What we are aiming to do here is to use the panel to replace node pages of our main event type with our listing and custom panes.
Create the panel
admin/panels/panel-page
Under the settings tab give the panel name event and then under path enter node/%
Under the Context tab and under “Arguments” add Node ID. Having added that click on the cog icon ad then under “Node types” tick the box that selects your main event type. Ignore the own display as that is only needed when we are working with more than one Node override type. Save the page.
On the Content tab we will add a couple of panes.
- Click the plus. Under “node context”/ “content field” find your description field under the heading field formatter. The name will start with Text:
- Add another pane. This time under the Views header select your “Events”. View.
Test your panel
Test your panel. Click on the preview tab. In the box that says “Node ID” add the Node ID of one of your main event types. Notice that this is similar to how we tested the view earlier, as it is the node ID of the main event that is allowing for the view to work. You should be seeing the overall description at the top, with the sub event table listing beneath it.
You should find now that it you go to the node landing page of any of your main events that you will see a similar view. This is how node override works with panels 2.
Getting fancy with URLS
admin/settings/pathauto
These days it is not usually enough to have urls like node/8 as our master event urls. We want ot have something more descriptive. Search engines will then list our page with an informative URL.
Path auto allows us to do that and it does not intefere with our views or panels. It just creates a layer of Alias's above. So use path auto to include the title in the URL.
So on the pathauto page, under “Node path settings” and in the field for your main event type add in event/[title-raw]
This will generate you a nice url for your panel







