Sortable - A Developers Journey

What follows is a tale of a developer. Like many tales it twists and turns, guiding the protagonist to embark on a journey of discovery. This journey of discovery is not conducive to a linear tale, but the richest of experiences is always a product of re-evaluation, self-discovery and enlightenment.

One of the great things about FileMaker is its willingness to bring other friends to the party; it doesn’t restrict us to a proprietary end-to-end environment. There are many great ways to introduce integrations and other technologies. The most powerful of which has got to be plugins.

A FileMaker plugin is a file, created in C or C++, given the appropriate extension. The plugin can then be loaded into FileMaker Pro to expand the set of functions available. There are also third party plugins that allow you to develop your own plugins in PHP or Java.

Or, we can develop our own plugins using our very own Reactor! But more on that later...

While the FileMaker platform allows us to build and deploy powerful business applications extremely quickly, it doesn’t give us the degree of control that allows us to build ‘anything’ in FileMaker Pro natively.

But this is a good thing!

Because were that not the case, we wouldn’t be able to build and deploy applications as quickly as we can.

However, FileMaker Pro is happy to hand the job onto someone else. There are two ways to use develop a client-side interface using web technologies; in a WebViewer, and using Reactor.

The Mission

There have been many moments when building portals in FileMaker Pro that this developer wished they could drag around portal rows to re-sort them. It occurred to me that building a portal in HTML+JS could allow me to manipulate the portal anyway I desired. 

The WebViewer

I got to work. With a basic knowledge of HTML+CSS+JS I put together a web-based portal, and transformed it into a custom function. The custom function was passed in a Javascript array of IDs and sort orders, as well as the script to run when the sort order changed. The sort order was changed when the portal rows were dragged up or down - using JQuery’s incredible UI Library. When running the script it would pass as a parameter the ordered set of record IDs. It worked.

The Problem

While it worked, it wasn’t very modular. I had to encode the data into a Javascript array, and decode it at the other end. It was working around FileMaker rather than working with it. It would be difficult to take it out of this solution, and pop it into another one.

The Solution

“Why don’t you just use Reactor?” I was asked by one of my fellow colleagues.

That quip gave me pause. While I certainly knew of Reactors existence, I had never had first-hand experience of developing for Reactor and how powerful it truly was.

Reactor? What's that?

fusionplugins.com

At Digital Fusion, we pride ourselves on our Fusion Reactor plugin. Most plugins are developed to perform a certain task or reach a certain goal; be that to integrate with your accounting package, or to perform file operations on a local disk. The Fusion Reactor plugin provides a gateway. What lies beyond that gateway is entirely up to you - the developer. 

JavaScript is really the only way to create new and unique UI controls (widgets) for FileMaker applications.

The combination of HTML5, CSS3 and Javascript has provided an almost unlimited palette with which to build web applications; if you can dream it, you can do it. Anything you can conceive of in a software application can be built using this combination of technologies. 

Reactor is a plugin developed by some wizards at Digital Fusion Ltd, well before my time. Basically it’s a plugin that allows us to build our own plugins using front-end web technologies. Reactor allows us to install and run these things called BlackBoxes. Far from a flight-data recovery tool (which I should avoid dwelling on - as I write this from 35,000 feet over the Tasman sea) it is a web app. I was able to write the source for the web app, and deploy it into a BlackBox that could then be installed onto any machine that has Reactor installed.

Where’s the Reaction?

So far, no different. We’ve basically done what we did with the WebViewer and custom function. Where Reactor really adds value is the way it can talk with the database. The Reactor toolbox contains a suite of tools that facilitate communication between our Javascript and our FileMaker data. No more did this developer have to parcel up their data in a form the Javascript can understand, and un-parcel it when it’s done. Any transactions with the FileMaker data could take place within the Javascript itself. It was now completely modular and fully portable.

Like all great tales, the Sortable application basically boiled down to three acts:

Act I: Retrieve the data

When the application is loaded it downloads the records - it knows what records to download and display in the portal because we pass through a table occurrence with field name as one of the parameters - this takes into account the relationship to that table occurrence. In the Javascript, we can pull through any fields we wish; such as current sort values, UID, type, value 1, value 2, image, etc. These are all set up as parameters as well.

Act II: Manipulate the front-end

The next step is to write the Javascript, so that an HTML element can be dragged about a list of HTML elements. This is remarkably easy to do using the JQuery UI Library, we just need to instantiate the Sortable class, and tell it what to do when an element is dragged to a different location.

Act III: Preserve the new sort order

So far, all we have done is move objects about a portal. The next step is to actually have it do something. When the element is dragged to a different location, we call an asynchronous function. This is really nice because the users experience is truly seamless. We loop through every item in the portal, updating the FileMaker Pro data with the new sort order. We do this by calling a script, passing through the UID of the record, as well as the new sort order.

Where To From Here?

I emerged triumphant. I had achieved my goal in developing a solution that was modular and portable, and learned a lot of about a powerful tool that paved a new way to a world of exciting possibilities. 

In particular, I'm very keen and excited to explore other great front-end augmentations and features that can be made possible with other components of the JQuery UI library. Sortable is just one of them:

https://jqueryui.com 

Interactions and Widgets

• Draggable - drag object around an area with the mouse
• Droppable - drag objects and drop them onto/within other objects, activating an action
• Resizeable - change the size of an object using the mouse
• Selectable - click-and-drag the mouse to select multiple items (could be an awesome alternative to sortable where multiple rows in a portal can be selected with the mouse)
• Accordian - headings that can collapse more detailed information
• Auto-complete - predict user input in text fields
• Button - enhances buttons, to make them fully customisable
• Dialog - produce a customised dialog that can be moved and closed
• Menu - create fully customised menus, including disabled items, nested items, able to be navigated by both keyboard and mouse
• Progress Bar - customised progress bar of a pending process or action
• Select Menu - similar to popup fields in FMP, but with icons and grouping
• Slider - customisable slider to set numerical values
• Spinner - customisable spinner to increment/decrement numerical values
• Tabs - fully customisable tabs. Can open tabs on hover rather than click, can add/remove/sort tabs as user, etc
• Tooltip - many awesome customisations for tooltips, beyond what might be termed as conventional

Effects

We can use the JQuery UI suite to add classes to objects, therefore adding effects. For example, we can animate an object to transition from one color to another, animate the easing of an object (gradually show/remove), or animate any effect at all such as bouncing, dropping, shaking, pulsating, etc.

Effects such as these are all over the web to augment the users experience, and using Reactor they can be added to any FileMaker Pro application to do the same!