Generating Custom Widgets for Esri’s WebApp Builder with Yeoman

Recently I’ve been developing custom widgets for the ArcGIS Web AppBuilder, and I have found that there is a lot of boilerplate code that you have to create for each new widget. I thought that a Yeoman generator would be a useful way to scaffold out the widget files, so I created generator-esri-appbuilder-js.

What It Does

The package contains a couple of generators that walk users through a series of prompts to gather information about a custom widget that they want to develop for the Web AppBuilder, and then scaffolds out the widget’s files.

Screenshot of running the generator-esri-appbuilder-js generators

The generator prompts you for widget properties and then scaffolds out the required files.

After running the generators in the Web AppBuilder’s stem app, the developer will be able to see the widget in the builder and add it to applications.

Screenshot of the scaffolded widget in the builder

The scaffolded widget appears in the builder and can be added to applications.

As you can see, the scaffolded widget doesn’t do much as is, so it’s up to the developer to build upon this foundation and add functionality. My hope is that developers will find it useful to have all the plumbing in place so they can focus on the logic and UI that makes their widget unique.

This generator might work a little differently than you’d expect in that the default generator (yo esri-appbuilder-js) doesn’t do much. Instead, the main work of scaffolding out widget files is done by a subgenerator, yo esri-appbuilder-js:widget. The idea is that we can add more subgenerators for other tasks such as scaffolding out a theme, or a test config file. The default generator is only run once, but the subgenerators are run each time you need a new widget, theme, etc.

Other Yeoman Generators for Esri JavaScript Applications

You should also check out a couple of other Yeoman generators that are useful when scaffolding out Esri JavaScript applications:

Also, if you’re interested in other ways to automate your application development workflow, you ought to check out Josh Peterson’s talk on JavaScript tooling from the 2014 Esri Developer Summit, which covers Grunt, jshint, bower, stylus and more.

Next Steps

There are some obvious improvements that can be made to the way the widget generator scaffolds out a custom widget that I’ll be working on over the next couple weeks.

Beyond that, the generator is up on npm and GitHub. Take it out for a spin, and let me know what you think. Pull requests are gladly accepted, especially by anyone that is interested in creating a subgenerator to scaffold out a custom Web AppBuilder theme.