Using third-party libraries
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.
If this library is used by one widget only, including the library using
npm may be a good option.
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.
If this library is used by multiple widgets, including the library by putting the library's CDN url in the
dependency property may be a good option.
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
Add an array property to the widget
manifest.json file called
dependency and add the url to the array. For example:
"dependency": [ "https://firstname.lastname@example.org/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.
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.
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
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.