Kevin's Custom WAB Widgets

Anonymous User · ‎01-10-2017

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.

AndresCastillo · ‎03-13-2018

A

I did not know that I could add the widget to my local machine stemapp folder, so that it can be added to the add that way, and then it reflect in the server's WAB DE.

Doing this is simple enough, so I will try it.

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"

Why does your widget config.json look much longer than the one I see?

The config.json file I see in this widget says

'

{
"configText": "http://sagiscloud.thempc.org/arcgis/rest/services/sagis_org/SAGIS1/MapServer",
"configText2": 1

}

Plus, I notice there are several 'config.json' files located in different places of WAB DE.

Why is that?

C

How can I add more than one map server/feature server/AGOL hosted feature to the same widget?

My web map has a mix of different layers hosted on different service URI's from my organization's ArcGIS server, as well as different layer URI's hosted from AGOL.

I've tried modifying 'Enhanced Query/Widget.js', 'Enhanced Query/config.json', 'Enhanced Query/setting/Setting.html', and 'Enhanced Query/setting/Setting.js' to reference more 'configText' as shown in the attachments, but this does not seem to work.

Also, can you recommend cleaner code, such as how to structure a loop to get all the services I need in there?

Anonymous User · ‎03-13-2018

All good questions. I missed the WAB class at dev conf unfortunately, out of necessity for learning about all things related to speeding up services and viewers. Noted farther up, it uses only one service. However, here is an easy near-term fix -- you could just multiple instances of the widget. Similar to how we have all gotten around Esri's lack of Groups for layers in webmaps, by using multiple layer list widgets. You can have more than one copy of a widget. Just call it eQuery2, eQuery3 etc etc. Give them different icons perhaps, connoting what they each are for. Perhaps longterm it will have support for this. I have to upgrade our system to 10.5 along with a lot of other things the next month.

Regarding config.json and what they are for, they're for storing Settings. for further info see the Custom widget Docs in the Help.

AndresCastillo · ‎03-13-2018

I copied your custom widget to stemapp/widget just once, and then from within the app, I attempted to add the widget more than once for different map servers, but it only worked for the first map server.

Do you recommend I instead copy your custom widget to stemapp/widgets more than once, rename from there, and then add the different eQuery widgets within the app?

Anonymous User · ‎03-13-2018

and you set the URL for each specific service? Can you post your app? I'll take a look.

AndresCastillo · ‎03-14-2018

This is not the app I was working on, but displays the same behavior regarding the enhanced query widget.

I setup two eQuery widgets there.

I noticed that if the app is launched, clicking the first query will work.

But, clicking the second query returns the error message.

If I close and relaunch the app, then click the second query, it will work.

But, then clicking the first query returns the error message.

Anonymous User · ‎03-21-2018

Hi Andres, can you set up a test site and url to take a look at?

AndresCastillo · ‎03-23-2018

Here it is:

http://gis.wpb.org/COP_Test/

This test app was configured for three services, including a related table service url.

Do related tables work with this query widget?

Anonymous User · ‎12-12-2019

No it appears not, and so I will be phasing this widget out in favor of the built in query widget. I hope to leverage out of the box widgets as support for related tables increases. Another option though is you could relate them on the backend in SQL Server so they 'behave' like regular layers to the Esri stack. I have had better success using SQL directly as it has superior performance.

KipoKipo · ‎02-18-2020

Very interesting demo app. Could you share how you config the relate tables in the app? Good job with the three levels of relate tables. Thanks!

Anonymous User · ‎05-22-2020

Kipo Kipo We create SQL relates, so that layers 'look' and act like a regular feature class. We have found that native SQL has the fastest performance as well.