In the DevCon 2018 training session on JavaScript, we took a look how to integrate various JavaScript libraries into FileMaker. We only got through one, and I’m sure I went pretty fast during the remaining minutes to make sure that I at least completed it. I might have lost a few folks. 🙂

But that’s okay. No DevCon Attendee left behind!

The week after DevCon I began to record videos of how to do the work. My plan was and is to work through each integration and walk through how I’d do the work.

So here’s the first one.

DataTables in FileMaker

Here’s the files for you to try out.

TL:DR

This video is long. It’s 53:00. So I broke it up into a few sections. Check out any of the sections in which you’re interested. (But, it’s good to watch the video in whole).

• Basic Setup: 0:00
• CSS Styling: 30:38
• Functionality (adding the row click): 38:20
• Table Options: 51:02.

Some Thoughts

It’s a fairly speedy process

I’ve done this enough that I can set up an integration in less than 20 minutes. I usually export all the code from a previous project or a practice file, so that makes things go even faster. And with more practice, you will get even faster. One DevCon attendee reported to me that he thinks it would take him 10-15 minutes to do another integration. The set up I’m advocating is simple. It’s fields and tables. That set up works for now.

Styling can take some time

The hardest part of this is styling it. You have to get down into the nitty-gritty of the CSS and adjust individual items. In the above video, I talk about it a bit, but this will require some more study.

The default library is a good start

DataTables comes complete with a full set of functionality. Once you install it into your custom app and load it with data, you can sort by columns, do filter-as-you-type, and adjust the number of records showing. There’s no additional scripting or buttons or tricks; just use what the (very well tested) library provides.

Alt ways

I’m suggesting one method here. But there are others, and we’ll discuss those in the future.

There’s one more method for using DataTables in FileMaker. For all my talking about using JavaScript in FileMaker, I’ve got a config file that will allow you to set up an integration without knowing any of the underlying JavaScript. Check that out here.

Onward

DataTables in FileMaker is one way we can innovate in FileMaker. We can provide a professional set of functionality to our clients. This functionality may not be needed for every list or portal. However, if the client asks that related records are sortable and searchable, we can turn to this library for complete help.

We’ll continue our study of JavaScript. Please join us in the SLACK channel, and we’ll talk about these. And stay tuned to our site for more integration videos.

Download the source, start file and finished file here.