Adding Third Party Library to WebAppbuilder

915
1
07-28-2020 08:45 PM
KafilBaig
New Contributor III

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

0 Kudos
1 Reply
shaylavi
Esri Contributor

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.

Shay