Cooking with Drupal Views Templates

As Drupal developers, we are all familiar with the Views module and its strengths as a custom query generator. Often times, however, we need to do something custom with the data, to present the user with a more useful interface. Whether adding a custom header to a table, aggregating data (percentages, totals, etc), or even adding custom ajax to update content on the fly, the power of the templating system really comes in handy.

Let’s think of the views templating system in terms of providing a meal in a restaurant.

1. Pick Up Your Ingredients

In this step we focus on gathering ingredients, not presenting the final product. With this in mind, it's helpful to think of the Views UI as a query generator.

Let’s say you have a website that lets users browse restaurant information. You would like to present, for instance, the percentage of restaurants in uptown, that serve soup. Restaurants are a content type; “neighborhood” is a term reference on the node, and “serve soup” is a simple boolean field.

content types and boolean fields

Create your view, and filter by restaurants in Uptown.  In most cases, I recommend an “unformatted list” of “fields.”  In this example, the only field we will need in the view is “field_serves_soup.”

Before you save and exit the Views UI, take a look at the theme information, under the advanced tab, in “Theme: Information.” A good overview of how to create a template can be found here. I almost always find myself in the Row Style Output, which runs through the template for each “row” in your view. The data passed through the template will be an array of the queried fields.  When you create a file in the templates folder, in your theme directory, you can either clear the cache, or rescan the template files through the views UI. If you have named your file correctly, it shows in bold. You are now overriding the default layout with your own template.

2. Cook and Prepare

This is the preprocess step. Preprocessing for views templates happens in your template.php file in your theme. In essence, the preprocess function in this file lets you change the data array that is sent to your template. Be careful when naming the function. In Drupal 7, Views does not let you directly call a preprocess for a specific view. Instead, create a function that gives you the ability to create name-specific view pre-processes.

[prism:php] function bartik_2_preprocess_views_view_field(&$variables) { if(isset($variables['view']->name)) { $function = "bartik_2_preprocess_views_view__" .$variables['view']->name; if(function_exists($function)) { $function($variables); } } } [/prism:php]

In this example we are using a preprocess for the field level, so we call get access to each field output of our view. However, if you used another output, or wanted to alter the variables for another template, you can use:

[prism:php] mytheme_preprocess_views_view(&$vars) mytheme_process_views_view(&$vars) mytheme_preprocess_views_view_list(&$vars) mytheme_preprocess_views_view_field(&$vars) [/prism:php]

The best way to figure out how these work is to play around with them. Now we can call our template function by view name, and add our custom logic to determine the percentage.

[prism:php] function bartik_2_preprocess_views_view__percentage_of_restaurants_in_uptown_that_serves_soup($variables) { $total_uptown_restaurants = sizeof($variables['view']->result); $soup_count = 0; foreach($variables['view']->result as $result) { if ($result->field_field_serves_soup[0]['raw']['value'] == 1) { $soup_count ++; } } $variables['soup_percentage'] = $soup_count/$total_uptown_restaurants * 100 . '%'; } [/prism:php]

3. Plate and Present

This is the final step before the user consumes the content (excluding css). In this step, we take our final data array and use the fields template to organize our markup in a meaningful and useful way. In your template folder, within your theme directory, open the template folder you created for your view. I usually start by simple typing some html in there to see if it renders on the page. If you see your text showing up, lets see what variables we have available. Using the devel module, we can use:

[prism:php] [/prism:php]

This gives you an array of all the variables you have access to in your template file. The variables we are interested in live in the ‘variables’ array within this array. In there, we find the “soup_percentage” variable that we created with our preprocess function. With a simple:

[prism:php] [/prism:php]

We can see our variable printed onto our view page. Feel free to add any html or markup you would like to the template.