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!

Comments

Calendar view

Hi Josh,

I love what you've done with Exhibit. One question that I'm hoping you might be able to help with. I have not seen the Calendar view mentioned anywhere else. Based on looking at the source of your page, it doesn't *look* like you did anything special to support it. However, when I add a div tag with ex:viewClass="Calendar" I get an error in the browser "Unknown viewClass Calendar". (BTW, I added the div tag to an already functioning Exhibit.)

Any thoughts?

TIA,
-Mark

Mark, the Calendar display

Mark, the Calendar display (and the calendar facet) is a custom display that I created and have contributed back to Exhibit as an extension. You will need to grab the latest trunk version of Exhibit (both the Exhibit API and the Exhibit Drupal module) to enable this to work.

Make sure to enable the Calendar extension in the Exhibit module settings once you have the correct versions.

Let me know if you run into any other issues.

Thanks Josh. I'd like to try

Thanks Josh. I'd like to try that. Just to be sure, you mention the Drupal module. I don't see anything in the Simile-Widgets SVN that mentions Drupal. If I checkout (and localize) everything at http://simile-widgets.googlecode.com/svn/exhibit/trunk, will I have everything I need?

-Mark

Date Picker Error

I appreciate the 3 articles you've put together on the Exhibit module. I've learned a lot from that and the Wiki. I wanted to utilize the date picker that you installed for the facets, but every time I put the code in and navigate to the page to see that it works I get an error saying:

Caught exception: undefined
Details: 'undefined' is null or not an object

I'd greatly appreciate any help you could give me on this.

Need to enable each exhibit type in Exhibit configuration

Hi Josh,

Great tutorial. One thing that's not very clear is that you need to go and "turn on" each Exhibit APi (Calendar, Timeline, etc) in Home>Administrator>Site Configuration>Exhibit> and then in the Exhibit Extensions tab at the bottom. You briefly mentioned it I think but it's not very obvious or prominent and I had a little trouble figuring out why it wasn't working.

I've got a lot of Exhibit experience but not a lot of Drupal experience and others in the same boat could benefit from highlighting that setting.

getting the content INTO Drupal for Exhibit to display

OK, I think Ive followed this tutorial and gotten the functional exhibit working.

But I can't get the content IN to the Drupal to view. I try and add content, my option is for a new Exhibit, Story, or Page. Exhibit takes me to a new feed, no ability to add an entry. A story or page will show up in my tabular Exhibit view but I can't add taxonomies, location, city, lat or long, etc.

How does one get the content into the Drupal database?

Numerical Sort

Is there a way to get exhibit to sort columns numerically, instead of alpha-numerically?
I have: ex:columnFormats="text, number, number, number"
and also in the code:
properties: {
"COMMON" : {
valuetype: "text"
},
"_C2__Sum" : {
valuetype: "number"
},
"_C3__Sum" : {
valuetype: "number"
},
"_C4__Sum" : {
valuetype: "number"
}

Yet it still sorts it alphanumerically (i.e 834,75,67,59,36,296,29)

Links

Hi John,

I got everything to work with drupal and exhibit. Currently I have an exhibit listing a bunch of content nodes. However, I would like the title of each content node to link back to its respective node. Do you know how this can be accomplished? I haven't seen much documentation on links.

Thanks,
Dave

Some issues

Hi Josh,

Great tutorial indeed! I've been tried to set up a photographic gallery and managed to make it work more or less. Some issues:

- I cannot make the facet block to appear for any user apart from the admin user. Must be something to do with the permissions, but I've been trying and trying and cannot find what's going wrong.

- I'm trying to integrate Thickbox on it, but I haven't succeed. The problem is that the Exhibit gallery loads at the end of everything, just after the Thickbox have modified the image link attributes to add the 'initThickbox-processed' class. Any tip on how to overcome this?

- I'm using the Tabular view. I would like the titles of my items to be linked to a popup label, in the same way as it happens on the Calendar or Map views. Do you know if Exhibit can provide this functionality?

Very much appreciated if you can give me some hints. In any case, congrat for the article!

Inigo

same problem

hi there!

hope you are doing well!

i have a tabular exhibt, based on the view. in the view i have specified that a node-title should link to its node, but the link does not appear in the exhibit table. seems like it is filtered somehow..

how can i have a row of a exhibit table linked to its node?

greets + thx,
walter

linking back to the node

To link to a node, this is what I did:
1. added the node title (.title) and Node ID (.nid) to the views feed.
2. In the exhibit definition, add something like this line:
.

The 'concat' with the 'node' and '.nid' creates the url "http://yoursite.com/node/nid".

Josh...since you are linked

Josh...since you are linked on the exhibit site, any idea how to deal with this error: http://drupal.org/node/558184#comment-2190168 ?

I am not a coder, so I am not quite sure what is happening to the code that is affected by the views-dev versions.

Any help would be appreciated!

??

I'm sorry, viewPanel??