FMT Filemaker Today
The FileMaker Developer Source

Start With a Free Consultation

Using #JavaScript in #FileMaker without Knowing JS

You know me. I enjoy working with JavaScript. I learned it from my context of a FileMaker developer, and I think everyone can and should consider using it in some aspect of their work. We all can adopt a FileMaker integration. This year I’m lucky to teach a training session at DevCon, where I’ll guide people through the basics and how to apply it to their work. While not every answer I give on the forums is about some JavaScript integration, I do promote it where applicable.

The time barrier

But I do realize that there are barriers to the language for us FileMaker people. I asked a question about this a couple of weeks ago. Most people responded with ‘time’. They simply don’t have time to learn the language. I think that is more of a perception than reality, but I acknowledge that idea. My training session will work to break down that barrier, by the way.

Because of this perceived barrier, I want to give folks a way to use JavaScript integration’s without actually knowing JavaScript. How you ask? Well, this goal is accomplished by a cleverly-created FileMaker file: The DataTables config file. Let’s take at this barrier-smashing setup.

Introducing DataTables Config

The goal of this file was to give anyone the ability to implement the DataTables integration into their custom app. And the DataTables JavaScript library provides a heck of a lot of functionality for list views or lists of related records with no additional coding. You can set up a web viewer that shows related records with column sorting, go-to-related-records, column or row colors, filtering, etc.

DataTablesConfig.fmp12 is a  FileMaker file that simply generates the JavaScript needed for the integration after the developer adds or removes functionality. Here’s what it looks like.

I’ll say it again. This config file lets you set up the DataTables integration without messing with the JavaScript. After only ten minutes of setting it up, the above configuration produces this:

Gettin’ you hooked

This config file is meant to be a gateway drug into using JavaScript. Once you try it out and see how much functionality it adds to your custom app and how easy it is to set up, you’ll be interested in diving into the JS code. I guarantee that. You’ll want to look at the JS code (it really is just text) that makes this all happen. You’ll find it is easy to read (JavaScript is easy to read) and you’ll be inspired to mess around with it, to change something to see what happens. And in this case, no one gets killed by the curiosity. Mess it up, you can use the config file to revert back.

You’ll be hooked on JavaScript, and then you can continue to learn more about the language. We at Geist Interactive will guide you along.

Features of the DataTables config file

There’s too much to explain in detail here in a blog post, so be sure and check out the video that walks you through the app. But here are some highlights of its features.

  1. DataTables comes with a lot of default features and options. If you don’t want to customize your implementation, you can generate the default code quickly.
  2. You can add or remove features and options using the FileMaker data fields and UX provided here.
  3. There are detailed examples of how to format the text you wish to put in. For example, if you choose to have your default table sorted by column 3, you can choose the ‘order’ option and then pass to that option the following text: [2, “asc”] (this is a 0-based index). That’s easy enough to type, don’t you think?
  4. You can add additional extensions to your implementation, functionality that makes the integration more complex. Such as something that looks like a sub-summary report (grouped records) in little time.
  5. There’s plenty of help and descriptions of the features.
  6. You can (and should) map your fields to this config, and you can describe how each column should behave.
  7. You can add a callback function (Run a FileMaker script when you click on a row) and even assign a column to use in the search.
  8. You can set this file up to be a module, a separate file next to your custom apps and link to it. This action allows you to use the code stored here to display the data.
  9. Give some basic custom styling to the table.

There’s so much more that can be done, and we’ll explore Extensions, custom CSS, and calling FileMaker scripts in later posts and videos.

FileMaker Integration: Give it a try

I strongly encourage you to give it a try. Play with it, mess it up, do all sorts of stuff to it and figure it out. I promise it will not take hours and hours (maybe one or two). It won’t be a huge drain on your life

Feel free to reach out at jeremy@geistinteractive.com with questions if you wish. I can answer some questions, or we can set up an implementation package to do some custom development with this configuration in your custom app.

Let me know how it goes.

00:38:06

Comments are closed.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More