Getting Started with Exhibit using Drupal and Views (part 3)

In this last episode of getting started with Exhibit and Drupal, we’ll embellish the Exhibit we created in part 2 by adding some additional views, exploring the use of lenses and expressions, and adding another facet. Our final Exhibit can be seen here.

Adding Views to your Exhibit

So the first thing we’ll do is add several additional views to our Exhibit. The tabular view is nice and provides some great functionality, but Exhibit provides some additional views that are great at visually enhancing the way your data is displayed. We’ll start by adding a calendar view. To do this you’ll need the following code pasted within your viewPanel:

<div ex:role="view"
      ex:viewClass="Calendar"
      ex:label="Calendar"
      ex:start=".field_date_value"
      ex:end=".field_date_value2"
      ex:eventLabel=".title"
      ex:formats="date { mode: short; 
                         show: date-time; 
                         template: 'MM/dd/yyyy' } 
                  item { title: expression(.title) }"></div>

What all does this do? Well, to start we need to tell Exhibit this view is a Calendar type view with the ex:viewClass directive. Then we give the view a title or label using ex:label. The ex:start and ex:end attributes tell the Calendar view which fields in an item denote the beginning and ending dates of the event. The ex:eventLabel attribute tells the Calendar view which field (or expression, but we’ll get to expressions in a minute) is used as the label of the event that gets displayed on the calendar.

The final attribute in the view, ex:formats, is a way to tell Exhibit how to format various field types within this view. In this example we’re telling the Calendar view that we want all date type fields formatted in MM/dd/yyyy format and that we want items represented by their title. You can learn more about formats on the Exhibit Wiki.

Now we’ll add Timeline and Map views so that we can see our data laid out on a timeline and the display the events on a map. To use these two views in your exhibits, make sure that you’ve enabled their corresponding extensions in the Exhibit module configuration settings page. The code for these views look like this:

<div ex:role="view"
      ex:viewClass="Timeline"
      ex:label="Timeline"
      ex:formats="date { mode: short; show: date-time; template: 'MM/dd/yyyy' }"
      ex:start=".field_date_value"
      ex:end=".field_date_value2"
      ex:topBandUnit="week"
      ex:bottomBandUnit="month"
      ex:eventLabel=".title"></div>
  <div ex:role="view"
      ex:viewClass="Map"
      ex:label="Map"
      ex:lat=".latitude"
      ex:lng=".longitude"
      ex:formats="item { title: expression(.title) }"></div>

One last tip about adding multiple views to your Exhibit - the order in which you place your views within your viewPanel is the order in which they will show up in the view selector. So, the first view you have defined is what view will be displayed by default when the view is generated.

Creating Custom Lenses

Now that we have all of the view we want to use in our Exhibit, lets create a custom lens. The lens is what defines how each item is displayed in the popup that is show when you click on the item in the calendar, timeline, or map view. You can customize the lens for each of the views by embedding the lens within the view, or you can set a global lens by embedding the lens just within your viewPanel.

The lens I’m using for this demo looks like this

<div ex:role="exhibit-lens" style="display:none;">
    <div ex:content=".tid" style="float:right;"></div>
    <h3><a ex:href-content="concat('/node/', .nid)" ex:content=".title"></a></h3>
    <p ex:content=".body"></p>
    <div style="margin-bottom: 5px;">
      Tags: <span ex:content=".tid_1"></span>
    </div>
    <div>
      <h5>Location:</h5>
       Latitude: <span ex:content=".latitude"></span> Longitude: <span ex:content=".longitude"></span>
    </div>
</div>

Notice the ex:role attribute and the style setting of the lens. The “exhibit-lens” role tells exhibit this component is going to be used as a lens. Also, without the inline style attribute setting the display attribute to none, when you first load your Exhibit you will see that lens flicker once until Exhibit can process it.

One other neat trick that you should note about this lens is how I’m creating the link to each node. First notice that we have an ex:href-content attribute in the anchor tag. This tells Exhibit that we’re going to be using an expression to define the href attribute of this tag.

Expressions

Now let’s talk a little bit about expressions. If you’ve dug around the Exhibit wiki, you’ve probably noticed that this feature is referenced in several examples but documented nowhere. An expression can simply reference a field within an item by simply using a dot (“.”) and then the field name (you’ve probably noticed the “.” in front of field names in the definitions above) or it can be a combination of functions and field names to output computed data. Besides simple field name references, the most common expression I seem to use is the concat function. Concat does just what you think, it concatenates a group of strings into a single string. You’ll notice that I used concat in my lens above to create the URL path used in my link tags.

There are numerous other functions hidden away in Exhibit that nobody seems to know about. This is a case where the actual code can serve as great documentation. You can see the actual function definitions on the Simile SVN repository.

Wrapping up

The last thing I’ve done to this exhibit is add an additional facet. This is a date range facet that can be used like a date picker to filter out the events based on their dates. The code for this looks like…

<div id="event_date" 
         class="facet" 
         ex:role="facet" 
         ex:beginDate=".field_date_value" 
         ex:endDate=".field_date_value2" 
         ex:facetLabel="Date Range" 
         ex:facetClass="DatePicker" 
         ex:collapsible="true"></div>

And that concludes my series on getting started with Exhibit using Drupal. You can check out the final Exhibit on my test server. I hope you’ve found this series useful. As always, feel free to leave a comment if you have specific questions. Or, to learn more about Exhibit, check out the Wiki, or the Google group.

Hope you all have a safe and Happy New Year!