jKanban

Published by Soliant Consulting on

jKanban v1.1.0

Published by Soliant Consulting on March 30, 2020
Updated on May 18, 2020
Tags: UI,Utility
Download Send To Carafe
Download Send To Carafe
Created By: Jesse LaVere
Version: 1.1.0

Windows Tested: Yes
Offline Compatible: No

Description:

Understanding the configuration options

Data options

These can be passed from FileMaker to the web viewer to update jKanban.

  • element selector of the kanban container (default : '')
  • gutter gutter of the board (default : '15px')
  • widthBoard width of the board (default : '250px')
  • responsivePercentage: if it is true I use percentage in the width of the boards and it is not necessary gutter and widthBoard (default : false)
  • dragItems if false, all items are not draggable (default : true)
  • boards json of boards (default : [])
  • dragBoards the boards are draggable, if false only item can be dragged (default : true)
  • addItemButton add a button to board for easy item creation (default : false)
  • buttonContent text or html content of the board button (default : '+')

Callback options

These can be overwritten in the template to add functionality to the jKanban board.

  • click callback when any board's item are clicked (default : function (el) {})
  • dragEl callback when any board's item are dragged (default : function (el, source) {})
  • dragendEl callback when any board's item stop drag (default : function (el) {})
  • dropEl callback when any board's item drop in a board (default : function (el, target, source, sibling) {})
  • dragBoard callback when any board stop drag (default : function (el, source) {})
  • dragendBoard callback when any board stop drag (default : function (el) {})
  • buttonClick callback when the board's button is clicked (default : function(el, boardId) {})
A Carafe Bundle using jKanban.

Configuration

Name Description Type
datatext
filenamefmpFileName
scriptnamefmpScriptName
References:

6 Comments

LelandLong · December 21, 2020 at 1:25 pm

Thank you for all the work that has obviously gone into making Carafe and the included bundles, such as this Kanban implementation.
I have a few questions:
1) when using the Editing Online option for this board in Carafe Kitchen v3.1.3, I see several files that are editable. The most useful apparently is “template.carafe” where I can change font colors, board title colors, and probably add some additional classes to the existing 3. Is there any additional files worth editing and why?
2) I presume that since the actual Kanban javascript code is not being stored locally, along with Bootstrap, that there is not a way to edit any of those files, and that none of the API function shown on the GitHub page for this library is available? Or if I am misguided how would I go about doing this?
3) when I try the demo, when a board is moved, it triggers the “Test” script in Carafe Kitchen with the passed Json parameter. This script appears to be one of the 4 parameters in the $data variable in the script. But what is the trigger for this script to run?
4) where do I manage the above referenced Callback Options? Can separate scripts be triggered in the solution file based on these callbacks? Where?
5) I have successfully added additional parameters to the $data json block (responsivePercentage, dragBoards, etc) but cannot seem to get addItemButton and buttonContent to work. Some sample code would be wonderful?

LelandLong · December 21, 2020 at 1:42 pm

Okay, I think I figured out question #4 because I added:
data.click = function (el) { forceFmSave(); };
And this now runs the same “Test” script when any of the items are clicked on.
But, this leads to another question: how can I modify the “this.buildSaveData()” function to return just data for the Item clicked on, not for the entire Boards element?

    LelandLong · December 22, 2020 at 11:20 am

    I changed my above testing code, and I now get back the Title of the item clicked on. Making progress.
    FROM: “data.click = function (el) { forceFmSave(); };”
    TO: “data.click = function (el) { Carafe.getFMBridge().callFMScript(‘__filename__’, ‘__scriptname__’, el.innerHTML); };”

      LelandLong · December 22, 2020 at 11:49 am

      I changed my above testing code, and added a unique “id” to each item in the $data ({“title”:”All right”,”id”:”11″},{“title”:”Ok!”,”id”:”12″}), I now I get back this id of the item clicked on. Excellent!
      FROM:“data.click = function (el) { Carafe.getFMBridge().callFMScript(‘__filename__’, ‘__scriptname__’, el.innerHTML); };”
      TO: “data.click = function (el) { Carafe.getFMBridge().callFMScript(‘__filename__’, ‘__scriptname__’, el.attributes.item(1).value); };”

Jeremiah Small · December 22, 2020 at 4:47 pm

I’m glad you got sorted out! FYI, there’s also a link to it on the documentation page, but the Carafe section of FMForums can have a few benefits over the comments section here. It supports things like screenshots, and code formatting, as well as attracting more eyeballs to your question(s) than you’ll get here. Sadly, we have to stick with comment moderation here, because of the prevalence of comment spam. See the Documentation page if you lose track of this direct link: https://fmforums.com/forum/325-carafefm/

LelandLong · January 6, 2021 at 1:55 pm

Any chance, before I move further questions over to fmforums, that you can provide me some info on my initial questions #1, #2, & #5 ? Purdy please 🙂

Leave a Comment