ArcGIS for Developers

Using third-party libraries

The jimu libraries that come with Experience Builder can be used to include a variety of functionality into your widget. In addition to this functionality, third-party libraries can be included and used within a custom Experience Builder widget.

There are three ways to include third-party libraries to make them available for use within a widget.

NPM install

If this library is used by one widget only, including the library using npm may be a good option.

How to

In a terminal, browse to the root directory of the custom widget, run npm init, and answer the questions. This will place a package.json file at the root directory of the custom widget.

Next, find the name of the third-party library in the npm Package Directory. This can be done by going to npmjs.com and searching, or usually the package name will be listed in the library's documentation pages. Use the package name to run the npm install command:

 
npm install <package-name>

Running this command does two things. First, it downloads the library files and places them into the node_modules directory. Second, it adds a reference to the library in the package.json file you created with the npm init command above.

The package name can now be used in import commands in your custom widget. For example, import * as ReactDataGrid from "react-data-grid";

Since a reference to the library was added to package.json, to quickly install all the widget dependencies on other computers, open a terminal to the widget root directory and run npm install to install all the dependencies for the widget.

See the react-data-grid sample for an illustration of this pattern in action.

Load via CDN using manifest.json

If this library is used by multiple widgets, including the library by putting the library's CDN url in the manifest.json file's dependency property may be a good option.

How to

Find the CDN url of the library. Typically this is listed in the library's documentation, or you may be able to find it on jsDelivr or unpkg. For example, in the jQuery sample the CDN url is https://unpkg.com/jquery@3.5.1/dist/jquery.js.

Add an array property to the widget manifest.json file called dependency and add the url to the array. For example:

   
"dependency": [
  "https://unpkg.com/jquery@3.5.1/dist/jquery.js"
],

Experience Builder will automatically load the library when the Experience is loaded and your widget can use the library per the library's documentation.

See the jquery sample for an illustration of this pattern in action.

Download and load directly

If this library is used by multiple widgets, including the library by manually downloading the files and storing them within your widget code structure may be a good option.

How to

Find the downloadable built assets for the library. Typically this is linked in the library's documentation, or in a dist folder in the downloadable assets in the Releases area of the library's GitHub repository.

After downloading, extract the files and copy them into your widget root directory. Because it will be included via a relative path import, you can place the files in any location within your widget, but by convention it is recommended to place the files within a folder called lib.

After the files are in place, the library can be imported using a relative path. For example:

 
import * as d3 from "./lib/d3/d3.min.js";

See the D3 sample for an illustration of this pattern in action.