WHAT ARE DATATABLES?

DataTables is a name for a table enhancing plug-in for the popular JQuery JavaScript library. It adds the ability of sorting, paging, and filtering to plain HTML tables with very little configuration needed. DataTables main purpose is to solve problems for two distinct groups: developers and end users. Developers can have a clean and optimized way to obtain, display, and manipulate data. End users can have an intuitive and fast interface in which to view information that matters most. 

GETTING STARTED

As Claris FileMaker developers we are always on the lookout for resources that will enhance our solutions in an easy and intuitive way. DataTables can be a rather challenging feature to implement from scratch without some serious learning and research, but resources like the popular Carafe Kitchen by Soliant Consulting provide a great starting point for anyone wanting to implement a basic DataTables integration. We’ve written about Carafe Kitchen before if you’d like to read that blog post for a walk through. Like any great resource though, it’s important to understand its limitations. While Carafe offers a great tool kit for basic DataTable integrations, it’s not always the easiest to expand so today we’ll explore two development processes for creating your own DataTables integration – Carafe Kitchen and JSDev.

CARAFE KITCHEN

Carafe provides a complete customization toolkit right out of the box. The UI is displayed to an end user via a WebViewer placed on any layout you choose. You control the supply of data and Carafe’s DataTable Module handles the rest, even up to a request of thousands of records.   

At its core, the DataTables integration is comprised of three parts: 

1. The Data (JSON formatted)

2. The WebViewer (User Interface Object)

3. Code (HTML, CSS, Javascript) – Static – Predefined

And this simple integration follows two core patterns:

1. Loading Data – (The JSON Data)

2. Render Result(Code) – (Result in WebViewer)

FREE DEMO

We’ve created a free demo where you can see the Carafe integration in action. If you have experience working with their DataTable Module already, then the first two sections of the demo will serve as more of a recap or brief introduction. 

The demo follows the core patterns of loading data, and rendering a result. Data handling is controlled using the object approach to populating the DataTable data model. You’ll see three different examples involved in building the JSON, as well as some options available for configuring integrations. There are limitations to the Carafe resource, so this next section will explore expanding tables beyond the basics.

GOING BEYOND THE BASICS

The extensibility of DataTables can be rather daunting to tackle on your own. Using a modern development environment designed by Jeremy Brown, known as The JS Dev Environment, Portage Bay has constructed a DataTable template repo utilizing this environment setup. If this sounds foreign to you, don’t worry. The workflow hasn’t changed nor have the core patterns. By taking the time to dive deeper into the library, you’ll see just how customizable this resource can be. 

JS DEV ENVIRONMENT

If your needs have outgrown the simplicity of the Carafe module, The JS Dev Environment provides a great way to customize the code workflow and further develop, render, and deploy your modified code. You’re still following the original process; however, you can now dynamically render and re-render your results. 

1. The Data (JSON formatted)

2. The WebViewer (User Interface Object)

3. Code (HTML, CSS, Javascript) – Dynamic – Customized

The core patterns still hold true, however now you can toggle between a development option rendering of the code as well a final production rendering.

1. Loading Data – (The JSON Data)

2. Render Result(Code) – (Result in WebViewer)

TIPS AND TRICKS

• Have a solid understanding of the core web foundations (HTML, CSS, JavaScript) – See great learning resources below:

  • MDN

  • w3Schools

• Read the DataTables documentation and explore the examples. The documentation is a great place to start exploring the library’s extensibility.

• Use a modern IDE like VSCode. The feature-rich development tools will make your coding process much smoother.

YOU CAN TACKLE YOUR NEXT BIG INTEGRATION

While either of the above development processes can support a DataTables integration, one offers more opportunities to evolve. I hope today you’ve walked away with some new found knowledge to tackle that next big integration, and if DataTables is on your to-do list be sure to grab a clone of our repo and save yourself a little time when customizing your own integration.

QUESTIONS?

If you have any questions or need some assistance getting DataTables into your solution please reach out to us. You can also catch one of our Office Hours sessions. We’re in zoom every 1st and 3rd Thursday, from 1-2pm Pacific, to discuss anything related to Claris FileMaker and how it can improve your workflows.