Creating Timelines for the web in FileMaker using TimelineJS

Way back in the pre-Internet days I had a biblical timeline that started around 5,000 years ago. Realizing the limitations of that view of history (it left out the dinosaurs), I still found it fascinating to pour over and put recent historical items into context. The one I had was hand drawn and laminated and folded out into a series of pages. The timeline stopped around the time of the Second World War, a victim of the un-upgradable nature of paper. Fast forward to the computer era and there are a number of interesting options available.

There is a very nice looking Macintosh app called Timeline3D from Beedocs, but it requires you to sign up for their paid web service to display your timelines. I wanted something that I could generate and upload to whatever web site I chose. I played around with Google’s Simile project and looked at Timeline Maker, a FileMaker Pro implementation of Google’s Exhibit. These are cool, but I had trouble getting them working consistently. (see my rant about UTF-8 issues in FileMaker.)

Recently I stumbled on a really nice Javascript library called TimelineJS from Verite. It has a fresh look to the timelines and features a combination of slideshow at the top with a timeline running along the bottom of the screen. I decided to put together a FileMaker Pro database that would nicely keep track of multiple timelines and export to the TimelineJS format. In the demo file are the records I used to create the History of FileMaker Timeline.

Download Demo File

2012-11-05 – Demo File updated. Modified the Web Viewer address to dynamically update if the base folder and file name is changed. Added a routine to the Image Export to insert an image path into the Media field if it is empty. This will ensure there is a path to the media in the JSON file when it is exported.

The demo file requires FileMaker 12. There is no reason the techniques employed here could not be built in FileMaker 11, it is just that I have been wanting to start building more projects in FileMaker 12. Apologies if this causes any problems for people who have not yet upgraded. You could always download a 30 day demo of FileMaker Pro 12 and then copy the ideas into a FileMaker 11 or below database.

The Hasty Person’s Guide:

1. Go to the Settings tab and download the FMTimeline.zip file to your desktop (or Documents folder).
2. Make sure the file unzips.
3. If you are storing your images in the database (as opposed to just employing URLs to remote images), download the image files to your HTML folder by going to the Timelines layout and clicking the “Export All Images” button.
4. Go to the Timelines Tab and click the button ‘Export HTML & JSON Files’.
5. View Timeline in Timeline View.

1) setup a new Timeline.
2) add items to an existing Timeline.
3) drill down to a specific Timeline Item to edit the contents.

1) Set the Path to Documents, Temporary, Desktop.
2) Set the SubFolder name. Make sure this name matches the Download Folder Name
3) This container field contains a zipped folder structure designed to hold the Timeline HTML and JSON files as well as folders for the TimelineJS Javascript, CSS and locally stored Images.
4) Download the Javascript files and folder structure to the appropriate location. If you are going to create a new Timeline, duplicate this folder and rename it to match your new timeline name. Also change the SubFolder path name.

You can edit the HTML template, but be sure to leave the merge fields in place for the Headline and FileName.

The text in these fields will only be updated after you run the “Export HTML & JSON Files” button on the Timelines layout.

The only option here is to change the XSLT location from Temporary to With Files. Temporary is the better setting, so that your HTML Folder doesn’t get cluttered with extra files. Change it if you want to view the XSLT file to see what is going on. For more information on this, I refer you to Beverly Voth’s excellent article on Exporting Field Contents using XML/XSLT.

If all has gone well, your Timeline will be generated and you should see it in a WebViewer in FileMaker. To view the file in a web browser, hold down the Option Key and you will get a dialog box telling you where the files are exported to.

1) CSS files
2) Javascript files
3) Images folder (this is only used if you are storing the images in the FileMaker database.)
4) Timeline HTML file
5) Timeline Items JSON file

One of the reasons I have opted for a zip file of all the Javascript and CSS files is so that when Verite updates their library, you should be able to download a fresh copy and put the CSS and JS folders into this one, getting the benefit of their new features.

1) Add another item to the current Timeline
2) Generates a name for the image file based on the Timeline Item headline.
3) If a URL is entered into the Credit field, FileMaker can go and get that image and insert it into the Image field.
4) Export the Image to your computer.

The most important script is the one that generates the HTML and JSON files from the FileMaker data. Have a close look at it if you have the inclination. The interesting thing is the technique employed to export the files. It involves exporting an XSLT stylesheet from a container field and then exporting the two text files as XML files, referencing the stylesheet to transform it into UTF-8. If you are interested, I recommend reading through Beverly Voth’s blog posting on the topic mentioned earlier.

With this demo file, it is possible to handle images both locally or from remote servers. This is the simplest approach and recommended if you know the images you are referencing will remain fairly static.

To use a remote URL:

1) Paste a URL in the Media field.
2) The image will show up in the Remote Images web viewer.

3) To store an image locally, both in the FileMaker database and in your HTML directory, click on the Local Images tab.

You may want to gather the images you are referencing and store them in the FileMaker database and within the HTML folder you are building.

Click the Cloud download icon and then click OK in the dialog box.

1) the remote image is now stored in your database in a container field
2) the Media image URL has been updated to a local version
3) The Credit field now contains the original image URL.

4) The final step is to save the image to the local HTML directory, in which your JSON and HTML files will be stored. It is also possible to run a batch save of all locally stored image files from the main Timelines layout. The button is called ‘Export All Images’.

JSON can be a finicky format. One little comma or paragraph mark out of place and the entire file will not display. In developing and testing the Timeline solution, I employed a Mac program called JSON Validator. There are a number of other JSON validation apps, including free ones on the web, so have a look around. Using a program like JSON Validator saved many hours of squinting to quickly locate my errors. If you having problems displaying your timeline, here are the steps to locate the problems:

1) Copy the JSON_Export text after you have exported it. Either from the .json file or in Settings: Export Files: JSON_Export field
2) Launch JSON Validator
3) Paste the text into JSON Validator and click the
4) Validate button
5) Errors show up in Red.