2016

Jul

18

Av

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.

Timeline_events

 

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.

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.

Timeline_sample

 

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!

Download Timeline2.fmp12

5 kommentarer till ”Timeline with web viewer”

  1. Lutz

    Hallo,
    Works fine in FileMaker but I can’t see the timeline in Webdirect mode. The Webviewer area Stays empty. By trying the htmlcode directly in a web browser works fine. Du you have any solution?

    Reply
  2. Jan Stieperaere

    Hi Rolf, really nice done!
    Didn’t know that I needed something like this in a project till now.
    Very nice to have an overview of an accreditation process in this way, a picture says 100times more than a couple of dates… THX!

    Reply

Skriv en kommentar

  • (will not be published)
  • − 5 = two

Läs också: