{"type":"doc","content":[{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://paper.dropbox.com/doc/07.-Tutorial-Creating-a-Kanban-Board--BtMwVwZsdKSgg1YGQWJrzuQPAg-RK27IFkhWjoSKV0ztoOvE"}},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":1},"content":[{"text":"07. Tutorial: Creating a Kanban Board","type":"text"}]},{"type":"paragraph","content":[{"text":"<— Reactor Home","type":"text","marks":[{"type":"link","attrs":{"href":"/wiki/spaces/FusionReactor/pages/2202501288"}}]}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"The real power of Reactor comes when you use Reactor’s features with a fully-interactive JavaScript user interface, employing a dynamic library.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Sortable","type":"text","marks":[{"type":"code"}]},{"text":" 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.","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://jqueryui.com/sortable/#connect-lists"}},{"text":" ","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"So let’s start building our BlackBox.","type":"text"}]},{"type":"paragraph","content":[{"text":"From the Reactor main screen, click the + button to get started.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":464,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560840910189_image.png","height":396}}]},{"type":"paragraph","content":[{"text":"We’re starting from scratch.","type":"text"}]},{"type":"paragraph","content":[{"text":"Give your BlackBox a name and a description:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":685,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560840986787_image.png","height":188}}]},{"type":"paragraph","content":[{"text":"We’re using the JQuery library, so add the following as source files:","type":"text"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://www.dropbox.com/s/i0bw4rpuokdxa3p/jquery-3.4.1.min.js?dl=0"}},{"text":" ","type":"text"},{"type":"hardBreak"}]},{"type":"paragraph","content":[{"type":"inlineCard","attrs":{"url":"https://www.dropbox.com/s/jpajabb9a9iee88/jquery-ui.min.js?dl=0"}},{"text":" ","type":"text"},{"type":"hardBreak"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":309,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560842956835_image.png","height":182}}]},{"type":"paragraph","content":[{"text":"Now switch over to the Functions tab, and add your function, as well as the following parameters:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":693,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560847124152_image.png","height":369}}]},{"type":"paragraph","content":[{"text":"The first five are all FileMaker fields:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PlanetIDField: A unique ID for a planet record","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PlanetNameField: The field containing the name of a planet","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PlanetDescriptionField: The field containing the planet’s description","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PlanetTripNoField: This represents what ‘trip’ we’ve selected for a planet","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"PlanetSortNoField: This represents the order of planets within a trip ","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"And the last is a text parameter:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Columns: A comma separated list of columns to show","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"We’ve built the basics of our function, so now let’s go ahead and build a template file.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":467,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560841260825_image.png","height":560}}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"paragraph","content":[{"text":"So go ahead and delete all those functions, and ensure your new HTML source file is as follows:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"content":[{"text":"\n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n \n\n

\n\n \n\n

\n\n \n\n ","type":"text"}]},{"type":"paragraph","content":[{"text":"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.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1280,"type":"external","url":"https://images-assets.nasa.gov/image/PIA17567/PIA17567~medium.jpg","height":1086}}]},{"type":"paragraph","content":[{"text":"Ok, so let’s switch back to that JQuery example, and click ","type":"text"},{"text":"view source","type":"text","marks":[{"type":"code"}]},{"text":":","type":"text"}]},{"type":"paragraph","content":[{"text":"Unfortunately it’s not a simple copy and paste - instead it’s 3 simple copy and pastes. Copies and paste?","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Copy all of contents between the ","type":"text"},{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"

Item 1
Item 2
Item 3
Item 4
Item 5

","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"

Item 1
Item 2
Item 3
Item 4
Item 5

","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":" ","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"Now switch to the ‘Preview’ screen and click the Compile button. You should see your new BlackBox appear before your eyes:","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":424,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560843495897_image.png","height":313}}]},{"type":"paragraph","content":[{"text":"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 ","type":"text"},{"text":"

","type":"text","marks":[{"type":"code"}]},{"text":" element contains a second line of text:","type":"text"}]},{"type":"paragraph","content":[{"text":"

Item 1
The first item
Item 2
The second item
Item 3
The third item
Item 4
The fourth item
Item 5
The fifth item

","type":"text","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"text":"

Item 1
The first item
Item 2
The second item
Item 3
The third item
Item 4
The fourth item
Item 5
The fifth item

","type":"text","marks":[{"type":"code"}]}]},{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":306,"type":"external","url":"https://paper-attachments.dropboxusercontent.com/s_07C1E524C4A2B7426220C14134FF70214BF69DE1C8D14A4788E5F5590650FECB_1560844675824_image.png","height":334}}]},{"type":"paragraph","content":[{"text":"Great. Doesn’t quite ‘pop’ though does it? Replace the CSS (contents of your ","type":"text"},{"text":"

Browser not supported