Kevin's Custom WAB Widgets

[Anonymous User]

Hi All, here are some custom Esri Web App Builder widgets I have created. They each have their own thread, like Robert's.

I also put together a package that assembles all of these widgets and many various other Web App Builder tweaks in to one downloadable repo. It is based on a recent project, our county property viewer www.sagis.org/map 

This is the entire project with all widgets and extensive customizations, all of which are documented in the Read Me.

https://github.com/kevinsagis/CustomizedWebApp_DeveloperEdition212 

Note, if you increase the API Version in env.js that may fix the popup highlight bug (thread link) where the shape is warped due to quantization.  I had to do that for 2.12. I will be uploading an updated guide to customization soon.

Here is a link to the Help Document and YouTube Videos for this Property Viewer: 

Original Word document to edit: https://www.sagis.org/wwwSAGISorg_help.docx  

Compressed PDF: https://www.sagis.org/map/wwwSAGISorg_help2.pdf 

Original PDF:  https://www.sagis.org/wwwSAGISorg_helpUncompressed.pdf 

I cover the standard out-of-the-box widgets, as well as the custom widgets.

Hopefully this can be helpful and useful here to everyone that uses WAB, and needs to write a Read Me.

Feel free to copy out of this document for your own use if you like!  I put a good amount of work in to the Word document so it should hopefully be a good starting point. 

There are Help documents for both Foldable and Launchpad themes here:  

https://github.com/kevinsagis/CustomizedWebApp_DeveloperEdition212/tree/master/WebAppBuilderForArcGI... 

Google Earth Widget  (WAB 2.12) (Updated Dec 2019)

GitHub - kevinsagis/GoogleEarth: Google Earth Widget  

Demo link: Google Earth Widget Demo  

Thread: Google Earth Widget 

Update 2020  -   Google Earth now works in all browsers!

Enhanced Layer List - Metadata Dialogs   (WAB 2.4 - 2.12) (Updated July 2019)

Thread:  Enhanced Layer List - Metadata (7/17/17) 

GitHub Download:  GitHub - kevinsagis/EnhancedLayerList  

Demo Site:  Enhanced Layer List - Demo Site - Metadata Dialogs 

Update: adds REST Link and 'No Information Available' features.

Tested and working up to WebApp Builder 2.12

-----------

Below are older widgets WAB 1.x from the blog. If denoted, they work in 2.x-2.12.  If denoted '??' I have not tested in 2.x yet.

-----------

Pictometry  (WAB 1.x -  2.4 - 2.12)

GeoNet Thread: Pictometry Widget (5/29/19) 

Demo link ArcGIS Web Application

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

Archived Discussion: Pictometry and Streetview

Tested and working up to WebApp Builder 2.6

Streetview  (WAB 1.x -  2.12)

REMOVED

 Screenshot

Works in WAB 1.x.  Untested in 2.x.

Thread:  Screenshot Widget 

 Screenshot widget at kevinsagis/ScreenshotDemo · GitHub

Widget demo at:  ArcGIS Web Application

"Alternate Version" 1.0:   This is what I ended up deploying after issues noted in this widget's thread:

An About Widget with text instructing users to leverage the screenshot.

 ArcGIS Web Application  Git: kevinsagis/ScreenshotAlternateVers · GitHub 

Enhanced Query selection widget

 Status: Enhanced Query 1.0 Alpha 1 works and tested in WAB 1.2 and 2.4-2.12. 

 Works with one service at a time. To use, create the query, click Add to Query, then 'Search'.

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

Demo: https://cloud.sagis.org/eQueryB1

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

Credit to Robert Scheitlin for advice and code collaboration.

[KenBuja]

The Github Hub link to the Enhanced Layer List widget is broken.

[RebeccaStrauch__GISP]

try GitHub - kevinsagis/EnhancedLayerList: Enhanced Layer List adds metadata Dojo dialogs to display the... 

but yes, it is broken for me too.

all kmsagis   are kevinsagis / Repositories · GitHub 

(not trying to steal your thunder by responding Kevin.  Thanks for all the widgets!)

[KenBuja]

It was to let Kevin know to fix it in the first message. I was able to find it by going back to his Github account.

[Anonymous User]

eLayerList Git link corrected.  (Thanks Rebecca Strauch, GISP & kenbuja)  FYI also our REST service for that demo site also was on a server that is being upgraded throughout this week. I've repointed to another layer temporarily and the demo is back up.

Interesting observation - I didn't realize my eLayerList metadata boxes would render inline html. If you have a <img> picture in your mxd Description it will render! Like in the demo link. So, that's neat.  The EPA's actual site is down (problem on their server, not GIS-related) but the image works in the demo.   I just grabbed the a random layer with a Description field form ArcGIS Online for the demo site's purposes as a temporary layer and made this observation.  (It will be re-pathed to our coastal phsyiographic layer in the longterm).  But I like how the EPA has an actual image that says METADATA.  Could also have a corporate logo or something. Good to know!

[NicholasArjona]

Love the widgets Kevin, thanks for sharing.

I did see that the Read Me for the Enhanced Query widget mentions that the "next step" so to speak is to allow the user to query multiple map/feature services, is this coming down the pipe?

[Anonymous User]

Perhaps if Esri does not add it to the Attribute Table's 'Filter'. As outlined above, for multiple layers to filter against each other by either attribute or geometry. I'll talk to them at the Dev Conf next week. 

[AndresCastillo]

1

How do I install the 'enhanced query selection widget'? since there is no zip file here, nor in the GitHub links.

2

Which is more relevant, this widget, or the one mentioned if you click on this link

3

How do you get in touch with someone that's on GitHub if you have a question?

[Anonymous User]

Hi https://community.esri.com/migrated-users/216469 ,

1) install the widget in to your stemapp folder in WebAppBuilderForArcGIS\client\stemapp\widgets to make it available to add to all widgets. Optionally, you could just install it manually by adding to your specific app's widget folder and its config.json. First option is usually recommended.  Instructions are here ArcWatch | Add Custom Widgets to Web AppBuilder for ArcGIS Developer Edition  and in the Web App Builder documentation.

2) This one  

3) Message me or post here.  Any questions, I'll see if I can help.  

[AndresCastillo]

Kevin, thank you for your reply.

A

In my organization, WAB Developer Edition (DE) is installed in a server that I do not have the permissions/access to move the custom widget to the stemapp/widgets folder.

There is no need for me to download WAB DE to my local machine because even if I did move the custom widget to the stemapp/widgets folder, it would not reflect in my organization's WAB stemapp/widgets folder.

I login to my organization's WAB DE using the uri, along with my personal AGOL credentials:

We also have a 'headless' account, which is the AGOL admin for my organization.

The headless account is the owner of all our content, as well as houses the latest and greatest web apps.

It is this headless account that the WAB DE was registered as an item on AGOL with.

I would either: 

1

Let my server admin know the location of the widget in our network, so he could move the custom widget to the appropriate folder,

Or:

2

Have my server admin download a copy for me of the app from the headless account so that I can test/configure the app.

Once configured to my liking, I can then send my copy to my server admin so he could QC and replace the old app with my copy.

That said, I would like to test the widget before I send to my server admin by adding it directly to the app I want to use it in.

Can you expand on how to add the widget to an app?

Once I see that this will work on the one app the way we want it to, I will then proceed with option 1 to make it available to all our apps.

B

Regarding your post on Dec 14, 2017, you said:

"Did you add to your config? In mine I call it Enhanced Query and put it in a folder titled as that.

https://raw.githubusercontent.com/kevinsagis/EnhancedQuery/master/eQuery/config.json"

What do I do with this?

[Anonymous User]

Andres Castillo‌ quite understandable you need a test version! Well, probably the most simple wayi would be to create a second copy of the app, put the widget in /Widgets folder, and modify config.json to enable it. (Read API docs on the config.json file for details).  I guess you can have your sys admin make a clone of the production site, drop the widget in, point it to the service you will be using, and then test it. Optionally, you could test it locally on your machine in WAB Dev Edition. Is there a reason you don't want to have WAB Dev Edition on your local machine? It's very useful to have a local copy of the Builder for things like this and I'd recommend it. I'd recommend also putting any custom widgets you often use, like mine or Robert's, in to the stemapp Widgets folder, so you can always just add them to a new app with the WAB user interface, vs manually tweaking config.json.