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:

Dojo dstore with dgrid – Don’t Forget Trackable

dstore-dojo-logoMy dstore-based dgrid gave me an issue last week when it was not updating when adding items to the collection.

Dgrid Add Items – Not Trackable

Click “run” above …. hm, that didn’t work.

If you do a search, you’ll see on the dgrid 0.4 blog post that:

dstore 1.0 introduces a new Trackable mixin that is the evolution of Observable. dstore/Trackable allows dgrid to stay in sync with all store updates much more easily.

Which means, basically, that you must add the Trackable mixin to your dstore if you want your dgrid to be updated when you add items:


I hope this helps you out!

Display MailChimp Subscriber Numbers on WordPress

If you have a ton of MailChimp subscribers, and want to tell the world (and build more subscribers in the process), the MailChimp Subscriber Chiclet Plugin is for you.


  • Four colors
  • Easy-to-use WordPress Shortcode interface
  • Configurable link to MailChimp signup page
  • Configurable text

A pro version is coming with a few more features than the free version.

Download the free version from now: MailChimp Subscriber Chiclet for WordPress

ArcGIS JavaScript Draggable InfoWindow

The InfoWindow on a web map is the primary method of of showing information on selected items in the map. The map control automatically does its best to show the InfoWindow within the the viewport of the map, but on some maps and in certain situations, it may be appropriate to allow the user to drag the InfoWindow away from the automatically placed location. This is can be done easily with the dojo/dnd/Moveable module.

dojo/dnd/Moveable simply takes a DOM Node reference. To make the InfoWindow of the map draggable, pass map.infoWindow.domNode to the Moveable constructor. For a great user experience, pass the title bar as the “handle” and remove the indicator triangle pointer once user has dragged the InfoWindow:

In what situations have you used a draggable InfoWindow Popup? Let me know in the comments.