Nov 05 2010
Nov 05

This is Part 2 of a 2-part series examining two different ways to arbitrarily ordering a View. Part 1 can be found here.

In part 2 of our arbitrary views ordering experiment, we're going to take a look at the Module named Nodequeue. Nodequeue is a great way to put your nodes in any order you want, then reference that ordering in a view as a sort criteria. Afterwards we'll compare the two methods, and examine some of the pros and cons of each.

Once again, this tutorial is written for Drupal 6, but from the recent testing I've done with the dev versions in Drupal 7, I don't imagine they will change all that much.

Step 1 - Modules, Content

We'll use the same D6 install from part 1 with Views and Nodequeue installed.

We'll also use the same content. (User profiles for all the employees here at Fuse)

Step 2 - Configuring the Queue

The next step is to setup our nodequeue by going to admin/content/nodequeue/list and clicking 'add_nodequeue'

We'll give it a name and just for fun, let's give it a limited queue size of 7 (the number of people that work here at Fuse)


The 'Reverse in admin view' checkbox is really just a visual setting. Adding items to a queue is done using a autocomplete text field, followed by clicking 'add item'. When you're adding items to a fixed size queue (like ours) items get popped off as you add new ones once you've passed the limit. This option basically lets you choose whether the items you add get inserted at the bottom of the list (and the ones on the top get popped off - this is the default), or vice versa. You can try it out both ways to see what you prefer, but I find I like it the way it is so I'll leave it unchecked.


The next two text fields (Link "add to queue" text, Link "remove from queue" text) allow you to specify links that will appear when viewing nodes to add or remove it from the nodequeue. This is a great feature and can be very handy, but in our case is not necessary so we'll leave them blank.

Lastly, we'll choose Employee as the only node type to appear in the queue. This will basically just filter out all other node types when you're adding nodes to the queue.

Click 'Submit' and congrats! You've created your first nodequeue.


Step 3 - Adding nodes to the queue

Strangely, you'll need to click 'View' in order to start adding nodes to the queue. 'Edit' will actually take you back to the settings page we just filled out.

Adding nodes is very straightforward. We just start typing the title of the node and it will autocomplete, filtering out any nodes that don't match the type we selected earlier. I've gone ahead and added every Employee to the list, and ordered it. (Once again, the order is random other than Greg at the top and the Yeti and I at the bottom) It looks like this:


Step 4 - "Viewing" your queue

So we've created our nodequeue... but where can we actually go to see our nodes listed in that order? Well the module actually created a view for us!

If you click 'Edit' on that View, you'll see that there are some default settings and a Page and Block view already there. Try going to the path specified in the Page view and you'll see a list of all your nodes in the order you specified earlier. (NOTE: I had to actually save the view before this worked for me.. not sure if that's a bug...) Pretty simple, right!

As easy as it is, it may turn out that you don't want to use this automatically generated view. Maybe you have another view set up already and you just want to add your Employees nodequeue as a display to that one instead. Well there are only two things you need to do to get it to work.

If you examine the displays that were automatically generated by the module, you'll see that there are a few nodequeue specific items. In Relationships there is a "Nodequeue: Queue" item. Click on it and take a look at it's settings.

By requiring this relationship, we will filter out items that don't belong to the queue. And the "Limit to one or more queues" option allows us to select which queue we will be using for the relationship. In this case we only made one queue so there is only one listed, but if you had multiple ones they would be listed as well and you could mix and match different queues. We'll name the relationship "queue". Remember that name because we'll be referencing it in the the Sort Criteria (queue) Nodequeue: Position

The only thing to note here is that the "queue" relationship needs to be referenced for the sorting to work properly. If you have these two items in your view, you can config the rest of it however you want.

Conclusion

Both DraggableViews and Nodequeue are great ways to create an arbitrary custom order for your views. So which one is better? Well if I were judging only on the setup process, I think Nodequeue would win. DraggableViews is great once you get it working, but there are some *undocumented* little quirks in the setup process that require a bit of trial and error to figure out (unless you follow this tutorial of course). Tthe first time I used Nodequeue, I just installed it and got it working without documentation. It's that simple!

However, when it comes to use-case, I think this is one of those "right tool for the job" kind of situations. Nodequeue has a more manual approach to selecting which nodes you want to display. You have to add each node one by one to the list before you can use it. For me, this is the main difference between the two Modules and the deciding factor when choosing between them. Do I want to think about which nodes belong in the list or not? If I want not only the ordering, but also the node selection to be arbitrary, Nodequeue is the one to go with. But if the node selection can be automated with views, DraggableViews is the winner.

Oct 29 2010
Oct 29

It happens every once in a while that you need to order your nodes arbitrarily. That is, sorted neither "ascending" nor "descending". An example of this might be an employee listing page on a company website. It's likely that the employee listing needs to be sorted by order of importance (for lack of a better term) with the bosses at the top, the interns at the bottom, and everyone else in between.

The *simplest* solution is to just add some sort of weight field to your 'employee' content type and then create a View and sort by this weight field. But then as employees come and go, you'll find that opening and editing every node to adjust for the new company hierarchy will get tedious and frustrating. In comes DraggableViews and Nodequeue to save the day!

The DraggableViews and Nodequeue modules both allow you to arbitrarily/manually order your nodes but with a few slight differences in design and interface. In Part 1 of this tutorial we will create a View for a company's employee listing and order them using DraggableViews. In Part 2 (next week) we will examine using the Nodequeue module to achieve the same results, then compare the two modules' strengths and weaknesses.

This tutorial is specifically for Drupal 6 (but I suspect not much will change when they are released for Drupal 7)

Step 1 - The Employee Content Type:

We'll start with a fresh install of D6 with the following modules downloaded and installed:

  • Views
  • DraggableViews
  • Nodequeue (For part 2)


We'll then create the employee content type with the following fields:

  • Name (Node Title)
  • Job Title
  • Image
  • Bio (Node Body)


I've gone ahead and added all the employees here at Fuse Interactive, so let's jump into Views and create the employee listing page.

Step 2 - The employee listing page in Views:

I've started by creating a simple view with the fields we created for the employee content type and added a filter to show only nodes of the type: Employee.

And the output looks like this (I hid the image and the bio to conserve space):

Right now this doesn't make any sense. Why is the President at the bottom of the list and why am I, a lowly Drupal Developer, at the top? This is because it's ordering them by node nid right now. Since I didn't enter each employee in the *correct* order, I will need to use DraggableViews to re-sort them manually.

The concept here with DraggableViews is to create a view that produces an output of nodes or fields, and then create a separate views display that will act as a sorting interface for the view. The view will be manually re-orderable using the same drag 'n drop interface as other drupal admin tables (e.g. taxonomy terms, menu items, 'manage fields' in cck)

Step 3 - Adding the main page display:

First things first, we're going to create a page display for this employee listing  This will be the page that visitors of the site will see. We'll name it "DV_Page"...

...and assign it a path of employees/draggableviews...

Step 4 - Creating the DraggableViews sorting interface

Now we'll create another page display that with the DraggableViews style plugin enabled that we'll use for the sorting interface. We'll give it a name of "DV_Sort_Page"...

...and a path of employees/draggableviews/sort...


The next few steps need to be done in a specific order to avoid getting errors. Your first instinct may be to change the Style plugin to Draggable Table but there are a few things that need to be done before we enable it.

Firstly, we need to add the 'DraggableViews: Order' field. This is the actual "weight" of the row item that gets automatically changed as we drag 'n drop the rows. (Make sure you don't exclude this field from display, it will be needed a little later!)

Next, we need to add the field 'Node: nid' to the fields. This is because of how DraggableViews stores the order in the database. It creates a map of the Node's nid to a "weight" and saves it so that it can be used as a sorting criteria for ordering the rows.

SIDENOTE: Adding the nid only needs to be done in Views 3. In Views 2 the nid is passed into the result set by default, but it Views 3 you need to explicitly add it as a field!

We are also going to make the nid field excluded from display because we don't really care to see that when I'm sorting the rows later.

We also need to make sure these new fields are at the end of the fields list for DraggableViews to work. This is because DraggableViews will be attaching a little drag n drop handle to each row's first field and errors if the first field is hidden (remember, 'Node: nid' is excluded and 'DraggableViews: Order' will be hidden by default).

Also we can remove fields right now that will clutter up our sorting table. Remember, this is not the actual view, but just a table of the views results that can be re-ordered using Drupal's built in drag 'n drop functionality. In this case, for the purposes of sorting, I really only need to see the employee name and job title, so we'll remove the Body and Image fields.

Lastly, we need to change the sorting of the display to use the DraggableViews: Order (Ascending) rather than alphabetically. Our display at this point should look something like this

Now that our display is all set up, we need to change the style plugin from 'Unformatted' to the "Draggable Table" plugin.

And config the 'Order Field' to 'Order' (this is all you need to configure for the style plugin):

Step 5 - Adjust the Original View

The very last thing before you move on to arbitrary ordering glory is to change the sorting criteria of the original page view (The one we named "DV_Page") to match the DraggableViews order (from Node: Title to DraggableViews: Order)

It's important to note that the view 'preview' output at the bottom of the screen does not process the DraggableViews properly. You will need to visit the actual page (employees/draggableviews/sort) to get the proper functionality


Just Drag 'n Drop your new order and click 'Save Changes', then visit your employees/draggableviews page and voila! An Arbitrary order!

Stay tuned for Part 2 where we will explore the Nodequeue module and compare it to DraggableViews.

Feb 28 2010
Feb 28

The Nodequeue module is an incredibly useful module that allows you select individual nodes and place them in a list in whatever order you like. This lesson shows you how to create a new nodequeue, add nodes to the queue, arrange the queue and then add the queue to a view.

Note: Click the 'full screen' icon (to the left of the volume control) in order to watch online at full 1280x720 resolution.

Video Links

Flash Version

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web