Adding D3 to an ArcGIS Web AppBuilder Widget

If you’re an Geodev that works with ArcGIS, you may be familiar with Web AppBuilder, a platform that allows us as developers to create custom widgets that then our business users can use to create web apps around their maps.

One thing you might want to do as a developer is add an additional JavaScript library to use in your widget. One easy way to do this would be to take the derivative app that AppBuilder spits out, and just add a <script ... > tag to the index.html or whatever. This both feels dirty, because your widget is not totally modular, but also is probably polluting the global namespace. There must be a better way.

After a bit of digging and tinkering, we figured out the exact synatax. It’s not complex, it just took a few minutes to get right. Basically, you want to add your module to the “paths” dojoConfig variable, via ‘require’, right before your widget is created (the ‘define’ call) in your widget.js file.

For example, if you’re using D3.js, call require with an object with the “paths” property - right before the “define” line in your Widget.js file, like this:

You can then include d3 in your AMD header:

I periodically write about technology, maps, open data, and other software topics. To get updates about new posts:

See Also