Integrate custom vis.js component

Integrate custom vis.js component

  

I created an web application and on a page I want to integrate a custom personnal component. The component is a the timeline from vis.js but extended. I integrate the timeline from vis.js and there is no problem. But if I try to integrate my component, so vis.js plus one other js file, it's not working.

Could you explain me how I can integrate the component which has 2 differents js file (and css) ?

Hi Adrien,

How are you trying to integrate the javascript?

Cheers,

José

Hi Adrien,

Can you explain what kind of issues do you have with using two JS files?

That being said, have you checked this forge component? It already makes the Timeline from vis.js available to OutSystems applications.

Thanks for your answers. I already try to use this forge VIS.JS component and it works but I have extended the vis.js library and so I have the vis.js file (and the css) and a second file which is the extension (and also a css). So I need to integrate these 4 files in my application (2 javascript and 2 css).

So I try to add the files in x.y expression like in the forge component. But it's not working. I also tried to add my files in the resources folder but I don't succed to call the files in this folder.


So, I don't know how use my files. Do you know how I could do it ?

Hi Adrien,

You can paste your JS code into a web block's JavaScript property, and define the custom CSS on the extension web block... then place the forge component's web block inside yours.

Now, whenever you use your extension web block, in a screen will not only load the VIS.JS JavaScript but also load the extension JavaScript as a resource (and take advantage of the browser's caching mechanisms), and load the CSS after loading the CSS for the forge component's CSS.

What's the goal of the extension JavaScript + CSS you developed?

Jorge Martins wrote:

Hi Adrien,

You can paste your JS code into a web block's JavaScript property, and define the custom CSS on the extension web block... then place the forge component's web block inside yours.

Now, whenever you use your extension web block, in a screen will not only load the VIS.JS JavaScript but also load the extension JavaScript as a resource (and take advantage of the browser's caching mechanisms), and load the CSS after loading the CSS for the forge component's CSS.

What's the goal of the extension JavaScript + CSS you developed?

Thanks for your answer ! 

I tried what you said but this is not working because in my custom javascript I think I use something unknown in the context. I got these errors : "Uncaught ReferenceError: moment is not defined" and "Uncaught TypeError: $ is not a function". 

Do you know how I could do ?

And the goal of the extension JavaScript + CSS I developed is the add some features to the offical vis.js timeline.