Drupal 6 Tutorial: Exposed Sort for Views 2

One of the powers of using Drupal is the ability to output lists of data in an almost unimaginable number of different ways.  A few months back, Ben Hamelin, another web developer here at Adworkshop, wrote a post about hacking Drupal Views.  Utilizing and modifying Views is embedded in our daily workflow since we work with many clients where listing data (i.e Lodging, Dining, Events, Shopping, etc...) is an important part of their travel and tourism marketing strategy.

One of the primary features overlooked in Views 2 is the ability to add exposed sorting options for your output data. Of course, Views by default provides an almost endless number of different filter fields that can be exposed to the front-end user, but an exposed sorting option is lacking in Views 2. This ability was added to Views 3 core, but I know a number of us are still using Views 2 on their projects in Drupal 6. Below, I will provide a simple way to add the exposed sort option to your Views 2 forms.

  This method of exposing a sort option comprises of 2 components:

1. Create a very simple module that will modify the query in views (when necessary) to add an order by clause.
2. Update the views exposed filter theme for our view to display the sort radio buttons.

Adding a Custom Module for an Exposed Views Sort Option

To start with, we should already have a view that we are going to add this sort to. It should contain some exposed filters already, so should look something like this: 

We will then create a Drupal module to handle the alteration of the views query. See the above link on module development; in essence we will need two files to create this simple module – an .info file to let Drupal know about our new module and a .module file to hold our actual code. In the example here, we are naming the module example_exposed_sort.

The example_exposed_sort.module file would contain the following code:

<?php
function example_exposed_sort_views_query_alter(&$view, &$query) {
if( isset( $_GET['sortoptions'] ) ) {
if ( $_GET['sortoptions'] == 'az' )
 $query->orderby[0] = 'node_title ASC';
else if ( $_GET['sortoptions'] == 'za' )
$query->orderby[0] = 'node_title DESC'; } }

We are using hook_views_query_alter to access the views query. Note that we are using passed value 'sortoptions' to determine whether to sort ascending or descending. This value will be set in our theme file. Also note that we are setting node_title as the column to sort by. This can extended to allow selection of the column in the view itself... but, I won't cover that here. After entering the above code, you should upload and enable your new module.

Creating an Exposed Form Template File for Views

The next step is updating (or creating) a views exposed template file. Views supplies an enormous number of theming options – one of them being the exposed form itself. This ability is useful since it allows you to clean up the default output.

To utilize this theme file, the naming conventions is views-exposed-form--viewname.tpl.php where the viewname is the machine name of your view. You can also target additional displays in your view by appending the display name to the end of this. This file will go in your theme directory and will require a clear of the cache after uploading it.

In this file, we add the content of views-exposed-form.tpl.php (located in views module directory under views/theme) and add the following code to the bottom.

<?php
$sortOp = '';
if ( isset($_GET['sortoptions']) ) $sortOp = $_GET['sortoptions'] ;
?>
<label>Sort Name</label>:
<input type="radio" id="sortoptionsA" name="sortoptions" onchange="javascript:$(this.form).submit();" class="form-submit" value="az" <?php if ($sortOp == 'az') print "checked"; ?> />A-Z
<input type="radio" id="sortoptionsZ" name="sortoptions" onchange="javascript:$(this.form).submit();" class="form-submit" value="za" <?php if ($sortOp == 'za') print "checked"; ?> />Z-A

In the above code, we first check to see if the 'sortoptions' has a value, i.e. if the form was already submitted. If it exists, we grab that for setting the default value of the radio buttons.

The next two lines create exposed radio buttons used for sorting. Since we are using <input> types, we have access to the form in jQuery via $(this.form). This allows us to submit the form when one of the radio buttons is clicked. Also, since they are form elements, the selected value will get append to the query string as the 'sortoptions' value.

This process also works well when the view is using AJAX. Even though the query string is not visible, the 'sortpotions' value is passed and the $_GET used in the above module can still retrieve the value.

When we're done, the updated exposed form will looks something like this: 

This is just the basics and the functionality and theming can be extended further, but that is up to you.