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.

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.

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:

Steve Gourley and Scott Davis created generator-dojo-widget to scaffold out the files needed for a Dojo widget. I really like this generator because it can be used in any Esri Dojo application, and because it generates a Jasmine test suite and as well as a functional test page!

Next Steps

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.