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.

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.

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!

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.

13 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?

    Svara
  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!

    Svara
  3. Andre van Haren

    Hi! Thanks for this time line tool. I am trying to integrate it in my filemaker project. It seems that a timeline view is not connected to a specific record, is that correct?

    Svara
  4. Rolf

    Glad you liked it!

    The table used for the web viewer layout has only one record. All the timeline data is in a related table. I hope you will be able to integrate it in your solution! If you need any help, please don’t hesitate to contact us!

    Svara
    • Andre van Haren

      Thanks! My solution is a story development program and this looks like something I could use to give the different characters and the story events each their own timeline, but for this to work the timeline cannot be Global. I will see if I can figure this out 🙂

      Svara
    • André Van haren

      Hi again, Rolf!
      I adjusted the Timeline to fit my program style and was wondering now if it is possible to enter an event’s End Date as well. How would I do this?

      Also, it would be nice if there would be a way to enter the Event’s starting hour because it is possible to show hours in the Timeline display.

      thanks for this great feature and best wishes,
      André

      Svara
  5. Rolf

    I am glad you managed to integrate the timeline view in your solution! There are plenty of possibilites in the Javascript library VisJS I used for this example.

    Please have a look at visjs.github.io/vis-timeline/docs/timeline/ for documentation and more examples.

    Svara
    • André Van haren

      I had a look and was very excited to see that I could get the items in the timeline draggable and resizable. However, then I noticed that the date fields in the Event records are not updating when dragging, so even though it is a nice option, it’s not usable this way. I do not know enough about this programming language to make these fixes, but in case you have future plans to release an update … 🙂

      Svara
  6. André Van haren

    Hi Rolf,
    I just noticed that after having turned the filemaker solution into a runtime, the timeline display does not show anymore. Does this mean it doesn’t work with runtime or is there something else going on?

    Svara
    • Rolf

      I have not tried using the timeline display in a runtime myself. In fact, I have very little experience with the FileMaker runtime version, and from version 19 it is no longer available. A lot of things don’t work in runtimes, but web viewers should work. Fmp urls does not.

      Svara

Skriv en kommentar

  • (will not be published)

Läs också: