Package Exports

generator-esri-appbuilder-js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (generator-esri-appbuilder-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

generator-esri-appbuilder-js

Yeoman generator to help customize the ArcGIS Web AppBuilder.

About

This generator scaffolds out the boilerplate files that are needed when you are customizing the Web AppBuilder. This includes generators to creates project files (package.json, .jshintrc, etc) and scaffold out the files needed to create a new custom widget

Screenshot

Getting Started

Installation

To install Yeoman from npm (if not already), run:

$ npm install -g yo

To install generator-esri-appbuilder-js from npm, run:

$ npm install -g generator-esri-appbuilder-js

Running the Generators

The generators should be run in the root folder of either the stem app or an app that you've already created with the Web AppBuilder.

App (Default) Generator

Currently the app generator doesn't do much other than install some project files (package.json, .jshintrc, etc) and ensure required subfolders (like widgets) exist. The subgenerators do most of the work.

Navigate into either stemapp or builder/apps/[appId] under your local Web AppBuilder installation
Run the generator with yo esri-appbuilder-js
Answer the man's questions!

Prompt	Description	Default
Author	Name of developers or organization for widget manifests	Your Name or Organization

Scaffolds out the files needed to create a new custom widget.

Navigate into either stemapp or builder/apps/[appId] under your local Web AppBuilder installation
Run the generator with yo esri-appbuilder-js:widget
Answer the man's questions!

Prompt	Description	Default
Widget Name	Folder name for output files and widget identifier	MyWidget
Widget Title	Name users see in widget selector and panel title bar	My Widget
Description	What does this widget do? (optional)	A custom Web AppBuilder widget
CSS Prefix	Prefix for the widget's base class (optional)	myapp-
Will your widget run inside a panel?	Will your widget run inside a panel?	Yes

Taking the default values for the prompts will generate the following output under the widgets folder:

MyWidget
│   config.json
│   manifest.json
│   Widget.html
│   Widget.js
│
├───css
│       style.css
│
├───images
│       icon.png
│
└───nls
        strings.js

The next time you run the Web AppBuilder, you will see something like the following on the widgets panel:

Issues

Find a bug or want to request a new feature? Please let us know by submitting an issue.

Contributing

We welcome contributions from anyone and everyone. Please see Esri's guidelines for contributing.

Credit

This generator was inspired by @steveoh and @stdavis's generator-dojo-widget as well as @dbouwman's generator-bootmap.

Licensing

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

A copy of the license is available in the repository's license.txt file.

[](Esri Tags: "Web AppBuilder" yeoman generator node) [](Esri Language: JavaScript)