How to add external js library to custom module?
I would like to add an external javascript library called intro.js to a custom module to provide a nice user interface for guided instructions.
What is the recommended way to include the js and css files from the external library in the build process so it is available in the custom module? I think I could hack it into my module by pasting the javascript into my module, but am guessing that is not the best approach.
I have installed the type script definition file and I can import that into my module, but still need to make sure the js and css are included.
--Marc
0
-
Marc,
We reference JS and CSS from our CDN using direct URLs in our custom module. There shouldn't be anything that prevents you from using a locally sourced file, as long as it is publicly available. To run the custom module, we locally reference a JS file inC:\Program Files (x86)\Latitude Geographics\Geocortex Essentials\Default\REST Elements\Sites\YOURSITE\Viewers\YOURVIEWER\Resources\Vendor\geoWidgets\geoSherpa.js
and add the reference to the module in the library section of the appropriate configuration files using:{ "id": "GCX-geoSherpa-Interface", "async": true, "location": "{ViewerConfigUri}../../Vender/geoWidgets/", "locales": [] }On a side note, we are releasing an open beta for an interactive tutorial product called geoSherpa in the next week or two. We are cleaning up a few items but you can find more out about it at https://www.geowidgets.io/products/geosherpa/. We developed an WSYWIG editor and have demo sites available. Just a note, we are in a pretty heavy bug testing mode, I noticed a few interactive tours have broken due to changes.0 -
The example above is unique to each site. If you want the same module to execute for all your sites, then I would recommend putting your references in the main viewer rather than the site.
Best,
-Tom0 -
Tom,
How do you reference your JS and CSS from your custom module? Do you use the AMD module template pattern? I can easily add the CSS, but the separate JS file is where I am gettting stuck. The only thing that has worked is to add a script tag in the index.html file, though I don't want this to be loaded for all sites.
Marc0 -
Marc,
We have a custom activity that imports our CSS & JS from AWS because we use the same JS and CSS for Geocortex, Web AppBuilder, and HTML sites. The code above is essentially a wrapper to call our generic code and then we inject ourselves into the site during the initialization process. The functions we use to do this are:private _injectCSS(): void { let link = document.createElement('link'); link.href = PluginModule._geoSherpaCSS; link.type = 'text/css'; link.rel = 'stylesheet'; document.head.appendChild(link); } // private _injectScript(): void { let script = document.createElement('script'); script.setAttribute('src', PluginModule._geoSherpaScript); script.setAttribute('type', 'text/javascript'); script.onload = () => { this._onScriptLoaded(); }; document.head.appendChild(script); }
Tom0 -
Thanks, Tom.
I had been trying the jQuery version of that with $.getScript() and $.ajax(). For some reason my script will trigger the onLoad callback, but I don't see that it has actually been incorporated into the application. There should be a global introJs object once the script is loaded and for some reason it keeps saying undefined. The only way I have gotten it to work is by including the script tag in the original html of the index.html. Puzzling.
--Marc0 -
For whatever it is worth, it appears that my issue was related to a loading sequence issue. I had to ditch going with introJs and found another option that is working (jquery.tour plugin).
--Marc0 -
Marc - Just to let you know, how we are doing this is a pretty brute force method. You might try requires instead. We do our module development in TypeScript. 0 -
Tom - Yeah, I am doing my module development in TypeScript, too. I tried using require pointed at a local version of the javascript file in my module folder, but the typescript compiler is set to not allow javascript files in the build process and I was't seeing a way to allow javascript since I think it creates a redundancy with the transpiled ts files. So I guess I am stuck with the brute force approach unless I am missing some other way to connect in the javascript files in the custom module build cycle.
--Marc0
Please sign in to leave a comment.
Comments
8 comments