topic Re: Kevin's Custom WAB Widgets in Web AppBuilder Custom Widgets Questions

Kevin's Custom WAB Widgets

Anonymous User — Tue, 10 Jan 2017 21:08:09 GMT

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/WebAppBuilderForArcGIS

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.

Re: Kevin's Custom WAB Widgets

BabatopeAdebajo — Wed, 11 Jan 2017 10:21:51 GMT

Nice work with the Metadata Dialog....... Very useful, have not had the opportunity to have a go at it via my webapps but would soon and give you feedbacks.

Baba

Re: Kevin's Custom WAB Widgets

CCWeedcontrol — Tue, 14 Feb 2017 17:52:15 GMT

I currently updated to WAB 2.3, i will keep an eye out for the new updates for 2.3. They look awesome!

How do you add these to WAB to actually show up?

Re: Kevin's Custom WAB Widgets

CCWeedcontrol — Thu, 16 Feb 2017 23:32:01 GMT

Do i am the eQuery folder to client\stemapp\widgets directory and add a reference to the widget in the standard Default App configuration located at \client\stemapp\predefined-apps\default\config.json, under the widgetOnScreen section?

I am on WAB Dev 2.3.

{
        "uri": "widgets/eQuery/Widget",
        "visible": false
    },

Re: Kevin's Custom WAB Widgets

KipoKipo — Wed, 06 Sep 2017 22:29:55 GMT

I probably have the same question as CC Weedcontrol here. Just couldn't get the WAB recognize the widget. I simply coped the whole downloaded folder to stemapp\widgets and restarted WAB, but it never shows up as a valid widget. I tried both 1.3 and 2.5 versions. Did I miss anything here or this widget is simply not compatible with these versions.

Thanks!

Re: Kevin's Custom WAB Widgets

AliBarakat — Thu, 14 Sep 2017 13:10:26 GMT

im facing the same issue as kipokipo‌

i copied the folder for the enhanced query but nothing is showing

am i missing anything?

Re: Kevin's Custom WAB Widgets

KenBuja — Wed, 06 Dec 2017 14:05:25 GMT

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

Re: Kevin's Custom WAB Widgets

RebeccaStrauch__GISP — Wed, 06 Dec 2017 15:26:10 GMT

try GitHub - kevinsagis/EnhancedLayerList: Enhanced Layer List adds metadata Dojo dialogs to display the Description and Cop…

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!)

Re: Kevin's Custom WAB Widgets

KenBuja — Wed, 06 Dec 2017 15:55:05 GMT

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.

Re: Kevin's Custom WAB Widgets

Anonymous User — Wed, 06 Dec 2017 18:26:44 GMT

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!

Re: Kevin's Custom WAB Widgets

Anonymous User — Tue, 22 Jun 2021 08:01:35 GMT

Ali Kipo ‌ https://community.esri.com/migrated-users/40673

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

Re: Kevin's Custom WAB Widgets

CCWeedcontrol — Thu, 15 Feb 2018 19:57:46 GMT

I was able to get the widget to show up.

I was able to change the layer in widgets\Ehanced Query\config.json to just one feature server.

How do i add more layers to the "Select a map layer field to search". My may and layers are ArcGIS Online.

Thanks.

Re: Kevin's Custom WAB Widgets

Anonymous User — Mon, 19 Feb 2018 15:05:52 GMT

The Enhanced Query widget searches only one layer at a time. Now, Esri's 'Filter' built in to the Attribute Table is at least as useful. I do wish they'd expose it more to end users and make it in to its own widget, similar to mine. But there's not much it can do my eQuery can't. Is there a particular feature you need that Attribute Table's Filter does not do?

(It would be neat if you could build your own filters stacking multiple layer conditions, like the "Search by Spatial" in Robert's eSearch. And in fact if you could combine not only spatial but attribute filters between layers. I will suggest it to Esri at Dev Conf)

Re: Kevin's Custom WAB Widgets

NicholasArjona — Wed, 28 Feb 2018 14:00:52 GMT

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?

Re: Kevin's Custom WAB Widgets

Anonymous User — Thu, 01 Mar 2018 14:00:09 GMT

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.

Re: Kevin's Custom WAB Widgets

CCWeedcontrol — Wed, 07 Mar 2018 16:01:07 GMT

I do see that the Enhanced Query widget is only able to query one layer at a time but in your demo web app in the "Select a map layer field to search:" you have about 30 layers to select from. I am currently only able to just have one. How do you add more layers to the Select a map layer field to search: drop down.

Re: Kevin's Custom WAB Widgets

AndresCastillo — Thu, 08 Mar 2018 21:31:59 GMT

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

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

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

Re: Kevin's Custom WAB Widgets

Anonymous User — Tue, 22 Jun 2021 08:01:40 GMT

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.

Re: Kevin's Custom WAB Widgets

AndresCastillo — Mon, 12 Mar 2018 16:22:54 GMT

Kevin, thank you for your reply.

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:

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:

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.

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?

Re: Kevin's Custom WAB Widgets

Anonymous User — Mon, 12 Mar 2018 17:40:02 GMT

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.