Recipe: A Lightweight Framework to Present Digital Collections

The technology exploded in this solution is absolutely ancient by today’s standards. As a result, it is tried, tested and true – offering a lightweight means to present raw collection data and metadata without elaborate coding, use of dedicated applications or development of bespoke web applications.

It employs the metaphor of a recipe, a technique for sharing technological processes in a familiar and approachable way explained in a paper I presented at the 2006 CaSTA Conference.

The Recipe

This is a recipe for a lightweight solution to present research data or digital collections and associated metadata using a number of visualisation methods.

It allows for creation of an online ‘exhibit’ without elaborate coding using an open source framework.

The resulting product is searchable, browsable, discoverable, scaleable, sustainable and reusable.


  1. A Dataset (a tabular collection of objects and their associated metadata)
  2. A Google Account
  3. Slight HTML knowledge
  4. CSS knowledge (optional)
  5. A Publicly-accessible Place to Store the HTML file
  6. A handy html exhibitSimple (Template).



Prepare the Data

  1. Open your datafile in Excel or Google Docs. If you prefer to work in Excel do so and simply upload the finished datatable to Google Docs when you have finished the steps below. To share the file it must be accessible in your GoogleDocs Drive.

Column Headers need to conform to a standardised template. This can be accomplished by either adjusting your existing column headings or copying your data into a pre-existing template. In the simplest instance I will advocate for modifying your existing headings.

Use of exhibit requires three specific columns be present to render your data.  {label:text}, {id:text} and {type:text}. Furthermore, the values in the id column must be unique for each row in your dataset and all headings must be enclosed within squiggly brackets with the name followed by a colon and the word text* (See later note).

  1. Edit all of your existing columns to conform to the format { yourColumNameWithNoSpaces:text}.
  2. Add a new column labelled {label:text}. I would suggest you copy values into this column that provide a unique human comprehendible identifier for each of your objects. If this were a collection of books, the title would be most appropriate. If it were a collection of photos this may be the caption associated with the photo. The only requirement is that it should be something useful to help a browser of your exhibit recognise.
  3. Add a new column labelled {id:text}. All values in this field must be unique for each object. No object must share an idea value. If you have existing unique identifiers you could copy them into this column – otherwise creating a sequencing on no repeating numbers will suffice or concatenating existing column to create a unique key will also work fine.
  4. Add a third new column labelled {type:text}. This column contains a simple descriptive term for the ‘type’ of object in that row. Again using the examples above, a collection of books could use the term ‘book’ or ‘manuscript’. The only really important aspect to be aware of here is to keep the spelling consistent.
  5. If you have edited your dataset in Excel, save it and load it into your Google Docs directory.

Publish your Data

Publish your Google Docs Spreadsheet for the Web.

You will find Publish to the Web … under the File menu in Google Docs. Clicking Publish will make your data machine accessible. This does not mean that it will appear in Google searches. However, the URL that will result can be entered into a browser and your data will be presented in a tabular format.

  1. Copy the URL that is presented when you click publish.

Screenshot 2016-06-01 14.18.57

  1. Paste the URL into the box presented on the web page at: SheetstoJSON and click the submit button.

Screenshot 2016-06-01 14.23.38

  1. When you click submit the page will inform you that “Looks like there are multiple sheets in that spreadsheet. Which do you want to use?” This is normal. If you have a single worksheet in your Google Doc just click the second submit button. Otherwise choose from the available sheets that it finds and then click the submit button.
  2. You will then get a final usable URL for use with your Exhibit. It will be labelled as Output URL: This is the one to now copy for use to present your data. Copy this URL.Screenshot 2016-06-01 14.28.15


Modify the Exhibit Code

  1. Open the HTML template for Exhibits – exhibitSimple.html.
  2. Save this file with the extension .html and rename it as something more meaningful to your project – no spaces in the filename.
  3. Find the text in this template file “<YourGoogleCodeGoesHere>”. It should be on line 5.
  4. Carefully replace all of this text with the URL you copied in the step above.

Screenshot 2016-06-01 14.45.18

  1. Choose 3 of the most important columns that you would like to allow users to see as choosable lists and copy the exact fieldnames into the places in the same html labelled <usefulFieldname1>, <usefulFieldname2> and <usefulFieldname3>. Note that there is a period preceding each of these placeholders. Do not replace it. It should precede your column names. Note as well that you can have more or less than three columns to be viewed as these lists, we use three for demonstration purposes. As well, the ex:facetLabel value is the text that is displayed above your list column. It can be whoever you feel what be most useful to your users.
  2. Copy this html file to a publicly accessible server. You can attempt to load it from your local machine via your web browser, and while this may work, it may not due to local browser security restrictions. It is more reliably accessed from a web server.

Share the Exhibit

  1. Once this html file is copied to the server you can browse to it from your local web browser and you should see a screen that is similar to the one below. You data is now publicly shared, searchable, browsable and reusable.

Screenshot 2016-06-01 14.54.37

You have now created a powerful, flexible and extensive online platform for sharing your digital collections. You may wish to extend its capability by exploring the recipes below.



Further Information

  1. Simile Exhibit Wiki
  2. Exhibit Google Discussion Forums
  3. Google JSON Decoder
  4. Tutorial 1
  5. Tutorial 2 (More recent and further ranging including the Google Sheets Step!)

Related Recipes

  1. Recipe: Geocode and Display the Data on a Map
  2. Recipe: Work with Time and Date and Display on a  TImeline
  3. Recipe: Work with Images and Display as a Thumbnail Gallery
  4. Recipe: Update the Exhibit
  5. Recipe: Change the Look and Feel of the Exhibit