NavToobar Deactivate in WAB question

3333
16
Jump to solution
11-12-2015 09:47 AM
StephenSchmidt2
New Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

View solution in original post

16 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Stephen,

   You have some very confusing code in your widget.

  1. You have var navToolbar = new Navigation(this.map); three times in your code (line 82, 94, and 106) ???
  2. 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.
  3. 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);

StephenSchmidt2
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
StephenSchmidt2
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
StephenSchmidt2
New Contributor II

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!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
StephenSchmidt2
New Contributor II

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>

    <input type="button" value="Publish Data" id="zoomIn" data-dojo-attach-event="onclick:_onPublishClick">

    <span data-dojo-attach-point="pubInfoNode"></span>

  </div>

</div>

Getting more lost by the day.

Thank you,

Stephen

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.