wpid2864-media_1349139894430.png

Creating Timelines for the web in FileMaker using TimelineJS


2014-08-09 Update: I have added a Virtual List export to complement the existing XML Stylesheet export. Both versions are in the scripts area for review.

I have looked for a good way to create easily shareable Timelines for a while. The obvious solution is to make a timeline viewable on the Web. Even better would be something that allows me to generate and view Timelines in my favorite database program, FileMaker Pro. I think I have found a good solution using FileMaker to generate HTML and JSON files for a Javascript library called TimelineJS from Verite.

Timeline Options

wpid2863-media_1346700024318.png

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.

FileMaker TimelineJS Demo File

wpid2864-media_1349139894430.png

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.

Timelines tab

wpid2873-media_1349141236844.png

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

Download the Javascript folder

wpid2865-media_1349139931536.png

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.

Edit HTML Template

wpid2866-media_1349139938553.png

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

Export Files

wpid2867-media_1349139943899.png

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

XSLT Stylesheet in a Container field.

wpid2868-media_1349139947848.png

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.

Export HTML and JSON files

wpid2869-media_1349139958353.png

Timeline view in a FileMaker Web Viewer

wpid2870-media_1349139972117.png

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.

HTML, JSON, Images and Javascript file structure

wpid2874-media_1349142232741.png

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.

Timeline Items

wpid2871-media_1349139979031.png

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.

Key script – Generate and Export JSON and HTML files using XSLT

wpid2872-media_1349140401800.png

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.

Image Handling

media_1349727560134.png

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.

Local Image Storage

media_1349727786201.png

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.

Locally stored image file

media_1349727843358.png

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

Finding and Fixing JSON errors

wpid2875-using_json_validator.png

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.

About these ads

5 Responses to “Creating Timelines for the web in FileMaker using TimelineJS”

  1. Dear Douglas,

    Thanks a lot! I have been waiting for it since you release the on-line version.

    Reason being that it was mentioned that you were using a Java Timeline library and that it is now possible for FileMaker to run Java Script. However, I also understand that it is not an easy job. Hence, I hesitate in making the request.

    Anyway, GREAT JOB!

    Regards,
    Omega Goh
    Speedy Scaleable Solutions
    http://www.speediDB.com
    omegagoh@speedidb.com

Trackbacks/Pingbacks

  1. UTF, WTF! Writing HTML and JSON from FileMaker | HomeBase Software - December 30, 2012

    [...] else can you ask for? To see this technique in action, have a look at my blog posting on creating Timelines in FileMaker Pro. There is a demo file included with the [...]

  2. Overzicht - Digitale Tijdlijnen - February 25, 2014

    […] Filemakertoepassing met TimelineJS van HomeBase Software […]

  3. TimelineJS - Digitaal Erfgoed - March 3, 2014

    […] een filemakertoepassing van Homebase Software die de JSON […]

  4. TimelineJS Onderzoek - Digitaal Erfgoed - April 21, 2014

    […] Homebase Software: TimelineJS met Filemaker […]

Follow

Get every new post delivered to your Inbox.

Join 49 other followers

%d bloggers like this: