Adding Third Party Library to WebAppbuilder

KafilBaig — Wed, 29 Jul 2020 03:45:17 GMT

Hi All,

I have added third party library (Devextreme) in webappbuilder. The path i have added is folder of library is given below.

Myapplication/libs(folder)/dvextreme

These files i have referenced in init.js file in the

resource = resource.concat ({

window.apiUrl + 'dojo/resources/dojo.css',

window.apiUrl + 'dijit/themes/claro/claro.css',

window.apiUrl + 'esri/css/esri.css',

window.apiUrl + 'dojox/layout/resources/ResizeHandle.css',

window.path + 'jimu.js/css/jimu-theme.css',

window.path + 'libs/caja-html-sanitizer-minified.js',

window.path + 'libs/moment/twix.js',

window.path + 'libs/Sortable.js',

window.path + 'libs/cropperjs/cropperjs.js',

window.path + 'libs/cropperjs/cropper.css',

//because we have jimu/dijit/GridLayout dijit, so we import this css here

window.path + 'libs/goldenlayout/goldenlayout-base.css',

window.path + 'libs/goldenlayout/goldenlayout-light-theme.css',

window.path + 'libs/dvextreme/scripts/jquery-min.js',

window.path + 'libs/dvextreme/scripts/cldr.min.js',

window.path + 'libs/dvextreme/scripts/cldr/event-min.js',

window.path + 'libs/dvextreme/scripts/cldr/supplemtnet-min.js',

window.path + 'libs/dvextreme/scripts/cldr/unresolved-min.js',

window.path + 'libs/dvextreme/scripts/globalize-min.js',

window.path + 'libs/dvextreme/scripts/globalize/message-min.js',

window.path + 'libs/dvextreme/scripts/globalize/number-min.js',

window.path + 'libs/dvextreme/scripts/globalize/currency-min.js',

window.path + 'libs/dvextreme/scripts/globalize/date-min.js',

window.path + 'libs/dvextreme/scripts/dx.all.js',

window.path + 'libs/dvextreme/scripts/jszip-min.js',

window.path + 'libs/dvextreme/scripts/dx.common.css',

window.path +'libs/dvextreme/styles/dx.dark.css'

});

first it loads correctly all the components of the devextreme but sometimes it gives error in console that it dint load the resource. Again when i do ctrl + F5 it loads correctly.

Is there any other place i need to add the reference of third party library so that it works correctly. Please guide me on this issue.

Thanks in Advance

Re: Adding Third Party Library to WebAppbuilder

shaylavi — Fri, 31 Jul 2020 13:43:34 GMT

Hi Kafil,

The way to add 3rd party libraries to WAB is explained in the following link -

Use other libraries—ArcGIS Web AppBuilder (Developer Edition) | ArcGIS for Developers

With that being said, if you're using modern libraries that are packaged with modern Javascript technologies, which includes NPM and Webpack, these libraries will not be able to be added, as they have dependencies that require installation through NPM and newer versions of Javascript.

You can start by adding a simple CDN external library such as JQuery or others (you can find examples in the source code of widgets). Once you get a simple external library to work, you'll know the workflow to add other libraries. Then one-by-one add your own libraries and see if they are able to be added or not.

Shay.

topic Adding Third Party Library to WebAppbuilder in Web AppBuilder Custom Widgets Questions

Adding Third Party Library to WebAppbuilder

Re: Adding Third Party Library to WebAppbuilder