Extending Widgets in ArcGIS Web AppBuilder
I’ve had many requests and ideas for Web AppBuilder widgets over the past few years, and many are ideas that build on an existing widget. For example, a query widget that is custom to a particular workflow, an edit widget that enforces certain geometry movement restrictions, or maybe adding a few more options to the built-in print widget.
Most developers will copy the original out-of-the-box (OOTB) widget, rename it, and then start development from there. Which is great because it gets you moving quickly. But is this really the best way to do things?
There are many problems that you’ll eventually encounter when doing this copy/paste dance, and they all stem from the fact that there is no separation of your custom code from the original, OOTB widget code. Some potential future problems include:
Upgrading your widget to a new version of the OOTB widget is almost impossible
It’s hard to identify if bugs you encounter are stemming from your custom code or the original widget code.
Future developers trying to understand how your widget works have a much larger codebase to learn and understand (your custom code plus the original widget code).
Luckily there is a good way of “extending” modules in dojo/declare. Most widgets use this feature to extend from jimu/BaseWidget, but you can use it to extend from an existing widget too!
So how would you do this? (I’ll use this repo as an example)
First create a new, blank widget. You can do that by either creating a manifest.json and Widget.js file manually, or use the convenient yeoman generator that will create the files automatically.
Next, modify your widget to extend from an existing widget instead of extending from BaseWidget. You have to include the “parent widget” in the page as well as referencing it in your delcare statement. See an example here.
Next, include the translation and style files from the original widget. Don’t forget to set this.nls.
Finally, override functions in the parent widget as needed to get your desired functionality. In this example, I overrode the _createEditor function, but this will be different depending on what you want to do with your widget.
Extending your widget is a little more work, but you end up with much cleaner code. I hope you give it a try!
Have you done this or something similar? Let me know in the comments, or contribute to the example GitHub repository. Want more Web AppBuilder development tips and tricks? Catch my talk at Esri Dev Summit 2017!
Subscribe
Get an email summary of my blog posts (four per year):
... or follow the blog here: