Document Actions

Add a Timeline

by John R. Southern — last modified 2008-07-10 16:34

The Simile Timeline widget provides an intuitive means to view events along a timeline. This how-to explains the process of integrating it within a Plone site.

Purpose

The Simile project from MIT provides a collection of useful tools for enhancing web sites. One of these tools is the Timeline widget which allows event data to be displayed along a scrollable timeline. It is possible to integrate this widget without having to install any add-in products. This how-to details the steps involved in the process.

Prerequisities

In order to perform the work outlined in this how-to, it is necessary to have an account with site administrator privileges, as ZMI access is required.

Step by step

In order for the Timeline to display anything, it must first have an event source. We'll create a source, which provides the required XML-based event data feed using a Python Script.

access the ZOPE Management Interface (ZMI)
navigate to the portal_skins folder
in the custom folder, create a new Script (Python) object called getTimelineEvents
the code for this script is attached to the tutorial

Now that we have an event feed, we'll need to create a page which displays a timeline. For this, we'll create a new page template which contains the necessary JavaScript and timeline widget enclosed in a div element.

navigate to the folder where you want the timeline to reside
next, create a new Page Template object called index_html
the code for this template is attached to the tutorial

Once these steps have been completed, the timeline can be viewed by navigating to the folder which contains the page template. Since it is called index_html, it will appear as the default page for the folder.

Note: in order for the timeline to be populated with events, it is of course necessary to have events in the site which are in the published state.

Further information

Additional documentation pertaining to the Timeline widget and its associated API is available here.

Note: for users of the Collaboration Tool Service, this tutorial is also available here.

Softwerke Projects

Sections