B4J Library [ABMaterial] Beginning the Frappe Gantt Chart

Ola

So, Frappe, the team that did Frappe Charts, also have a Frappe Gantt chart. So I decided to test it out because it has a nice look and feel. Yes, its just a basic gantt chart but why not? Afterall I'm still working on a Project Management App and need all the eye candy I can get. So..

https://github.com/frappe/gantt

In BuildPage..

page.AddExtraCSSFile("custom/frappe-gantt.css")
    page.AddExtraJavaScriptFile("custom/frappe-gantt.min.js")

In ConnectPage

Dim mgcx As MashFrappeGantt
    mgcx.Initialize(page,"mgcx")
    mgcx.ViewMode = mgcx.EnumView.Week
    mgcx.AddTask("Task 0","Redesign website","2018-10-01", "2018-10-08",20,"")
    mgcx.AddTask("Task 1", "Write new content","2018-10-03", "2018-10-06",5, "Task 0")
    mgcx.AddTask("Task 2", "Apply new styles","2018-10-04","2018-10-08",10,"Task 1")
    mgcx.AddTask("Task 3", "Review", "2018-10-08", "2018-10-09", 5, "Task 2")
    mgcx.AddTask("Task 4", "Deploy", "2018-10-08", "2018-10-10",0, "Task 2")
    mgcx.AddTask("Task 5", "Go Live!", "2018-10-11", "2018-10-11",0, "Task 4")
    Log(mgcx.GetScript)
 
    page.cell(1,1).AddComponent(mgcx.ABMComp)

Trapping Events

'frappe gantt chart
Sub mgcx_click(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"Click","OK",False,"","")
End Sub

Sub mgcx_datechange(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"Date Change","OK",False,"","")
End Sub

Sub mgcx_progresschange(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"Progress Change","OK",False,"","")
End Sub

Sub mgcx_viewchange(value As Map)
    Dim valuex As String = value.Get("value")
    page.Msgbox("",valuex,"View Change","OK",False,"","")
End Sub

The attached CSS one can customize and color code off course.

I see I will request some feature requests, e.g responsiveness to say the least.

 

[joulongleu]

Very good ,Thank you

 

[Mashiane]

So I try and load records directly from a database..

page.Cell(2,1).SetFixedHeightFromBottom(200, False)
    mygantt.Initialize(page,"mygantt")
    mygantt.headerheight = 50
    mygantt.columnwidth = 30
    mygantt.stepitem = 24
    mygantt.barheight = 20
    mygantt.barcornerradius = 3
    mygantt.arrowcurve = 5
    mygantt.padding = 10
    mygantt.viewmode = mygantt.EnumView.Month
    mygantt.dateformat = "YYYY-MM-DD"
    mygantt.zdepth = ABM.ZDEPTH_1
    mygantt.visibility = ABM.VISIBILITY_ALL
    'Extract records from the database...
    Dim jSQL As SQL = ABMShared.SQLGet
    Dim recs As List = ABMShared.SQLExecuteMaps(jSQL, "select id,projectname,plannedstart,plannedfinish,actualprogress from projects order by wbs,projectname", Null)
    ABMShared.SQLClose(jSQL)
    Dim rCnt As Int
    Dim rTot As Int = recs.size - 1
    For rCnt = 0 To rTot
        Dim rMap As Map = recs.get(rCnt)
        Dim tid As String = rMap.getdefault("id","")
        Dim tstart As String = rMap.getdefault("plannedstart","")
        Dim tend As String = rMap.getdefault("plannedfinish","")
        Dim tname As String = rMap.getdefault("projectname","")
        Dim tprogress As Int = rMap.getdefault("actualprogress",0)
        Dim tdependencies As String = ""
        mygantt.AddTask(tid, tname, tstart, tend, tprogress, tdependencies)
    Next
    page.Cell(2,1).AddComponent(mygantt.ABMComp)

 

[joulongleu]

Hi:Mashiane load records directly from a database is ok ,very cool,Can I update data when I am modifying the date or progress? Thank You.

 

[Mashiane]

Yes you can via the events. Convert the returned json string into a map, get the date or progress key you need and write those to the db. The id key should be a unique identifier for the record in numeric format in my example without the 'tsk' value.

All the best..