Ok, now that we know a bit about Exhibit and how Drupal can help us create Exhibits, let’s start by getting our Drupal data in Exhibit JSON format.

Setup

The setup I’m using for this tutorial includes a Drupal 6 installation with the following modules enabled: Exhibit, Views 2, CCK, Date, Location, and GMap. I’m only using CCK, Date, Location and GMap to create a custom Event node type with date and location fields. I’ve also added taxonomies to the Event node type for event type and tags. You can create your own node type and add whatever fields you would like. I’m using this setup to demonstrate the broadest possible uses of Exhibit. With this Event node type, we’ll be able to create an Exhibit complete with Calendar, Timeline, Map, and Interactive Table displays. You can visit my playground here: http://d6demo.joshhuckabee.com

Create Exhibit JSON from your Views

Fortunately the Exhibit module provides us with an easy way to convert the data in Drupal to Exhibit’s native JSON format. To do this I’m going to create a View and add an Exhibit JSON feed display to it.

  1. Create your view at admin/build/views/add. Since mine will be based on Event nodes, I’m choosing Node as my View’s type. You can also add the Exhibit feed to an existing view. If you already have your View setup, skip to step 3.

Create your View

  1. Add your fields. Now that we have our View skeleton, we’ll add the fields we want available to us in the Exhibit to the View. It should be noted that Exhibit expects all dates to be in ISO format. So, if you’re adding date type fields other than CCK date fields make sure to set the appropriate format so that Exhibit can use them appropriately.

  2. Add the Exhibit JSON feed display to your view and configure it. The important configuration settings for the the feed are a) the Style (set to “Exhibit JSON”), b) the Row Style (set to “Fields(Exhibit)”), and c) the “Items to display” (set to unlimited by entering 0) options under the “Basic Settings” and the path setting under Feed Settings.

View full size demo

  1. Configure any filters or sorting. Since I’m only concerned about event node types, I’ve added a node type filter to include only Events.

Creating the Exhibit

Now that we have our data available in a format that Exhibit likes, we can begin to create our Exhibit. If you are new to creating Exhibits, check out the first part of this tutorial and Simile’s Getting Started guide for an intro on what’s involved here. In this first tutorial we will create a simple interactive list display of our events with a few facets. In the last tutorial we will embellish this Exhibit with additional displays and facets to showcase more of what you can do with Exhibit.

Create your new Exhibit by going to node/add/exhibit. Fill in the usual title and jump right down to the Exhibit section of the node form. You will notice this section is made up of 3 parts, 1) Data feeds, 2) Definition, and 3) Facet definition. The Data feeds section lists all available data feeds that you’ve either created in your Views (like we just did) or that you setup manually at admin/content/exhibit. Here you will select one or more data feeds that you want to be made available to your Exhibits and for our purposes I’m going to chose the feed I created in my view above.

The next section is the main Exhibit Definition. This is where you add all of the Exhibit views like Timelines, Maps, Scatterplots, lists, etc and any lenses you might be using within those views. You can add facets here as well, but in most cases you will want your facets displayed in another region within your theme like a sidebar, header or footer.

This brings us to the Facet definition where you define all of the facets you want available to your users. The facets defined here will be available in a block, called “Exhibit facets”, that you can move to any region within your theme and configure from the block admin page at admin/build/block.

Unfortunately there isn’t a way to split the facet definition up into multiple blocks. This can easily be accomplished by creating a custom block, adding the facet definition, and configuring it to only display on your Exhibit node page.

For this first iteration we’re going to add a simple list view to our main definition which looks like:

<div ex:role="viewPanel">
  <div ex:role="view"
        ex:viewClass="Tabular"
        ex:label="List"
        ex:columns=".title, .field_date_value, .field_date_value2, .tid"
        ex:columnLabels="Title, Start Date, End Date, Event Type"
        ex:formats="date { mode: short; show: date-time; template: 'MM/dd/yyyy' }"
        ex:sortColumn="1"
        ex:sortAscending="false"
        ex:cellSpacing="0"
        ex:cellPadding="0"></div>
</div>

And, for the facets, we’ll add a keyword search facet and list facets for Event type and tags to our Facet definition:

<div ex:role="facet" ex:facetLabel="Search" ex:facetClass="TextSearch" id="search"></div>
<div id="event_type" ex:role="facet" ex:expression=".tid"  ex:facetLabel="Event Type" ex:collapsible="true"></div>
<div id="event_type" ex:role="facet" ex:expression=".tid_1"  ex:facetLabel="Tags" ex:collapsible="true"></div>

Configure the Exhibit Facets Block

Lastly, I want the facets that I’ve defined in my facet definition to display in the right sidebar, so I need to configure the Exhibit facets block in admin/build/block and make sure it is enabled and placed in the correct region. This block only gets rendered for Exhibit node types, so you don’t have to worry about configuring the display settings.

That’s it. You should now be able to browse to your Exhibit, see the view and facets you’ve defined and test it out. This might not appear like much a first, but as you can see we have built in client side sorting by column, faceting by keyword, event type, or tag, or exporting capabilities all without going back to the server.

You can see my demo for this tutorial in action on my Drupal playground. In the next episode we will expand upon this initial exhibit with additional views, lenses, and facets.

Continue to Part 3