B4J Tutorial [ABMaterial]: Kanban Reporting CustomComponent

Hi there

I'm working on something to enable me to show some stuff in kanban board format, just for displaying and nothing else. After a while I've managed to come up with this...

Usage: In Class Globals...

Dim kanban As SyncfusionKanban

In ConnectPage...

'define the kanban to add to the page, the colKey should match the available statuses in your data
    kanban.Initialize(page, "kanban")
    kanban.AllowTitle = True  ' show the card ids
    kanban.enableTotalCount = True   ' show total items per card
    kanban.AllowSelection = True   ' allow selection of items
    kanban.Color = "Type"  'set the color field to be the type field
    kanban.Title = "Assignee"   ' set the title to be the assignee field
    kanban.SwimlaneKey = ""   ' turn off not to show a swimlane
    kanban.Tag = "" ' turn off not to show the tags
    kanban.Priority = "" ' turn off not to set RankID as priority of sequencing the cards
    kanban.allowSearching = True
    kanban.EnableContextMenu = True
    kanban.AllowPrinting = True
    kanban.allowFiltering = True
    kanban.allowScrolling = False
    kanban.allowEditing = True
    kanban.allowDragAndDrop = True
    kanban.allowAdding = True
 
    page.Cell(2,1).SetFixedHeightFromBottom(20,False)
    page.Cell(2,1).AddComponent(kanban.ABMComp)
    RefreshOnLoad_kanban

The RefreshOnLoad_kanban method...

'Refresh the contents of an SyncfusionChart in runtime
Private Sub RefreshOnLoad_kanban
    'clear the contents of the kanban
    kanban.clear
    'add the columns
    kanban.AddColumn("Backlog","Backlog",True,True,True,True,True)  ' add a collapsed column
    kanban.AddColumn("InProgress,Validate","In Progress or Validate",True,False,True,True,True)   ' use two keys in this column
    kanban.AddColumn("Debug", "Debug", False,False,True,True,True) ' add a hidden column
    kanban.AddColumn("Done", "Done",True,False,True,True,True)
    kanban.AddColumn("DragnDrop", "No Drag n Drop",True,False,False,False,True)
    'add colors for the types
    'for each of the types add the respective color
    kanban.AddColor("#cb2027","Bug,Story")
    kanban.AddColor("#67ab47","Improvement")
    kanban.AddColor("#fbae19", "Epic")
    kanban.AddColor("#6a5da8", "Others")
    'add the workflows
    'add workflows to enable/disable card locations
    'kanban.AddWorkFlow("Open","InProgress")  ' anything in open can ONLY go to InProgress
    'kanban.AddWorkFlow("InProgress","Testing,Close")   ' anything in InProgress can go to Testing & Close
    kanban.AddResource("Andrew Fuller", "../images/brother.jpg")
    kanban.AddResource("Janet", "../images/mom.jpg")
    kanban.AddResource("Mashy", "../images/sponge.png")
    kanban.AddResource("Yuna", "../images/yuna.jpg")
    kanban.AddCard(1, "Backlog", "Analyze the new requirements gathered from the customer.", "Story", "Low", "Analyze,Customer", 3.5, "Andrew Fuller", 1)
    kanban.AddCard(2, "InProgress", "Improve application performance", "Improvement", "Normal", "Improvement", 6, "Andrew Fuller", 1)
    kanban.AddCard(3, "Backlog", "Arrange a web meeting with the customer to get new requirements.", "Others", "Critical", "Meeting", 5.5, "Yuna", 2)
    kanban.AddCard(4, "InProgress", "Fix the issues reported in the IE browser.", "Bug", "Release Breaker", "IE", 2.5, "Janet", 2)
    kanban.AddCard(5, "Debug", "Fix the issues reported by the customer.", "Bug", "Low", "Customer", 3.5, "Andrew Fuller", 1)
    kanban.AddCard(6, "Done", "Arrange a web meeting with the customer to get the login page requirements.", "Others", "Low", "Meeting", 2, "Janet", 1)
    kanban.AddCard(7, "Validate", "Validate new requirements", "Improvement", "Low", "Validation", 1.5, "Janet", 1)
    kanban.AddCard(8, "Done", "Login page validation", "Story", "Release Breaker", "Validation,Fix", 2.5, "Andrew Fuller", 2)
    kanban.AddCard(9, "Debug", "Fix the issues reported in Safari browser.", "Bug", "Release Breaker", "Fix,Safari", 1.5, "Janet", 2)
    kanban.AddCard(10, "Done", "Test the application in the IE browser.", "Story", "Low", "Testing,IE", 5.5, "Andrew Fuller", 3)
    kanban.AddCard(11, "DragnDrop", "One cannot drag or drop here", "Story", "Low", "Drag,Drop", 5.5, "Mashy", 3)
    kanban.AddCard(12, "InProgress", "Un assigned task", "Story", "Low", "Drag,Drop", 5.5, Null, 3)
    'add the filters
    'kanban.AddFilter("Closed","Status","Close")
    kanban.AddResourceFilters
    'kanban.AddStatusFilters
    'kanban.AddTypeFilters
    'refresh the kanban
    kanban.ABMComp.Refresh
End Sub

In your page also add the necessary javascript files...

page.AddExtraJavaScriptFile("custom/jquery.easing.1.3.min.js")
    page.AddExtraJavaScriptFile("custom/jsrender.min.js")
    page.AddExtraJavaScriptFile("custom/ej.web.all.min.js")
    page.AddExtraJavaScriptFile("custom/axesLabels.js")
    page.AddExtraCSSFile("custom/ejthemes/default-theme/ej.web.all.min.css")

Kanban implemented events... (these you can trap to update the underlying database)

'fired when the card is updated
Sub kanban_endEdit(value As Map)
    Log(value)
End Sub

'fired when the card has just been added
Sub kanban_endAdd(value As Map)
    Log(value)
    kanban.UpdateCard1(value)
End Sub

'fired when the card has been deleted
Sub kanban_endDelete(value As Map)
    Log(value)
End Sub

'fired when the card is clicked
Sub kanban_cardClick(value As Map)
    kanban.HideColumn("Done")
    kanban.ShowColumn("Testing")
    kanban.AddColumn1("Reporting","Reporting")
    kanban.AddCard1(20,"Open","Add card via code","Bug","Low","",1,"Mashy","1")
    kanban.UpdateCard(5,"Close","Updated card via code","Improvement","Low","",3,"Mashy",3)
    kanban.DeleteCard(10)
End Sub

'fired when the card is dropped in another column
Sub kanban_cardDrop(value As Map)
    Log(value)
End Sub

Updating the kanban board / cards during runtime: (you can use these methods)

• UpdateCard
• AddCard1
• UpdateCard1
• RemoveColumn
• HideColumn
• ShowColumn
• DeleteCard
• AddColumn1

 

[Mashiane]

Swimlane by Assignee... (backlog column collapsed & cards showing tags)

 

[alwaysbusy]

This is using the Syncfusion library, no? How resposive is it on phones? I have looked into it before to integrate in ABMaterial, but unfortunately it is a rather expensive lib for commercial use. Guess you could use the community version if your gross annual revenue is below $1 million USD. Are you planning the share your ABMCustomComponent B4J class with the community? Could be a great opportunity for others to learn how to integrate new components using ABMCustomComponent in their own projects.

 

[Mashiane]

@alwaysbusy , yes its the Syncfusion library and it is expensive and using Free Community Version. I need to add some events to it especially double click as I intend to trap that to open another page, however here is the latest update, but still work in progress.

I have not tested it on phones yet about the responsiveness, the isResponsive property in my example is True by default which makes it shrink and expand based on your area.

 

[Mashiane]

Additional Files

In your page add the needed css and js files...

page.AddExtraJavaScriptFile("custom/jquery.easing.1.3.min.js")
    page.AddExtraJavaScriptFile("custom/jsrender.min.js")
    page.AddExtraJavaScriptFile("custom/ej.web.all.min.js")
    page.AddExtraJavaScriptFile("custom/axesLabels.js")
    page.AddExtraCSSFile("custom/ejthemes/default-theme/ej.web.all.min.css")

 

[Mashiane]

This is what is on their playground, swiped with my mouse and dragged and dropped, seemed to respond well.

 

[alwaysbusy]

What I was afraid of. Not responsive, but adaptive. A responsive framework does re-arrange everything (e.g. 'In Progress' should come under the 'Backlog' part) depending on the device it is on, like ABMaterials grid is responsive.

A good read: http://mediumwell.com/responsive-adaptive-mobile/

 

[Mashiane]

Adding some more functionality to Filter, AddEdit cards, ContextMenu etc. (Will add the updated module soon...)

One can now add multiple filters to filter the cards on, this example is by Assignee
.

AddEditCard

 

[Mashiane]

Updated the board to have a border around it, now the initialize statement should include the color of the border.

kanban.Initialize(page, "kanban", "#c8c8c8")

 

[Carlos marin]

Hi Mashiane, I am very interested in this project but I cannot execute it in b4j, some simple example of how to execute it thanks

 

[Mashiane]

@Carlos marin , are you familiar with ABMaterial?

The attached class on this thread was built for that framework and its just a custom component. Anyways Im not even sure if Syncfusion is still having this as this was in 2017.

Ta!