topic Re: NavToobar Deactivate in WAB question in ArcGIS Web AppBuilder Questions

NavToobar Deactivate in WAB question

StephenSchmidt2 — Thu, 12 Nov 2015 17:47:30 GMT

Hi All!

I have a quick question about deactivating the navtoolbar (navToolbar.deactivate();) on a panel close in webapp builder. I can seem to tweak the attached widget to work. The functionality is all there, but it stays live when I exit out of the widget. I've looked at how the draw widget deactivates with no luck. Any suggestions would be greatly appreacited!!

Best as always,

Stephen

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Thu, 12 Nov 2015 19:47:12 GMT

Stephen,

You have some very confusing code in your widget.

You have var navToolbar = new Navigation(this.map); three times in your code (line 82, 94, and 106) ???
When you use var navToolbar inside the startup function, that make navToolbar as private variable to the scope of the startup function and your onClose function can not access it using this.navToolbar.
Why are you doing all the domConstruct stuff in the startup function and not just putting all the html element you need in the Widget.html?

If you want to have a global var called navToolbar then you add a line like this right after name: 'sNavigation',

navToolbar: null, then in your startup function you do:

this.navToolbar = new Navigation(this.map);

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Thu, 12 Nov 2015 20:08:45 GMT

Hi Robert!

Thank you for the reply! I apologize for the messy code.

I should have used a global variable for navToolbar all along. I played around with: navToolbar = new Navigation(this.map) but since it was working, I wasn't to keen on tweaking too much yet.

Thanks for the tip about moving the domConstruct stuff over to the widget.html. I'll most definitely do that.

Thank you as well for the info about narToolbar being a private variable. I'm showing how new I am to this! It make sense now why the onClose function can't see navToolbar.deactivate(). I'll use your suggestions and see what happens!

Thanks again,

Stephen

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Fri, 13 Nov 2015 16:44:34 GMT

Stephen,

If this answered you question then don't forget to mark this thread as answered. To do this you have to open the thread (you can not see the correct answer link from inside your inbox) and then you will see the green star with correct answer link. Just click that link on the thread that answered your question.

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Fri, 13 Nov 2015 18:06:32 GMT

Thanks Robert! I now see how weird my code was working. So, I'm breaking out the domConstruct stuff over to the widget.html now. After that, I'll try to determine the pointer to the button DOM to run the original navtoolbar. As soon as it's running, I'll make sure to mark the question as answered. If it's OK, I'd like to keep it open for a bit, just in case.

Thanks!

Stephen

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Sat, 14 Nov 2015 19:36:27 GMT

Stephen,

When working with templated widget like in WAB the Widget.html contains all your dom elements written in standard html and you can access then using the dojo-data-attach-point property name given to that dojo/html element.

I.e. <div data-dojo-attach-point="tabSearch"></div>

So in your Widget.js you would use this.tabSearch to access that div element.

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Tue, 17 Nov 2015 20:25:34 GMT

Thank you Robert. That makes sense to me! I recreated the zoomIn button in the widget.html with data-dojo-attach-point="zoomIn". Looks good! Now I'm focusing on just the zoom in part first. I'm trying to rework the original navtoolbar code to work with webapp builder.

Original

          navToolbar = new Navigation(map);
          on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

          registry.byId("zoomin").on("click", function () {
            navToolbar.activate(Navigation.ZOOM_IN);
          });

Reworked

        navToolbar = newNavigation(map);

        on(this.zoomIn, 'click', function(evt){
        navToolbar.activate(Navigation.ZOOM_IN);
       });

No error when I run the widget, but it definitely is not right!

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Tue, 17 Nov 2015 20:35:55 GMT

Here's some small tweaks, but still not there.

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Tue, 17 Nov 2015 20:36:59 GMT

Stephen,

I would have thought that you would have seen an error in the web console saying that "map" is undefined.

try:

navToolbar = new Navigation(this.map);

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Mon, 23 Nov 2015 21:43:33 GMT

Hi Robert,

Here's where I'm currently at in JavaScript:

define([

'dojo/_base/declare',

'dojo/_base/lang',

'jimu/BaseWidget',

'dojo/on',

'dijit/registry',

'esri/toolbars/navigation'

function(declare, lang, BaseWidget, Navigation, registry) {

var clazz = declare([BaseWidget], {

name: 'sNavigation',

navToolbar: null,

startup: function() {

this.navToolbar = new Navigation(this.map);

registry.byId("zoomIn").on("click", function () {

navToolbar.activate(Navigation.ZOOM_IN);

});

return clazz;

});

HTML:

<div>

<label>${nls.selectNavigation}</label>

<div>

</div>

Getting more lost by the day.

Thank you,

Stephen

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:08:52 GMT

Stephen,

OK, I see you missed the concept that data-dojo-attach-point is the hook back to your templated widgets html component. Also you need to immediately grasp the concept that your requires (i.e. 'jimu/BaseWidget' and it associated var BaseWidget) have to match in order of listing identically. Example: dojo/_base/declare > declare, dojo/_base/lang > lang, jimu/BaseWidget > BaseWidget, dojo/on > on, esri/toolbars/navigation > Navigation.

Widget.js:

define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'jimu/BaseWidget',
  'dojo/on',
  'esri/toolbars/navigation'
],

function(declare, lang, BaseWidget, on, Navigation) {
    var clazz = declare([BaseWidget], {
  name: 'Navigation',
  navToolbar: null,

  startup: function() {
    this.navToolbar = new Navigation(this.map);
    this.own(on(this.zoomIn, 'click', lang.hitch(this, function() {
      this.navToolbar.activate(Navigation.ZOOM_IN);
    })));
  }

  });
  return clazz;
});

Widget.html:

<div>
  <label>${nls.selectNavigation}</label>
  <div>
    <input type="button" value="Zoom In" data-dojo-attach-point="zoomIn">
  </div>
</div>

Attached is your widget based on the code you had so far corrected.

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Mon, 23 Nov 2015 22:37:10 GMT

Thank you! Got it, match in order of listing! Now I remember that rule from the pre-webapp builder use of ArcGIS JavaScript API. I should have known that!

I'll take a shot at navToolbar.deactivate() onClose next.

Thank you!

Stephen

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Wed, 25 Nov 2015 22:30:08 GMT

Hi Robert!

I'm 99 percent of the way there with the Navigation widget. It now deactivates onclose, and I added in the remaining navigation functions. The last thing I'm trying to accomplish is to have the buttons change color when selected. I figured that jQuery was the best approach. What I have below works in JSFiddle, but not in WAB Developer. If you have a second, do you see what I'm missing or doing wrong? Also, once this is done, I'd like to post this widget to the custom widget resource section of GeoNet if that's OK. Thanks again!!!

JS:

define([

'dojo/_base/declare',

'dojo/_base/lang',

'jimu/BaseWidget',

'dojo/on',

'esri/toolbars/navigation',

'jimu/loaderplugins/jquery-loader!https://code.jquery.com/jquery-git1.min.js'

function(declare, lang, BaseWidget, on, Navigation, $) {

var clazz = declare([BaseWidget], {

name: 'Navigation',

baseClass: 'widget-Navigation',

navToolbar: null,

startup: function() {

this.navToolbar = new Navigation(this.map);

this.own(on(this.zoomIn, 'click', lang.hitch(this, function() {

this.navToolbar.activate(Navigation.ZOOM_IN);

})));

this.own(on(this.zoomOut, 'click', lang.hitch(this, function() {

this.navToolbar.activate(Navigation.ZOOM_OUT);

})));

this.own(on(this.zoomPrevious, 'click', lang.hitch(this, function() {

this.navToolbar.zoomToPrevExtent();

})));

this.own(on(this.zoomNext, 'click', lang.hitch(this, function() {

this.navToolbar.zoomToNextExtent();

})));

$('.main .btn').click(function (evt) {

$('.selected').not(this).removeClass('selected');

$(this).toggleClass('selected');

});

$(document).click(function () {

$('.main .btn').removeClass('selected');

});

onClose: function() {

this.navToolbar.deactivate();

}

});

return clazz;

});

HTML:

<label><b>${nls.selectNavigation}</b></label>

</div>

<br/>

</div>

<br/>

</div>

<br/>

</div>

CSS:

.widget-Navigation .selected {

color: rgba(255, 255, 255);

background-color: #999;

background-color: rgba(0, 0, 0, 0.4);

width: 45px;

height: 45px;

}

.widget-Navigation {

font-size:medium;

}

.widget-Navigation .btn{

background-color: #ccc;

background-color: rgba(0, 0, 0, 0.2);

border: 1px solid #000000;

border: 1px solid rgba(0, 0, 0, 0.4);

width: 45px;

height: 45px;

}

.widget-Navigation .btn:hover{

color: rgba(255, 255, 255);

background-color: #999;

background-color: rgba(0, 0, 0, 0.4);

width: 45px;

height: 45px;

}

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Thu, 26 Nov 2015 00:30:24 GMT

Stephen,

I don't like using a third party library when you already have dojo that can do the style and class stuff. I will update the code to show you how to do it with dojo.

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Thu, 26 Nov 2015 13:44:40 GMT

Stephen,

Here is the widget using pure dojo. I don't think you should have a select state on the previous and next buttons as they are only monetary buttons not toggles like the zoom-in and out, so that is how my code works.

Re: NavToobar Deactivate in WAB question

StephenSchmidt2 — Fri, 27 Nov 2015 18:22:55 GMT

Wow! Thanks Robert!! I was able to get a jquery version working as well, but it's really messy! Your version is much more straight forward.

I really appreciate your help! I learned a bunch about the internal workings of WAB.

Thanks again!!!

Stephen

Re: NavToobar Deactivate in WAB question

RobertScheitlin__GISP — Sat, 28 Nov 2015 12:35:34 GMT

Stephen,

You have marked this as "Assumed Answered". What "Assumed Answered" is for is when you have answered your own question or just feel that one particular reply is appropriate to mark as the answer to your question.

You should mark one of the many replies as the correct answer. To do this you have to open the thread (you can not see the correct answer link from inside your inbox) and then you will see the green star with correct answer link on each reply in the thread. Just click that link on the thread that best answered your question.