Question about undefined javascript variable (using external library)

Ask us anything How do I?
1

Hi there,

I was fiddling around with frappe gantt.

I got it working on staging using the CDN in the custom code headers. I intitialize frappe gantt using a workflow on page load with custom javascript action.

I also managed to setup the event handlers taskClick, dateChange, progress change, logging stuff to the console log as a starting point.

I added buttons for view change, but somehow that is not working. When I use: gantt.change_view_mode(‘Week’) I get the error, that ‘gantt’ is not defined. But in the on page load workflow I do define ‘gantt’ using this: const gantt = new Gantt(“#gantt”, tasks)

How can I have ‘gantt’ available for view change?

FYI: I will try to use var instead of const. Maybe that will help.

2

You need to hook it to the window, because the const you define is local to that code block. Check this out.

I explain how I import a JS SDK for Firebase. I also hook stuff to the window there.

3

@Broberto thanks. I am not a coder. I tried something but I get _window is not defined. How can I hook the following correctly to the window?

const gantt = new Gantt(“#gantt”, tasks)
4

You need to access the window by using this:

const = _window = wwLib.getFrontWindow()

Then you can do _window.gantt = … gant setup here

Then in your js action, you need to again do

const = _window = wwLib.getFrontWindow()
and then you can use _window.gantt … rest of the actions.

If you’re still stuck, then probably you’ll need to look up some JS tutorial, or I also do sessions (Consult with Broberto – Broberto)

1 Like
5

@Broberto [quote=“Broberto, post:4, topic:15261, full:true”]
You need to access the window by using this:

const = _window = wwLib.getFrontWindow()

Then you can do _window.gantt = … gant setup here

[/quote]

Thanks. I will try this. I have some colleagues with javascript experience.

Last question I hope you are able to answer. The part in the quote above. Should this be placed in the custom code section of Weweb or can I use this in an workflow (Javascript Action).

6

You need to “hook the gantt to the window” wherever you’re importing it. I hope that makes sense. If you send my blog to the JS colleague, he should know, it’s a basic setup.

7

Thanks I will ask my colleague :slight_smile:

On the page I have a workflow: onAppLoad(before fetching collections)

In this workflow there is one javascript action. In this action I added the added the state change embed script for the js library and css.

After that I added the script to intitialize the Gantt and hook it to the front Window.

The Gantt renders ok.

On the page I added two button to change view via a worlflowd: but still when I do: _window.gantt.change_view_mode(‘Week’), I still get: _window is undefined.

8

Hard to tell without seeing it. Probably you’re not defining the const _window= wwLib… in the JS block

9

@Broberto It is working now :love_you_gesture:. I had a typo in the change view mode script

I used: gantt.changeViewMode(‘Week’);

But I needed to use: gantt.change_view_mode(‘Week’);

Thanks for sharing you Insights

1 Like