Gantt and Salesforce Visualforce Page

Gantt
#1

Hi,
I want to use Gantt in salesforce visualforce Page.
I have related gannt with an object called “project”.
I want to loop in another object, called task, to retrieve task of the project.
Project and task are already related in Apex Class.

Now, in my environment, Code is the following:

var tasks = {

        data:[
        
            {id:1, text:"{!proj2[0].Name}", start_date:"{!proj2[0].Ruggia__Data_Inizio__c}", duration:"{!proj2[0].Ruggia__Ore_Totali_Progetto__c}",progress:"{!proj2[0].Ruggia__Percentuale_Di_Completamento__c}", open: true},
           
           
           
           
            {id:2, text:"{!task[0].Name}",    start_date:"{!task[0].Ruggia__Data_Inizio__c}", duration:"{!task[0].Ruggia__Durata_totale_in_ore__c}", order:10,
                progress:0.6, parent:1}, 
            {id:3, text:"{!task[1].Name}",    start_date:"{!task[1].Ruggia__Data_Inizio__c}", duration:"{!task[1].Ruggia__Durata_totale_in_ore__c}", order:20,
                progress:0.6, parent:1} ,
            {id:4, text:"{!task[2].Name}",    start_date:"{!task[2].Ruggia__Data_Inizio__c}", duration:"{!task[2].Ruggia__Durata_totale_in_ore__c}", order:20,
                progress:0.6, parent:1} 
        ],
                links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
      
    ] 
   };

I would like to do something like this:
var tasks = {

        data:[
        
            {id:1, text:"{!proj2[0].Name}", start_date:"{!proj2[0].Ruggia__Data_Inizio__c}", duration:"{!proj2[0].Ruggia__Ore_Totali_Progetto__c}",progress:"{!proj2[0].Ruggia__Percentuale_Di_Completamento__c}", open: true},
           
           
           
           for (var i=0; i< ({!task}.size);i++)
            {id:2, text:"{!task[i].Name}",    start_date:"{!task[i].Ruggia__Data_Inizio__c}", duration:"{!task[i].Ruggia__Durata_totale_in_ore__c}", order:10,
                progress:0.6, parent:i-1}, 
           
        ],
                links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
      
    ] 
   };

Can someone help me?
Thank you
Valentina

#2

Hi,
sorry, I’m not sure if I completely understand your question.
Do you mean that you have a tree of tasks loaded into dhtmlx gantt and you want to iterate a subtree (children) of a specific task?
If so, you can use gantt.eachTask method
docs.dhtmlx.com/gantt/api__gantt_eachtask.html
demo: docs.dhtmlx.com/gantt/snippet/1e17c145

you can also use gantt.getChildren to get ids of children of any specific task
docs.dhtmlx.com/gantt/api__gant … ldren.html

#3

I got it working (to my amazement) in a Lightning component bundle.
It therefore runs in a harness.app, as a page component and on a mobile device.
I’ve added the framework for getting data from SF but not actually used it in this example.
I just created some dummy SF tasks but any custom object could be used.
I’m struggling with the formatting around the

and am now learning what functionality the dhtml offers – which looks :sparkles: amazing :sparkles:
Any guidance would be appreciated.

Project Resources Bundle, Controller and Test:
Resource dhtml is zip file with dhtmlxgantt.css and dhtmlxgantt.js
Component:
<aura:component implements=“force:appHostable,force:hasRecordId,flexipage:availableForAllPageTypes”
controller=“ProjectResourcesController”
access=“global” >

<ltng:require styles="/resource/dhtml/dhtmlxgantt.css" />  
<ltng:require scripts="{!$Resource.dhtml + '/dhtmlxgantt.js'}"  afterScriptsLoaded="{!c.initGantt}" />    

<aura:attribute name="SendMessage" type="String" default = "This is ProjectResources"/>

<style type="text/css" media="screen">
html, body{
    margin:0px;
    padding:0px;
    height:100%;
    overflow:hidden;
}   
</style>

<div id="gantt_here" style='width:100%; height:500px;'></div>

</aura:component>
Controller:
({

initGantt : function(component, event, helper) {
    
    // Calling server-action to get the data
    var action = component.get("c.getData");

    // Create a callback that is executed after
    // the server-side action returns
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state == "SUCCESS") {
            let data = response.getReturnValue();
            console.log('got data='+data);
            // Render the returned data --- to be completed
            //
            //helper call has to be here else gantt is not defined.
            //if first line of this method, doesn't work
            //don't know why!
            helper.drawAGantt(component);
        }
        else if(state === "ERROR") {
            var errors = response.getError();
            
             if (errors) {
                 console.log("Error message: " + errors);
                 
            } else {
                console.log("Unknown error");
            } 
            
        }
    });

    $A.enqueueAction(action);

}//initGantt

})

Helper:
({

drawAGantt : function( component ) {
    
    /* see following threads about this...
    https://forum.dhtmlx.com/t/gantt-and-salesforce-visualforce-page/36899
    https://forum.dhtmlx.com/t/pars-data-from-apex-class-to-apex-page/33644/4
    https://developer.salesforce.com/forums/?id=906F0000000BaMRIA0
    https://developer.salesforce.com/forums/?id=906F000000097EkIAI
    */
    
     
    
    var tasks =  {
        data:[
            {id:1, text:"Project #1", start_date:"01-04-2018", duration:18,order:10,
                progress:0.4, open: true},
            {id:2, text:"Task #1",    start_date:"02-04-2018", duration:8, order:10,
                progress:0.6, parent:1},
            {id:3, text:"Task #2",    start_date:"11-04-2018", duration:8, order:20,
                progress:0.6, parent:1}
        ],
                links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
        { id:4, source:2, target:5, type:"2"},
    ]
    };
                    
    //$('#gantt_here').gantt.init();
    gantt.init("gantt_here");
	gantt.parse(tasks);
    
}//drawAGantt

})

public class ProjectResourcesController {

@AuraEnabled
public static List<Task> getData(){
   
    // For this example, dummy data to show framework
    // but use query etc...
    List<Task> lstData = new List<Task>();
    lstData.add( new Task( ActivityDate = Date.valueOf('2018-09-01T13:00:00z'), Subject = 'Task1') );
    lstData.add( new Task( ActivityDate = Date.valueOf('2019-04-01T17:00:00z'), Subject = 'Task2') );
    
    return lstData;
}

}//ProjectResourcesController
@isTest(seeAllData=true)
private class TestProjectResources
{
static testMethod void TestProjectResources()
{
Test.startTest();
ProjectResourcesController tData = new ProjectResourcesController();
List lstPies = ProjectResourcesController.getData();
Test.stopTest();
}
}//TestProjectResources

<aura:application access=“GLOBAL” extends=“force:slds”>

    <c:ProjectResources/>

</aura:application>

#4

@daver , thank you for posting your solution.

You can learn more about DHTMLX products on the main website:
https://dhtmlx.com/
If you want to know specifically about DHTMLX Gantt functionality, you can check the examples on the following page:
https://docs.dhtmlx.com/gantt/samples/
And there is official documentation with examples explained:
https://docs.dhtmlx.com/gantt/desktop__guides.html

#5

Custom Script Eval error [SecureDOMEvent: [object Event]{ key: {“namespace”:“c”} }]

#6

Hello,
It is hard to suggest what might be wrong.
Please send me a complete package and give me the steps to reproduce the issue. Then I’ll try to reproduce the issue locally and see what might be wrong.

#7

What is the Salesforce API Version of your lightning component where you got this to work? I bet it is v39.0 or before, because v40.0 and later has Locker Service enabled and would cause DHTML* products to not work. I tried it today in v45.0 and it failed returning Uncaught AuraFriendlyError: Custom Script Eval error [SecureDOMEvent: [object Event]{ key: {“namespace”:“c”} }] error.

#8

Hello Mike,
Please, do not create duplicate questions in different topics. Let’s continue our discussion in one place.