https://paper.dropbox.com/doc/07.-Tutorial-Creating-a-Kanban-Board--BtMwVwZsdKSgg1YGQWJrzuQPAg-RK27IFkhWjoSKV0ztoOvE

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.

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:

https://www.dropbox.com/s/i0bw4rpuokdxa3p/jquery-3.4.1.min.js?dl=0

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.

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.

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:

<html>

<head>

<style>

#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;

}

</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>

<script>

FMLink = 'FM.link';

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?>';

$( function() {

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

connectWith: ".connectedSortable"

}).disableSelection();

} );

</script>

<body>

<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>

</body>

</html>

Now switch to the ‘Preview’ screen and click the Compile button. You should see your new BlackBox appear before your eyes:

Next, in our Kanban board we’re going to want to show a planet name, and a planet description. So change the HTML so that each <li> element contains a second line of text:

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

<li><div class=name>Item 1</div><div class=desc>The first item</div></li>

<li><div class=name>Item 2</div><div class=desc>The second item</div></li>

<li><div class=name>Item 3</div><div class=desc>The third item</div></li>

<li><div class=name>Item 4</div><div class=desc>The fourth item</div></li>

<li><div class=name>Item 5</div><div class=desc>The fifth item</div></li>

</ul>

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

<li><div class=name>Item 1</div><div class=desc>The first item</div></li>

<li><div class=name>Item 2</div><div class=desc>The second item</div></li>

<li><div class=name>Item 3</div><div class=desc>The third item</div></li>

<li><div class=name>Item 4</div><div class=desc>The fourth item</div></li>

<li><div class=name>Item 5</div><div class=desc>The fifth item</div></li>

</ul>

Great. Doesn’t quite ‘pop’ though does it? Replace the CSS (contents of your <style> block) with this:

#sortable1, #sortable2 {

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;

width: 120px;

border:black solid 1px;

background-color:#123a53;

color:white;

font-size:16px;

}

Recompile and take a look:

There, that’s looking a bit better. Feel free to make further CSS adjustments.

Ok, we have our base UI sorted, let’s start putting some data into it.

Accessing Planet Data

First, replace the contents inside our <body> tags with this:

<div id=Kanban></div>

We need to dynamically generate the HTML content from our Planet records, so this just provides us with a place to put it.

Now, for getting the data in. We need to:

Query Reactor for the Planet records
Create an ‘Unassigned’ column for records that don’t have a Trip No value
1. Add an HTML element for each of these records to the ‘Unassigned’ column
For each column provided in our parameter:
1. Check our query response for records that belong in this column (based on the Trip No field, and add an HTML element for each of these records to the column

So, replace the contents inside our <script> tags with the following:

FMLink = 'FM.link';

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