topic Re: Disable Click Event in Web AppBuilder Custom Widgets Questions

Disable Click Event

BrianMcBurney — Mon, 02 May 2016 19:15:41 GMT

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?

Re: Disable Click Event

RobertScheitlin__GISP — Mon, 02 May 2016 19:25:29 GMT

Brian,

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

Re: Disable Click Event

BrianMcBurney — Tue, 03 May 2016 11:37:58 GMT

Robert,

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

Re: Disable Click Event

Anonymous User — Tue, 03 May 2016 12:41:58 GMT

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

Re: Disable Click Event

BrianMcBurney — Tue, 03 May 2016 16:51:57 GMT

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

Re: Disable Click Event

AdamCrateau1 — Tue, 03 May 2016 17:57:49 GMT

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 AppBuilder for ArcGIS…

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

Re: Disable Click Event

RobertScheitlin__GISP — Tue, 03 May 2016 18:23:21 GMT

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.

Re: Disable Click Event

AdamCrateau1 — Tue, 03 May 2016 18:25:45 GMT

.. great to know. Thanks Robert!