Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- All Communities
- :
- User Groups
- :
- Alaska GIS Users
- :
- Blog
- :
- Web Appbuilder: Tips and tricks for creating, modi...
Web Appbuilder: Tips and tricks for creating, modifying and using custom widgets (2/5/2018)
Subscribe
18794
0
02-15-2017 11:25 AM
- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
02-15-2017
11:25 AM
Tips and tricks for creating, modifying and using custom widgets
last update: 2/5/2018
- 2/5/2018 Mixing Intro.js and WAB, live example (think WAB tutorial for your users)
- 10/11/2017 new WAB video series
- 9/27/2017 customizing tip Change Credits Attribution for external Services in Web (Base) Map
- Web AppBuilder for ArcGIS v2.5 Developer Edition Now Available! | ArcGIS Blog
- Posts of interest:
- 6/20/2017 New blog: https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript/blog/2017/0...
version 2.5 now available
Web AppBuilder for ArcGIS v2.5 Developer Edition Now Available! | ArcGIS Blog
Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
What's new in version 2.4—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
My other WAB related blog posts:
- NEW /blogs/myAlaskaGIS/2017/03/04/web-appbuilder-the-custom-widgets-list-332017
- NEW --> this blog /blogs/myAlaskaGIS/2017/02/13/web-appbuilder-tips-and-links-for-creating-modifying-and-modifying-cus...
- NEW /blogs/myAlaskaGIS/2016/04/04/web-appbuilder-developer-edition-help-and-training-links
- MAIN /blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list?sr=search... - updated often, recommend bookmarking this one for most current announcements, custom widgets, etc.
- /blogs/myAlaskaGIS/2015/01/15/tips-and-observations-for-getting-web-appbuilder-developer-edition-ins...
- /blogs/myAlaskaGIS/2015/02/04/tips-for-using-the-custom-locallayer-widget-with-wab-dev-edition
Table of Contents/Categories (sorry no hyperlinks):
Developer Edition Documentation Quick-links -- official Help docs -- those related to creating your own widgets.
Tips for getting started with creating, using, and modifying/customizing widgets
- Considerations when creating your own widgets
- Creating your own widgets
Mix-ins (configuration tweaks)
- ... the rest of this TOC are placeholders right now...info in other blogs....
Javascript and Web development
- Security and Proxies
Geoprocessing services (using ArcGIS Server to extend the task widget)
Arcpy/Python
- ArcScripts 2.0 (now called Codesharing) and GitHub
ESRI Training Geonet group and helpful links
Developer Edition Documentation Quick-links -- official Help docs for custom widgets:
- Developing and deploying custom widgets:
- API: CSS framework—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
- Samples: Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer...
- Creating a custom widget: Naming conventions—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
- Deploying: Deploy custom widget and theme—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
- Upgrade custom widgets and themes—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Develop...
- 3/16/2017 authentification on WAB developer edition tip from Derek for prompting AGOL login with WAB
- 3/16/2017 Is it possible to add a video to the 'Splash' widget?
- 3/16/2017 Remove blue circle from logo
- 8/2/2017 How to load separate Configs from a URL parameter for WAB Dev Edition
- 8/2/2017 Deploying a Webapp Builder server
- Upgrading, create/import, launching, etc.:
- Upgrade apps—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
- Create or import an app—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
- Edit and launch an app—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
- Deploy your app—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers
Tips for getting started with creating, using, and modifying/customizing widgets:
- 10/11/2017 new WAB video series
- ArcWatch | Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition
- 4/18/2017 new blog Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class | ArcGIS Blog
- Developing tips:
- Workflow tips from Robert Scheitlin, GISP 's for developing new widgets
When developing new custom widgets the widget/theme development work flow I use for all my work is this.
1. Copy the [install dir]\client\stemapp\widgets\samplewidgets\CustomWidgetTemplate folder to the stemapp widget folder and rename it to your custom widgets name.
2. Open the manifest.json and change the name property to the exact name of the widget folder from step one.
3. I now work on changing the icon and some basics of the widget.
4. Now I create a new app (normally the app will be named the same as my custom widgets name) and will see that my new custom widget is a choice in the widget choices.
5. Add my custom widget to the new app.
6. Now I do ALL my development in the [install dir]\server\apps\[app #]\widgets\my custom widget name folder.
7. Once I am done will my development I copy the widget folder back into the stemapp widgets folder so that new apps will use the completed widget code.
- Workflow tips from Robert Scheitlin, GISP 's for developing new widgets
11/27/2014 Blog post by Derek Law FYI: Web AppBuilder: Build your first widget in 15 minutes blog post
- Direct link to blog post Web AppBuilder: Build your first widget in 15 minutes | Esri Australia Technical Blog
- 2/17/2017 What process should I use to copy and rename an existing widget?
- Printing:
- 2/23/2017 Tips for customizing the print layout list WAB print widget
- Print Plus tool: Not able to retain map extent in the print out
Considerations when creating your own widgets:
- !! Important note re: Google Street View from Robert Scheitlin, GISP (8/29/201) (underline added)
All after much back and forth with different people and what now seems to be legitimate email traffic with the Google Maps API Team. It is now apparent that this widget does NOT conform to the Google Maps API Terms of Service. Due to this fact, this widget download will be removed and the live preview site will be un-accessible. It is my recommendation that all users of this widget immediately remove the widget from their WAB site and discontinue use of this widget. The only way it seems currently to be compliant with the TOS is to not have a (non-Google) map visible at all in the app which is of no use at all to us esri users. I find it hard to understand how the Worlds leader in GIS technology and Google can not come to terms on the use of StreetView panoramas with esri basemaps, but it is what it is. So after years of this widget being used by hundreds of users around the world we must say good-bye.
- Suggestion checking /blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list to see if one already exists
- If you plan to share/post on geonet, I would appreciate a @ tag so I can add to the list. Also suggest adding (and updating as needed) the posted/updated date in the title. My links will auto-update and it will make it easier for others to know there is an update.
Creating your own custom widgets....
- 4/19/2017 new blog Creating a Custom Widget for Web AppBuilder for ArcGIS using the Report Class | ArcGIS Blog
- 3/21/2017 updated buildScripts-2.3(2D).zip
- 11/27/2014 Blog post shared by Derek Law FYI: Web AppBuilder: Build your first widget in 15 minutes blog post Direct link to blog post Web AppBuilder: Build your first widget in 15 minutes | Esri Australia Technical Blog
- Patch for missing demo folder in WAB 1.0 demo config is missed patch for 1.0 release.
- Tutorial Create a custom in-panel widget—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developer...
- Discussion Creating Tabs in widget.html file
- Discussion Open widget at startup Help Open a widget at app start—Web AppBuilder for ArcGIS | ArcGIS
- NEW: Tip and download "a settings file to make the builder experience better" https://community.esri.com/docs/DOC-3841#comment-13384 (Stan McShinsky) http://mastermapper.com/webmaps/printplustest/setting.zip
- Tools to help with "scaffold" (i.e. framework attributes) when creating new widget ( Tom Wayson )
- Discussion (part of Robert's thread) comment
- GitHub Esri/generator-esri-appbuilder-js · GitHub ...new version Web AppBuilder Widget Generator - v2.0 Released!
- Tips for Creating a Headless widget (it is invisible and it is loaded at startup.)
- Anvil Widget Version 1.1 (Larry Stout)
- Anvil Map Tips Widget Version
- Notepad++ script to help convert flex widgets to JS https://community.esri.com/message/461647?#461647 (Barnaby Rockwell)
- a tip/tool by Tim W to help determine the basemap/extent you may want to use Start your Javascript App right!
- TIP: 7/17/2017 enhanced bookmark widget - load bookmarks from saved json
- TIP: 7/17/2017 How can I tell what WAB Dev Version my app is from?
Mix-ins (configuration tweaks)
- Mix-In shows widget/version/etc info when a users uses Alt- key and clicks on widget header
- Discussion: _WidgetMetadataMixin Version 1.1.x
- Live Preview: ArcGIS Web Application
- Download: ftp://ftp.hamiltoncounty.in.gov/GIS/AWAB/_WidgetMetadataMixin-1.1.1-2005-4-11.zip
- Mix-in puts a new icon on the widget header. Clicking the icon opens a tooltip dialog with a slider that controls the opacity of the widget.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
About the Author
Worked with GIS for 30+ years for the Alaska Dept of Fish and Game.