Extend your Apps with Custom Widgets in Web AppBuilder

Cloudpoint has successfully upgraded a number of Flex mapping applications to Javascript applications in the past year using Web AppBuilder (WAB). Some of the components that make these apps stand out are widgets that improve the user experience with the app. . Esri packages a number of basic widgets in WAB, but some developers have designed custom widgets that extend the functionality of these applications. A number of these custom widgets were available in the Flex apps and we wanted to honor our client's wishes to provide the same tools and functionality after the upgrade. Here we highlight a few of the custom widgets we configured for our clients.

1. Enhanced Search

This is one of many custom widgets developed by Robert Scheitlin, GIS Manager for Calhoun County in Alabama. The Enhanced Search widget provides the ability to perform a search on a layer, and then performs an additional geometric or spatial search based on the original search string. An example is shown below; in the "By Value" tab of the widget, a parcel ID or address is searched. Switching to the "By Spatial" tab, apply a search distance for a buffer, choose the search layer, and choose the spatial operation for returning results (entirely contained in, intersected by).

This image shows the application of a 100' buffer on searched parcel using the Enhanced Search widget, and the resulting spatial search of parcels that intersect the buffer.

2. Identify

The Identify widget is another useful offering from Scheitlin. Rather than using the pop-up window from the webmap, you can use this widget to access a feature's attributes, identify multiple features using geometric operations, and even access an external link associated with that feature.

The parcels in this block were identified as a group with the polygon select operation. The "Results" panel shows information about the identified features as well as external links (shown here as the yellow symbols) that are associated with those features.

3. Google Street View

Panoramic, street-level views are available to your app with the Google Street View widget. The only requirement is obtaining an API Key or Client ID from Google.

Dragging the "Street View Man" icon to a location on your map will activate a Street View popup window that has panoramic, street-level views of the location (where available).

4. Print Plus

The Print Plus widget was developed by Larry Stout, based on Esri's Print widget. The main features of this widget are an on-screen print area layout, the ability to pan the map inside the layout, and a scale slider.  

The Print Plus widget features an on-screen print layout as well as the ability to pan the map within the layout.