JavaScript Libraries that solve FileMaker Use Cases

There are lots of JavaScript libraries out there that serve to solve FileMaker use cases very well. These libraries include a ton of functionality that we would have to build with scripts, objects, fields, etc.

Here we review useful libraries that solve FileMaker use cases. This is an ever-growing and changing list.

So review these use cases and the suggested library. Download the sample files and even review the companion videos on Claris Academy (click on the “Integration” folder).

List View

A list view in FileMaker is a common layout to build. In this view, you see a list of records, and that’s pretty much all you get. There’s no column sorting or type-ahead filtering, no paging. The performance of a list view can vary if you wish to show multiple unstored calculation fields.

Fancy Grid

The Fancy Grid library is a commercial list view. We’ve surveyed it here simply because we’ve written so much about the free library Data Tables.

This library gives us a lot of functionality built in: the column sorting, filtering (global and column-specific), paging. It even allows for different column formats, such as a switcher, checkbox, and even sparklines charts. And there’s no performance hit for displaying many records. There’s a lot of power in this library.

Fancy Grid also provides the functionality to turn data in to data trees, charts, dashboards, etc. See “Additional Examples” for further details.

Download the Files

Highlights

Tons of Built in Features
Edit each cell
Put Sparklines or Charts in each Row
Data Entry controls such as switchers, checkboxes, etc.
Uses JSON data from the Execute FileMaker Data API step
And so much more

Possible Options

Here’s a list of great options:

Global or individual column sort
Global or individual column filter
Individual cell formatting
Individual row or cell coloring
Adjustable row sizes (hard-coded or flexible)
Adding a form
Grouping by a column
Titles / Footers

Considerations

This is a free plugin library, but also a commercial one.
You can use the Execute FileMaker Data API step to display data (the library accepts such paths as “fieldData.FirstName”.
There is a load method to lead in new data.
You can send edited data (in cells) back to FileMaker.

Additional Examples

Charting

The FileMaker Charting object is fine for what it does. It can display data in one of many types of charts. Since the object is part of the FileMaker platform, it’s easy to connect the set up to fields or calculations. But the object has a lot of downsides, there’s a lack of interactivity, of adding or removing data, and customizations. So we need to turn to JS to get a full set of features.

Apex Charts

Apex Charts is a popular charting library. With this library you can customize anything about a chart. Anything. We’ve used C3 and others, but this is my favorite charting library at the moment.

Review its awesome features and play around with the demo file.