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.

https://jqueryui.com/sortable/#connect-lists

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.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560840910189_image.png

We’re starting from scratch.

Give your BlackBox a name and a description:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560840986787_image.png

We’re using the JQuery library, so add the following as source files:

Failed to load Dropbox embed preview.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560842956835_image.png

Now switch over to the Functions tab, and add your function, as well as the following parameters:

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560847124152_image.png

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.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560841260825_image.png

What’s a template file? You can read more about that in the General Reactor Tutorial, but basically, it does its best to get you started.

If you have added a JavaScript library (such as JQuery) it will ensure this is imported. If you have five parameters that are field names, it will store these as variables. It will also get you started with methods to read, update, create or delete records based on these field names, but we’ll be writing our own methods for this.

So go ahead and delete all those functions, and ensure your new HTML source file is as follows:

<html>

<head>

<style>

<!–– CSS Goes here ––>

</style>

</head>

<script type='text/javascript' src='FRToolBox.js'></script>

<script src="jquery-3.4.1.min.js"></script>

<script src="jquery-ui.min.js"></script>

<!–– Import other sources here ––>

<script>

FMLink = 'FM.link';

// This is where variables are set from the given parameters

var RecordsObj = new Object;

FMTableOccurrenceName = '<?Reactor bbdev_TO( $PlanetIDField ) Reactor?>';

FunctionWhereClause = '<?Reactor bbdev_Relationship( bbdev_TO( $PlanetIDField ) ) Reactor?>';

CreationValues = '<?reactor bbdev_relationshipKeyBuilder ( $FMTableOccurrenceName ) reactor?>';

PlanetIDField = '<?Reactor bbdev_Field( $PlanetIDField ) Reactor?>';

PlanetNameField = '<?Reactor bbdev_Field( $PlanetNameField ) Reactor?>';

PlanetDescriptionField = '<?Reactor bbdev_Field( $PlanetDescriptionField ) Reactor?>';

PlanetTripNoField = '<?Reactor bbdev_Field( $PlanetTripNoField ) Reactor?>';

PlanetSortNoField = '<?Reactor bbdev_Field( $PlanetSortNoField ) Reactor?>';

Columns = '<?Reactor $Columns Reactor?>';

</script>

<body>

<div>

<!–– This is the main HTML for the BlackBox ––>

</div>

</body>

</html>

Great, so the first step with any BlackBox is to get your UI up and running - then when that’s done you hook your FileMaker data into it. The reason we do the UI first, is so we have somewhere to put our FileMaker data. If we started with that, we’d just be supplying our data to a dark indifferent void.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://images-assets.nasa.gov/image/PIA17567/PIA17567~medium.jpg

Ok, so let’s switch back to that JQuery example, and click view source:

Unfortunately it’s not a simple copy and paste - instead it’s 3 simple copy and pastes. Copies and paste?

Copy all of contents between the <style> tags, and paste it between your BB <style> tags:

#sortable1, #sortable2 {

border: 1px solid #eee;

width: 142px;

min-height: 20px;

list-style-type: none;

margin: 0;

padding: 5px 0 0 0;

float: left;

margin-right: 10px;

}

#sortable1 li, #sortable2 li {

margin: 0 5px 5px 5px;

padding: 5px;

font-size: 1.2em;

width: 120px;

}

Copy the $( function() block, and paste it it at the end of your BB <script> block:

$( function() {

$( "#sortable1, #sortable2" ).sortable({

connectWith: ".connectedSortable"

}).disableSelection();

} );

Copy the HTML near the bottom, and paste it between your BB <body> tags:

<ul id="sortable1" class="connectedSortable">

<li class="ui-state-default">Item 1</li>

<li class="ui-state-default">Item 2</li>

<li class="ui-state-default">Item 3</li>

<li class="ui-state-default">Item 4</li>

<li class="ui-state-default">Item 5</li>

</ul>

<ul id="sortable2" class="connectedSortable">

<li class="ui-state-highlight">Item 1</li>

<li class="ui-state-highlight">Item 2</li>

<li class="ui-state-highlight">Item 3</li>

<li class="ui-state-highlight">Item 4</li>

<li class="ui-state-highlight">Item 5</li>

</ul>

The full contents of your HTML file should now be as follows: