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
Solved! Go to Solution.
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.
Stephen,
You have some very confusing code in your widget.
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);
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
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.
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
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.
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!
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);
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
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.