Disable Click Event

[BrianMcBurney]

I'm writing a custom widget to select one or more parcels.  Using the code from Custom Widget for Selecting a Parcel​, I am able to disable the popup and add a graphic for the selected parcel(s):

	startup: function() {
	//  this.inherited(arguments);
	//  this.mapIdNode.innerHTML = 'map id:' + this.map.id;
	console.log('startup');
	var map = this.map;
	var parcelLayerId, parcelLayer, parcelList;

	var highlightSymbol = new SimpleFillSymbol(
	SimpleFillSymbol.STYLE_SOLID,
	new SimpleLineSymbol(
	SimpleLineSymbol.STYLE_SOLID,
	new Color([255,0,0]), 3
	),
	new Color([125,125,125,0.35])
	);

	LayerInfos.getInstance(map, map.itemInfo).then(lang.hitch(function(layerInfosObject) {
	layerInfosObject.getLayerInfoArray().forEach(function(layerInfo) {
	console.log(layerInfo.title);
	if (layerInfo.title == 'Search - Parcels') {
	parcelLayerId = layerInfo.id;
	parcelLayerInfo = layerInfosObject.getLayerInfoById(layerInfo.id)
	parcelLayerInfo.disablePopup();
	console.log('parcel layer ID = ', parcelLayerId)
	}
	});
	}));

	parcelLayer = map.getLayer(parcelLayerId);
	parcelList = [];

	this.own(on(parcelLayer, 'click', function(e) {
	var parcelString = esriLang.substitute(e.graphic.attributes, "${PARCEL_NUMBER}");
	var highlightGraphic = new Graphic(e.graphic.geometry, highlightSymbol);
	map.graphics.add(highlightGraphic);
	parcelList.push(parcelString);
	console.log('Selection = ' + parcelList);
	}));
	}, When the widget is closed, I am able to clear the graphics and re-enable the popup:    onClose: function(){      console.log('onClose');      this.map.graphics.clear();      parcelLayerInfo.enablePopup();    },

The problem is the on click event is not removed and the graphic is still added.  Shouldn't this.own remove the click event automatically when the widget is closed?

[RobertScheitlin__GISP · Accepted solution]

Brian,

  No this.own will remove the listener when the widget is destroyed. Closing the widget just hides it. it does not destroy it.

[BrianMcBurney]

Robert,

Thanks for your quick reply.  I'll have to take a closer look into the widget life cycle.

[Anonymous User]

Try assigning the click event to a variable such as:

var clickHandler = this.own(on(parcelLayer, 'click', function(e) {...});

then at the end of your code where you are closing the widget remove the clickHandler

clickHandler.remove()

This should remove the click event.  For more info check out: Working with events | Guide | ArcGIS API for JavaScript

[BrianMcBurney]

Sage,

Thanks for the info and link. This is my first attempt at a WAB widget, so any insight is appreciated.

I was able to get it working correctly using something very similar (from another post answered by Robert).

I created the click event using

this.mapClickEvt = this.map.on('click', lang.hitch(this, function (e) {…})),

then was able to remode it onClose using this.mapClickEvt.remove();

[AdamCrateau1]

Brian,

I had a similar question/need to yours.

Rather than add the click event to the instance of the basewidget, I would like to create a separate class to house my business logic including the map-click event, and use the basewidget as a thin wrapper.  This workflow is recommended in Gavin Rehkemper and Tom Brayson's presentation on WAB Development Tools and Techniques:

GitHub - gavinr/web-appbuilder-tools-techniques-dev-summit-2016: Dev Summit 2016 Presentation "Web A...

Does anyone have an example of what this looks like in practice?   

[RobertScheitlin__GISP]

Adam,

I do not have an example of this. Though it is recommended by them this is not the standard practice used by the WAB dev team or most of the custom widget developers.

[AdamCrateau1]

.. great to know.   Thanks Robert!