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.)
FileMaker TimelineJS 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:
- Go to the Settings tab and download the FMTimeline.zip file to your desktop (or Documents folder).
- Make sure the file unzips.
- 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.
- Go to the Timelines Tab and click the button ‘Export HTML & JSON Files’.
- 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
Edit HTML Template
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.
XSLT Stylesheet in a Container field.
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
Timeline view in a FileMaker Web Viewer
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
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
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
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.
Local Image Storage
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
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
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.