Zoom Prev Next Widget Version 1.1.1 May 13, 2015

[#1]

2/18/2017 - updated download link

This is a completely new and very small widget.  It uses the Zoom Previous and Zoom Next functionality of the Esri Navigation toolbar.

Live Preview Site

Changes in Version 1.1.1

1. Added documentation for putting this widget into the WAB so it can be configured into an app.
2. Added a setting folder (that explains there is no configuration).
3. Added an icon in the setting folder.

Download:

ZoomPrevNext-1.1.1-2015-5-13.zip

https://community.esri.com/docs/DOC-9627-zoomprevnext-111-2015-5-13zip 

Larrys Custom WAB Widgets and More

[NicholasBarger]

Hi Larry,

Do you have any additional installation instructions for this other than the info in the docs folder.  I placed the widget folder in the standard location but it hangs up my WAB and never completely loads the page.

Have you used this widget with the Local Layer widget?

[LarryStout]

Nicholas,

I have not tested this with the Local Layer Widget, but I don't see any potential conflict unless the Local Layer Widget also uses the Navigation toolbar.

Are you using WAB Developer Edition or just copying it into an app made with WAB Developer Edition?  I wrote it and tested it from the Developer Edition apps/xxx folder.

Larry

[NicholasBarger]

Hi Larry,

I’m using WAB Developers Edition.

I placed the widget folder (ZoomPrevNext) in the WAB/client/stemapp/widgets folder. I created a new app but the widget never transferred over to that app. So I manually copied it to my app… WAB/server/apps/xxx/widgets.

The next thing I did is copy the code in the docs folder as it appeared into the main config.json file. I placed the code at the end of the widgetOnScreen section. I made sure I placed a comma after the last widget and removed the comma from your cade as it was the last widget… see below.

I would send a link but I am unable to download the app after adding the code. It seems to make WAB act very strange. I end up having to use back buttons and refresh the page manually.

{

"uri": "widgets/TimeSlider/Widget",

"visible": false,

"position": {

"bottom": 55,

"left": 7

},

"version": "1.2"

},

{

"uri": "widgets/Swipe/Widget",

"visible": false,

"position": {

"top": 145,

"left": 7

},

"version": "1.2"

},

{

"uri": "widgets/ZoomPrevNext/Widget",

"position": {

"left": 7,

"top": 70

},

"version": "1.1.0",

"id": "widgets/ZoomPrevNext/Widget_119",

"name": "ZoomPrevNext",

"label": "Zoom Prev Next",

"positionRelativeTo": "map

}

]

},

"map": {

"3D": false,

"2D": true,

"position": {

"left": 0,

"top": 40,

"right": 0,

"bottom": 0

},

~ Nick

[NicholasBarger]

I also get a lot of these in my controller window after adding the code…

The error is in esri.css:1:xxxxxx

window.controllers is deprecated. Do not use it for UA detection. ace.js:1:0

Unknown property '-moz-box-shadow'. Declaration dropped. esri.css:1:50391

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:50897

Unknown property '-moz-box-shadow'. Declaration dropped. esri.css:1:52978

Unknown property 'user-select'. Declaration dropped. esri.css:1:54195

Unknown property '-moz-border-radius'. Declaration dropped. esri.css:1:54263

Expected color but found 'none'. Error in parsing value for 'border-color'. Declaration dropped. esri.css:1:55539

Unknown property 'speak'. Declaration dropped. esri.css:1:60159

Unknown property '-moz-osx-font-smoothing'. Declaration dropped. esri.css:1:60369

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:60597

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:61182

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:61767

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:62352

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:62812

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:63141

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:63472

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:63755

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:64040

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:64333

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:64618

Expected declaration but found '*'. Skipped to next declaration. esri.css:1:64943

Expected 'none', URL, or filter function but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. esri.css:1:70090

Unknown property '-moz-box-shadow'. Declaration dropped. esri.css:1:78773

Unknown property '-moz-border-radius'. Declaration dropped. esri.css:1:78976

Unknown property '-moz-border-radius'. Declaration dropped.

~ Nick

[LarryStout]

Sorry, Nick. I’m at a conference and may not get back to you on this until Thursday or Friday.

Larry

[NicholasBarger]

No problem

~ Nick

[NickHarvey]

Awesome thanks Larry - I was able to get this working after downloading a template app and deploying it in my inetpub (localhost) folder...After a few attempts I couldn't get it working from the client\stemapp folder though (so that it shows up for use in creating a template). Use the same code for the client\stemapp\config.json?....

-Nick

[LarryStout]

Nick Harvey​ and Nicholas Barger​:

I have figured out how to add this widget to the WAB so it can be included in an app you are building.  To do this, I have added a setting folder (thanks again, Stan McShinsky​) that includes an icon and displays "No additional configuration."  I also refreshed my memory about the files in the stemapp that need to be edited to include a new widget.  Details in the expanded documentation.

Keep in mind that this widget should probably be between the Zoom In/Zoom Out widget and the HomeButton Widget, so you'll have to adjust the "top" coordinate for the other on screen, no panel widgets (e.g. Home, MyLocation, Swipe, etc. in the client\stemapp\predefined-apps\default\config.json file and/or the server/apps/xxx/config.json file.

Larry

[LarryStout]

Nick,

I have posted a new version that will allow you to drop the widget into the client side of WAB.  The console errors above don't look like they are related to this widget.  Can you put up a web site I can look at or at least tell me what browser and version you see them in?

Larry

[NicholasBarger]

Hi Larry,

I got the updated version to work correctly. After adding it to the stemapp I found that I may have been adding the code to the incorrect part of the widgetOnScreen section. I was trying to add it after the Header Control widget just past the Home and Location button. This failed every time. With this version of the widget I added it above the HeaderControlwidget and everything worked. Not sure if that was actually the problem or not…but all is good now.

Thanks,

~ Nick

[NicholasBarger]

Hi Larry,

One thing I noticed is that my WAB dropped the Widget when I downloaded / compiled it.  The ZoomPrevNext was removed from the Widgets folder as was the Code in the main Config.json.  I'm not sure how it would react to a new app... I only tested with existing apps.

Regardless, I got the code added correctly to the compiled applications.

Thanks again for the help!

[CCWeedcontrol]

Larry, nice widget.

In your preview site I like the way parcel is highlighted when you move your mouse arrow over it and how it show's a few attributes fields and if you click on the parcel for more info you get the popup. I like the way how each attribute has a box around the attribute makes it easy to read. I would really like to see these awesome features in an add on to Web Appbuilder.

Fantastic work!

[LarryStout]

Thanks Nick.  I'm learning I need to pay more attention to the WAB part of the application.  I write my widgets in a simple project that I made in the WAB, and dropping the widgets into the WAB is something I never used to test.  I'm learning and I really value the feedback I get!

One trick I've learned is to never add files to the client side of the WAB when node.js is running.  This may be poor workflow, but it has never caused a problem for me.

Larry

[LarryStout]

2CDSD 2C​,

Thanks for the kind words.  All it takes is time, and I do have a day job.  Most of the functionality you mentioned is in a "headless" widget I call Acme.  It adds functionality to the WAB app without editing any of its code.  Acme also provides support for several of my other widgets such as WelWhatDisHelpAbout (welcome, what's new, what's missing, disclaimer, help about), ResetLayers, UserPreferences, and Share.  My plan is to document the configuration of the Acme Widget with each specific widget or function it adds separately so people can implement only the parts they want.

Larry

[NicholasBarger]

Thanks...really appreciate the contributions

Sent from my Verizon Wireless 4G LTE DROID

[AndrewWallick2]

Larry,

Do you know if this widget works with Web AppBuilder version 1.2? I've tried following your instructions in the readme file, but it's not showing up.

[LarryStout]

I am not aware of a Web AppBuilder Version 1.2.  What Esri calls Version 1.1 shows its version as 1.2.  Is that the version you are asking about?

Larry

[AndrewWallick2]

Yes I think that's what it is. The widgets in the config.json file in the default folder all say version 1.2.

I've retried it all now, and I still can't get your widget to show up. there are no errors in the console (firefox or node.js), and I inspected element just to see if somehow the home button was covering it up, and it's not in the html for the page. Any ideas what might be the problem?

[LarryStout]

Is your app on a public site that I can look at?  If not, can I see your main config.json file?

[AndrewWallick2]

No, it's not hosted publicly yet, but here's the link to the config.json in the stemapp folder: http://codeshare.io/f3blr

This one is client\stemapp\predefined-apps\default\config.json: codeshare.io/AHIax

Just to be clear, I'm trying to put your zoom widget in the Web AppBuilder, if possible.

[LarryStout]

Andrew,

1. Make sure you have the ZoomPrevNext entry in the client\stemapp\widgets\list.json file.

2. When you create a new app in WAB, it copies files from the stemapp folder to server\apps\<app #> folder.  Therefore, the widget won't be available in any apps you have already created; it will only be available in apps you create after you have added it to the stemapp folder and both the stemapp\widgets\list.json and the stemapp\predefined-apps\default\config.json files.

3. If you want to add it to an app you have already created, all you need to do is add it to the server\apps\<app #>\config.json file.

4. in all cases, you will need to adjust the

	"position": {
	"top": 215,

value of all the widgets in the stack (e.g. Home, MyLocation, etc.) to put the widget into the order you want it.

Larry

[SamH]

Hi Larry,

I am very intrigued with the idea of adding the functionality where the parcel is highlighted when I hover my mouse over it. Could you possibly explain to me how i could set it up in AWAB ?

Thanks in advance

S

[CarlosPiccirillo]

Larry,

Great widget! I've been using your widget on several web apps since WAB 1.1. Just upgraded to 1.3 and my web app development team have decided to switch the theme of our apps to the new Launch Pad theme. Unfortunately when I did that, the widget disappeared. I manually put it back in but when I do that, the widget does not change shape from the square to the circle like the standard widgets (home, etc.) do. Also, the widget appears almost transparent instead of being bright white. Do you plan on updating the widget to work with Launch Pad theme at some point?

Thanks,

Carlos

[MegPeterson]

Is it possible to update this for version 2.1 (foldable theme)? It's exactly what I need!

Many thanks, Meg

[EricMcAvoy]

Hi Larry,

This widget looks like exactly what we need, but it seems the link to the download for this widget is broken. Could you please provide an alternative source?

Thanks, Eric