Gantt component in salesforce lightning


#1

Can any one explain how to use Gantt component in salesforce lightning with sample code.

GanttCompApp.app

<aura:application >
<c:GanttComp/>
</aura:application>


GanttComp.cmp

<aura:component controller=“GanttData_Custom_Controller” access=“global” >

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

    <div id="gantt_here" style='width:10 00|px; height:420px;'></div>

</aura:component>


GanttCompController.js

({
myAction : function(component, event, helper) {

},

initGantt : function(component, event, helper) {

// Calling server-action to get the data
var action = component.get("c.getAllTask");

debugger;
// 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);
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
})


GanttCompHelper.js

({
helperMethod : function() {

},
drawAGantt : function( component ) {

// I am currently keeping static value now 


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.init("gantt_here");
gantt.parse(tasks);

}//drawAGantt
})


When Page loads I am getting below error

This page has an error. You might just need to refresh it.
Error in $A.getCallback() [i.contentWindow.addEventListener is not a function]
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Failing descriptor: {c:GanttComp}

Can you please let me know to fix this issue


#2

Hi,
as a rule, you’ll get a reply faster if you explain what you’ve tried to do (with code samples) and what didn’t work for you.

From I can tell right now, gantt may require enabling the content security policy extensions in order to work correctly in SalesForce. Other than that, I’m not aware of any specific approaches needed for salesforce integration

You need to:

  1. initialize gantt on the page
  2. connect it to the data store

I’m not sure whether the built-in ajax api of dhtmlxgantt is compatible with approaches used in SalesForce, so you may need to handle data loading and saving changes manually - https://docs.dhtmlx.com/gantt/desktop__server_side.html#savingchangeswithoutdataprocessor
https://docs.dhtmlx.com/gantt/desktop__server_side.html#customrequestheadersandparameters

If you have issue with anything specific - please do elaborate.


#3

GanttCompApp.app

<aura:application >
    <c:GanttComp/>
</aura:application>

GanttComp.cmp

<aura:component controller="GanttData_Custom_Controller"  access="global" >
	
    <ltng:require styles="{!$Resource.DHX+ '/codebase/dhtmlxgantt.css'}" />  
<ltng:require scripts="{!$Resource.DHX+ '/codebase/dhtmlxgantt.js'}"  afterScriptsLoaded="{!c.initGantt}" />  

<body>
        <div id="gantt_here" style='width:10 00|px; height:420px;'></div>
    </body>
</aura:component>

GanttCompController.js


({
	myAction : function(component, event, helper) {
		
	},
    
    initGantt : function(component, event, helper) {
    
    // Calling server-action to get the data
    var action = component.get("c.getAllTask");
 debugger;
    // 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);
            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
})


GanttCompHelper.js


({
	helperMethod : function() {
		
	},
    drawAGantt : function( component ) {
    
    // I am currently keeping static value now 
	
	
    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.init("gantt_here");
	gantt.parse(tasks);
    
}//drawAGantt
})


When Page loads I am getting below error

This page has an error. You might just need to refresh it.
Error in $A.getCallback() [i.contentWindow.addEventListener is not a function]
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Callback failed: apex://GanttData_Custom_Controller/ACTION$getAllTask
Failing descriptor: {c:GanttComp}

Can you please let me know fix the issue


#4

Hi,
don’t have any good ideas, unfortunately.
The error seems to fire from getAllTask server call.
Does your callback gets called, or the error happens prior to it?

E.g. if you put a debugger here - does the program stops here?

 action.setCallback(this, function(response) {
     debugger;// <-- HERE

        var state = response.getState();
        if (state == "SUCCESS") {

I wonder whether it is something in server action or in the callback code.