B4J Library [ABMaterial] Beginning the Frappe Gantt Chart

Discussion in 'B4J Libraries & Classes' started by Mashiane, Jun 21, 2018.

  1. Mashiane

    Mashiane Expert Licensed User

    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

    FrappeGantt.gif

    In BuildPage..

    Code:
    page.AddExtraCSSFile("custom/frappe-gantt.css")
        
    page.AddExtraJavaScriptFile("custom/frappe-gantt.min.js")
    In ConnectPage

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

    Code:
    '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.
     

    Attached Files:

    Last edited: Jun 26, 2018
    amaxco and joulongleu like this.
  2. joulongleu

    joulongleu Member

    Very good ,Thank you:)
     
  3. Mashiane

    Mashiane Expert Licensed User

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

    Gantt.png

    Code:
    page.Cell(2,1).SetFixedHeightFromBottom(200False)
        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)
     
    amaxco and joulongleu like this.
  4. joulongleu

    joulongleu Member

    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.
     
  5. Mashiane

    Mashiane Expert Licensed User

    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..
     
    joulongleu likes this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice