Menu Sidebar

Extending Widgets in ArcGIS Web AppBuilder

I’ve had many requests and ideas for Web AppBuilder widgets over the past few years, and many times they are ideas that are building 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.

So happy from my clean widget code!

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!

St. Louis Bike Trails with Open Data from Great Rivers Greenway

2016 was a year of biking for my wife and me. We biked many trails in St. Louis, and even did part of the Katy Trail. So when I saw St. Louis City alderman Scott Ogilvie tweeting about Great Rivers Greenway, the trails organization in the St. Louis area, I started wondering what the future of St. Louis trails will be.

Luckily the Great Rivers Greenway organization has a pretty good resource for getting their data in shapefile format: The data is quite interesting.

All Trails

One of the most practical uses of the data is to create a combined biking trails map of the St. Louis Area:

After looking at the trails map, I immediately wanted to see where the future paths were going to be. I placed the exisiting (green), in-progress (yellow), and planned (red) paths on a map:

2015 vs 2016

As 2016 came to a close, GRG released updated data from what they completed in 2016 and the plans for 2017 (and posted a blog post on the details of some of the new projects). That data is on this map, and I also created an app that allows easy comparison between the two years:

(Full Screen)

What are your favorite trails in St. Louis? Let me know in the comments.

Summary of all map links from above:

How to Create Pitch Charts with Python

A guest post by Gregory Brunner

I have been interested in looking at MLB pitch data and play-by-play for a while now, however, I have not found any good blob posts or tutorials for doing this. So during the MLB Playoffs, while I was checking the score of Cubs vs. Dodgers, Game 5 on Yahoo! it struck me that there is probably a way to get the live game data from Yahoo! while the game is in progress. So I poked around and found that there is! In this post, I will review what I found and how to use the data to make pitch charts using the data from World Series Game 7.

OKSCAUG, Thunder Up!

By Gregory Brunner

I was supposed to be at OKSCAUG in Moore, Oklahoma on Tuesday presenting on Mapping Russell Westbrook’s Shots with Python and ArcGIS; however, on Friday I fell through my garage ceiling and injured my left wrist, elbow, shoulder, and hip. Here’s the hole I left in the ceiling:


It was a 10 or 12 foot fall. Amazingly Miraculously, the x-rays taken at the ER show no broken or separated bones! Still, I have limited range of motion in my left arm and left hip and a lot of pain in my left arm.

For OKSCAUG I was asked to give a short 10-15 minute overview during the morning and a longer technical session in the afternoon. Below, I have linked to the presentations.

Here is the short version:


Go To Story Map

Here is the long version:


Go To Story Map

If you are a basketball fan, check them out. They were really fun presentations to put together.

I am sorry I couldn’t be there with you in Moore, Oklahoma today. I hope you can understand.

Team Basemaps

Team Basemaps is a web app that allows you to choose your favorite team, cycle through the team colors to get the map looking exactly like you want, and then save it to your ArcGIS Online account to use in maps. It uses the Vector Tile Layers in combination with the new ArcGIS JavaScript API 4.0.


I’d love to see your favorite basemap color combinations – post them in the comments!

Some information on how I created this is over on GeoNet.

Newer Posts
Older Posts

Gavin Rehkemper

JavaScript, WordPress, and GeoDev