There are a lot of good-looking and useful Javascript libraries. The good thing is they can be integrated into a web viewer in FileMaker. It is even possible to interact with the web viewer, display more information or navigate to a certain FileMaker record using the fmp protocol. A couple of years ago (times goes by..) I wrote about an interactive map of Sweden.
Lately I was in need to show events in a timeline. It might be made in FileMaker, but it is a lot easier using one of the Javascript libraries easily found on the internet. Without much consideration I choosed a library called VisJS.
The events are all in one table with an id, a date, a name, and a little bit longer comment. In this sample I have entered information about FileMaker versions (the dates are approximated) in an Events table. The information is from Wikipedia, and this blog.
The VisJS library needs an array in JSON format for the data to be displayed. I added a calculation field, Info, in the Events table for the JSON representation of one event record, it looks like this:
"{ id: " & id_event & ", start: new Date(" & Year(EventDate) & ", " &
Month(EventDate) & ", " & Day (EventDate) & "), content: '" & Content & "'}"
A JSON record begins with { and ends with } and it is all text concatenated with the & operator. In the JSON record I have 3 fields: id, start and content. The ”start” field is a Javascript date field, and the ”content” field is the text which is going to be displayed for each event in the timeline. I need the ”id” to make the timeline interactive.
Update 2018-07-30: The calculation is now using JSONSetElement introduced in version 16.
JSONSetElement ( ””;
[”id”; Events::id_event; JSONNumber];
[”start”; ”new Date(” & Year(EventDate) & ”, ” & Month(EventDate) – 1 & ”, ” & Day (EventDate) & ”)”; JSONString];
[”content”; Content; JSONString];
[”className”; Class; JSONString]
)
I have an interface table, TimeLine, with a global text field, gHTML, where I have copied the HTML code from ”basic example” found at the VisJS web page. The links to the library itself and its CSS are changed to a CDN, which means you will need internet access when you open the database in order to show the timeline.
In the HTML template I have a placeholder (<!TIMELINEDATA!>) for the JSON timeline data, like this:
... var items = [ <!TIMELINEDATA!> ]; ....
At the interface layout I have a web viewer with the following formula:
"data:text/html, " & Substitute(Timeline::gHTML;"<!TIMELINEDATA!>";Substitute( List ( Events::Info ); "¶";","))
The formula substitutes my placeholder in the HTML template with real data. All the JSON events for all event records are assembled with the List function. I use a cartesian relation to get all the events from the Events table. All new lines are also replaced by a comma (you can’t have new lines in the content field) just to make it valid JSON.
To make the timeline interactive I added one Javascript event to the HTML template, a function I found in VisJS called ”timeline.on (’select’)”, which means it will be executed when I click (select) on one of the events. The Javascript does only one thing, it calls a script in the FileMaker database using the fmp protocol with the id of the event as parameter. It calls the FileMaker script ViewEvent which does a single Set field script step, only to show more information about the selected event below the timeline.
Information about the selected ”FileMaker Pro 15” event in yellow is displayed below the timeline.
Please feel free to download a sample database and add whatever events you like.
Download Timeline.fmp12
Update 2016-07-19: Thanks for all the positive feedback! I did a new version of the sample file with tabs for the timeline and the HTML template. Actually I also got rid of a global field, gHTML, at the same time. It is now a layout object, a technique I have mentioned before. It is also possible to rename the sample file and maintain the functionality,
Update 2016-07-20: Adjusted month number by -1, in Javascript month is between 0 and 11 instead of 1-12. I seem to forget that all the time 🙂 The sample file nr 2 is updated accordingly. Thanks for noticing James!
Update 2018-06-15: In FileMaker 16 and later you need to allow the privilegie ”fmurlscript” otherwise it doesn’t work. The web viewer in Windows use an older version of Internet Explorer which can’t handle web sockets. To make it work in FileMaker for Windows a jQuery selector is added.
Update 2018-07-30: The function JSONSetElement is now used to create the JSON data.
Download Timeline3.fmp12 (updated 2018-07-30) You will need FileMaker 16 or later.