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

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

2. 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.

3. 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

4. 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

Comments

Could you share more details on the...

...Event content type you created for your site?

Specifically I'm interested in which Location Field you opted to use. The CCK Location field or the 'Locative' one provided by the Location module to all content types?

And this was a great write up by the way, thanks!

Locative information

I used the Locative information configuration options on the content type, not the Location CCK field.

Setting up the Calendar View with an Exhibit JSON feed

I have all of the appropriate modules loaded and installed, yet I am not seeing the choice for 'Exhibit JSON' when changing the Style setting from RSS to Exhibit JSON in the following step from above:

3. 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"),

Any clues as to what I might be missing in my initial setup?

There's two things going on

There's two things going on here:

1) We're working on creating the first full release of the module that includes this new Views 2 integration piece. I thought it would be in a dev snapshot on d.o already, but apparently its not. Either pull the latest CVS version from d.o or use the snapshot of the Exhibit module from my GitHub repository at http://github.com/jhuckabee/drupal-exhibit/tree/master. They're both the same, so whatever's easiest. An official release should be out shortly.

2) The calendar view that you're seeing on my demo site is not part of an official Exhibit (Simile) API release yet. In your exhibit settings, if you point your API location to http://static.simile.mit.edu/exhibit/api-dev/exhibit-api.js, the extension will be there. Its been included in trunk, and I would imagine David Huynh will include it in the next release.

Thanks for pointing this out and let me know if you run into any other issues.

Question about the date

Question about the date settings in the view. I see you added both the .field_date_value and .field_date_value2 fields individually. That's what I was doing but both fields are displaying identically. I'm not sure if this is expected behavior from Date in Views or not.

Have you seen this? I'm using the most recent Date, CCK and Views modules.

temporary solution

I should also add that for a temporary solution, I created another CCK field (called enddate_dummy) that is a computed field and takes the value of the To field (_value2) of a standard date entry. Then, I add the enddate_dummy field to the View. Exhibit imports this fine.

Not an ideal solution by any means but it does work.

Hey John, I'm using the

Hey John, I'm using the latest CCK and Views as well. You should be able to use _value2 no problem. What version of the Exhibit module are you using? The version I'm using in this tutorial is actually the latest development snapshot (not the alpha2 that's up right now).

If you already have the dev snapshot, then something else must be wrong. Let me know and I can try to help out.

creating links in views

Hi,

I am new to Drupal and exhibit and would appreciate your help on this.

I created a CCK for entering some projects in our lab. Then I created a view as you explained in the tutorial.
I was able to do it but then I am facing some problems. I am providing one info of the list to give you an idea.

17 (link)---------------------------------------------- This is a link but it takes me the front page
label: 17
type: node
URI: http://localhost/drupal-6.12/?q=node/item#17 ------------------------------------------This is also a link but it does work
modified: no
Title: Warfighter Cancer Care Engineering---------------------------- I want this to be a link
Funded By: To be Funded by the Department of Defense (2007- 2009)

Actually I want only the Title (which should be a link to the project page) and the field Funded By to be displaced. I do not want the other info to be displaced.
How do I do this.
Any help will be great.

Thanks

Super Slow on IE8

This is a wonderful extension and I have been successfully able to implement it on my website. The only problem is that it seems to work fine when viewed using Firefox 3.5 but when I use Internet Explorer 8 it slows down to a crawl.

What could be the reason.

BTW. I'm using the calendar-extension-bundle.js script along with the calender-extension-bundle.css file without Drupal and reading directly from a JSON file.

The webpage is at http://www.mediamax.com.pk/websiteV2/prg_schedule.htm

Filter by event node type

Trivial, but the view should be filtered on the event content type (I assume).

Super Slow on IE8

Hi. Figured out the problem eventually. I had a few comments added to my JSON file using the HTML commenting method which is not compatible with JSON data structure. I removed all comments and that was it. It started working wonderfully at versions of IE and FireFox.

Wonderful stuff!!

Using the views JSON externally

I love this setup and am already using it at ysa.org/resources, but I'm trying to "widgetize" it and use the standard Exhibit HTML setup off-site; but it keeps throwing a syntax error for the feed when I'm using it outside. It's the same data, and even wget'ting it and saving it locally works (and sure, I could cronjob that, but it seems.... silly?)

Thoughts?

Thank you for sharing

I have used Exhibit before, for a list of Architectural Content repositories (http://caad.asro.kuleuven.be/MACEREPODB) and was now able to integrate it into a Drupal-powered site I am working on.

I still have difficulties to get the full interactivity programmed (e.g. the nodes from a view all have the type "node" and not their specific type) and I still haven't found out how to enter a url instead of plain text into a Table. Should this be done at the level of the view rather than at the level of the Exhibit?