3

I was hoping to be able to use this JS library (https://frappe.io/gantt) inside a lightning component, initially after loading the library I was getting the error

.... $controller$doGantt [Gantt is not defined]

I was able to fix the error by replacing the main function from var Gantt to window.Gantt, however now I am getting the error

.... $controller$doGantt [bar.getX is not a function]

But I am unable to find that function inside the file

Is there anything I can do to avoid modifying the original library in order to run inside a component? or it is just better to run this inside a VF Page?

My current component looks like:

<aura:component>
    <ltng:require styles="{!$Resource.gantt + '/frappe-gantt.css'}" 
    scripts="{!$Resource.gantt + '/frappe-gantt.js'}" afterScriptsLoaded="{!c.doGantt}" />

    <h2>Interactive Gantt Chart entirely made in SVG!</h2>
    <div id="myDiv" aura:id="div1" class="gantt-target"></div>

</aura:component>

And the controller:

({
    doGantt : function(component, event, helper) {
        var tasks = [
            {
                start: '2018-10-01',
                end: '2018-10-08',
                name: 'Redesign website',
                id: "Task 0",
                progress: 20
            },
            {
                start: '2018-10-03',
                end: '2018-10-06',
                name: 'Write new content',
                id: "Task 1",
                progress: 5,
                dependencies: 'Task 0'
            },
            {
                start: '2018-10-04',
                end: '2018-10-08',
                name: 'Apply new styles',
                id: "Task 2",
                progress: 10,
                dependencies: 'Task 1'
            },
            {
                start: '2018-10-08',
                end: '2018-10-09',
                name: 'Review',
                id: "Task 3",
                progress: 5,
                dependencies: 'Task 2'
            },
            {
                start: '2018-10-08',
                end: '2018-10-10',
                name: 'Deploy',
                id: "Task 4",
                progress: 0,
                dependencies: 'Task 2'
            },
            {
                start: '2018-10-11',
                end: '2018-10-11',
                name: 'Go Live!',
                id: "Task 5",
                progress: 0,
                dependencies: 'Task 4',
                custom_class: 'bar-milestone'
            },
            {
                start: '2014-01-05',
                end: '2019-10-12',
                name: 'Long term task',
                id: "Task 6",
                progress: 0
            }
        ]
        var ganttTable = component.find("div1").getElement();

        var gantt_chart = new Gantt(ganttTable, tasks);
        // console.log(gantt_chart);        
    }
})
Improve this question
1
  • Did you try downgrading you component version below 40(just for debugging) just as a test to see if its the locker service issue? If it works for component version below 40 then it has to do with locker service Commented Nov 2, 2018 at 14:29

1 Answer 1

Reset to default
4

First to begin with lets try to backtrack on the error to make sure this library is locker service compatible. There are couple of ways to do that

  1. As i mentioned in the comments try downgrading your component below version 40 to see if it works.(Only for debugging purpose)
  2. Try linting your library in locker console

I did try messing around with the library in the locker console and surprisingly both with locker enabled and disabled its returning undefined

enter image description here Based on the above It's hard to determine whether its a locker issue or a library issue. But if it a locker issue then i guess vf page might be your option but keep in mind it has to be a standalone vf page and not a lightning component in vf page where locker is still enforced.

Also look at What Does Locker Service Affect?

Improve this answer
2
  • I havent play with the locker console, I still trying to get my head around, however I did put the version to 39 and change back to the original js (I put back var Gantt instead of window.gantt) and it worked, I am sorry for the silly question: so after version 39 is there an enforcement in locker service? Commented Nov 2, 2018 at 19:39
  • 1
    @manza yes locker service is enfored 40 and above. Earlier it used to be a critical update that you can enale and disable but now downgrading the version is the only option. Based on this it has to locker service issue then. The library has to make it more secure by adhering to the locker rules Commented Nov 2, 2018 at 19:41

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.