Kevin's Custom WAB Widgets

Blog Post created by kmsagis on Jun 9, 2015

This is a list of my custom widgets for the ESRI WebApp Builder.


    1. Pictometry

A widget that opens a link in a new window displaying your Pictometry at a location the user clicks on the map. It passes XY and authentication and works with internal ("EFS") viewers and the Pictometry Connect cloud site. In other words you can embed credentials.

Status: 1.2 beta 1, (Works in WAB 1.1-1.3)  See Read Me.  What's new in V 1.2 (July 9, 2015): works for sites in any projection (i.e. state plane etc)


Demo link ArcGIS Web Application

GitHub link to code:  kevinsagis/Pictometry-for-WebApp-Builder · GitHub

Discussion: Pictometry and Streetview


    2. Streetview

This was created mostly as a proof-of-concept while I was working on Pictometry. For a much better Streetview see either Robert Scheitlin or Stan McShinsky's widgets. However this could be a useful example since it's so simple, for people just starting on widget development.

Status: 1.0 beta 1



    3.  Screenshot

This widget is designed to take a screenshot of the entire viewport of the WebApp window. Widgets and all. It then prompts the user to open or save it as an image file. Note: this wdget requires PHP.


Screenshot widget at kevinsagis/ScreenshotDemo · GitHub

Widget demo at:  ArcGIS Web Application


Why is Screenshot useful? Maybe your users want to see "exactly what you are seeing" which was my user request. This is powered by html2canvas, canvas to blob, and filesaver.js, Credits in documentation.

Status: 1.0 b 1 --   Screenshot works now, as in this link. Note sometimes minor graphical oddities like the button's CSS but these limitations are well explained by the html2canvas author Niklas. Also, minor caveat, at small-scale levels, i.e. zoomed out farther than 20,000, sometimes esri basemap tiles will not load. this appears to be a caveat with html2canvas and sporadic. Report results back. For our purposes this widget now works great!  I may turn it into a 'feedback' widget in the future.


I am using this proxy:  brcontainer/html2canvas-php-proxy · GitHub

Note as this uses PHP. There are also Python and ASP.NET proxies. These do not work inside WebApp Builder! WebApp Builder runs on node.js.  PHP will run inside node.js but only after you install some other libraries.  The simple solution I elected to follow is to put this widget into your application after Downloading it out of WebApp Builder, and tweak it after downloading, if desired.\


Screenshot "Alternate Version" 1.0:  If you need a true screenshot, use this: ArcGIS Web Application  Git: kevinsagis/ScreenshotAlternateVers · GitHub   it is just About with text instructing users to leverage the screenshot capability built in to the operating system (Windows).  For Mac, you'd add the text to press "Command (⌘)-Shift-3".  This is probably a better method anyway if you need a true screenshot. Javascript can never really do a true screenshot, by design, for security.  The Screenshot 1.0 original version just copies the DOM to a new canvas object, then other code pipes it to a Save As.   This 'alternate' widget has users leverage the screenshot Windows / MacOS provide.  You can edit the text easily in this because it is actually just the About widget.




    4. Selection widget: Enhanced Query

What does it do?  I will be reproducing the functionality of this widget:  Selection Widget Updated Version


Enhanced Query 1.0 Alpha 1.    Works in WAB 2.9.



It fully works, though with one service at a time. This is a 'alpha' release. To use, create the query, click Add to Query, then 'Search'.


GitHub: EnhancedQuery/eQuery/widgets/Enhanced Query at master · kevinsagis/EnhancedQuery · GitHub


(The first widget on the left is the "Enhanced Query" widget.  My Pictometry widget is also in here.)



EnhancedQuery/readme.html at master · kevinsagis/EnhancedQuery · GitHub


Thanks and credit also go to Robert Scheitlin who gave advice and contributed substantially. He recommended adding ability to consume multiple services for a 1.0 release.  However, the Filter component of the WAB Attribute Table accomplishes much the same task and therefore will this widget will not be updated.





Kevin MacLeod - Savannah Area Geographic Information System - Savannah - Chatham County, Georgia