07. Tutorial: Creating a Kanban Board

The general Reactor guide and FRToolbox Reference document outline the suite of functionality that Reactor can provide. However, they don’t really achieve anything that can’t already be done in FileMaker.

The real power of Reactor comes when you use Reactor’s features with a fully-interactive JavaScript user interface, employing a dynamic library.

This article takes you through how to create a fully-interactive Kanban board using Reactor. What’s a Kanban board? It’s a visual project management tool used to show how tasks progress through different stages. It can be post-it notes on the wall, or be achieved through software.

The first step is to find a library that gets us as close to the finish line as possible. Why write something that someone has already written? It just so happens that the jQuery library has exactly what we need.

The Sortable interaction has a ‘Connect Lists’ example that allows us to reorder items within a grid. You can move them up or down vertically, or across horizontally.

Ok, so let’s put together what we want to build. We’re planning three space exhibitions, in which we’re visiting various planets (presumably in a futuristic super-fast spaceship). The trips will be represented horizontally, and we’ll want to drag a planet into one of these ‘trips’ and even change the order in which we visit the planets.

So let’s start building our BlackBox.

From the Reactor main screen, click the + button to get started.

We’re starting from scratch.

Give your BlackBox a name and a description:

We’re using the JQuery library, so add the following as source files:
Now switch over to the Functions tab, and add your function, as well as the following parameters:

The first five are all FileMaker fields:
  • PlanetIDField: A unique ID for a planet record
  • PlanetNameField: The field containing the name of a planet
  • PlanetDescriptionField: The field containing the planet’s description
  • PlanetTripNoField: This represents what ‘trip’ we’ve selected for a planet
  • PlanetSortNoField: This represents the order of planets within a trip 

And the last is a text parameter:
  • Columns: A comma separated list of columns to show

We’ve built the basics of our function, so now let’s go ahead and build a template file.