FindTask Custom Widget: onRowClickHandler Not Firing

KellyGreen — Thu, 13 Feb 2020 21:43:39 GMT

Still trying to build a custom widget for WAB with the same functionality as the FindTask class in the Java Script API. So far, my code searches for an attribute value in a rest service and returns the search results in a table grid. Next step would be to click on a row in the table grid and zoom to that feature. I added in the onRowClickHandler code jargon but nothing happens when I click on a row. Again, I’m a JavaScript super novice so any input would be much appreciated.

Here is my Widget.js code:

define([

// Specify required modules

"dojo/_base/declare",

"jimu/BaseWidget",

'dijit/_WidgetsInTemplateMixin',

"esri/tasks/FindTask",

"esri/tasks/FindParameters",

"esri/symbols/SimpleFillSymbol",

"dgrid/OnDemandGrid",

"dgrid/Selection",

"dojo/_base/array",

"esri/symbols/SimpleLineSymbol",

"esri/graphic",

"dojo/store/Memory",

"dojo/_base/Color",

"dijit/layout/ContentPane",

"esri/layers/FeatureLayer",

"dojo/on",

"esri/lang",

'dojo/_base/lang',

"dijit/registry",

"esri/geometry/Extent",

"esri/map",

"esri/tasks/QueryTask",

"esri/tasks/query"

function (

declare,

BaseWidget,

_WidgetsInTemplateMixin,

FindTask,

FindParameters,

SimpleFillSymbol,

Grid,

Selection,

arrayUtils,

SimpleLineSymbol,

Graphic,

Memory,

Color,

FeatureLayer,

on,

esriLang,

lang,

registry,

Extent,

map,

QueryTask,

Query

) {

var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {

baseClass: 'jimu-widget-findtask',

grid: null,

postCreate: function () {

this.grid = new (declare([Grid, Selection]))({

bufferRows: 5,

columns: {

"id": "ID",

"Parcel_Num": "Parcel ID",

"Owner1": "Owner 1",

"Owner2": "Owner 2",

"Prop_Adrs1": "Property Address",

"Prop_Adrs2": "City",

"Lgl_Desc1": "Legal 1",

"Lgl_Desc2": "Legal 2",

"Lgl_Desc3": "Legal 3",

"Lgl_Desc4": "Legal 4",

"Lgl_Desc5": "Legal 5",

}

}, this.searchResultsTable);

this.grid.startup();

buttonClickHandler: function () {

console.log('clicked!', this.searchBox.value);

var find = new FindTask("https://maps.co.blaine.id.us/server/rest/services/ParcelInfo/MapServer");

var params = new FindParameters();

var center, zoom;

params.returnGeometry = true;

params.layerIds = [5];

params.searchFields = ["parcel_num", "owner1"];

params.outSpatialReference = map.spatialReference

params.searchText = this.searchBox.value;

find.execute(params, (results) => {

console.log('results', results[0]);

this.showResults(results);

});

//This function works with an array of FindResult that the task returns

showResults: function (results) {

this.map.graphics.clear();

var symbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([50, 194, 204]), 3),

new Color([255, 255, 255, 0])

);

//create array of attributes

var items = arrayUtils.map(results, (result) => {

var graphic = new Graphic(result.feature.toJson());

graphic.setSymbol(symbol);

this.map.graphics.add(graphic);

return result.feature.attributes;

});

//Create data object to be used in store

var data = {

identifier: "FID", //This field needs to have unique values

label: "RecordNo", //Name field for display. Not pertinent to a grid but may be used elsewhere.

items: items

};

console.log('items', items);

//Create data store and bind to grid.

var memStore = new Memory({ data: data }); {

this.grid.setStore(memStore);

this.grid.resize();

console.log('testkgclick!', this.selectedTaxLot);

};

onRowClickHandler: function(selectedTaxLot) {

var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).FID[0];

var selectedTaxLot = arrayUtils.filter(this, function (graphic) {

return ((graphic.attributes) && graphic.attributes.FID === clickedTaxLotId);

});

if ( selectedTaxLot.length ) {

this.map.setExtent(selectedTaxLot[0].geometry.getExtent(), true);

}

});

return clazz;

});

Here is the Widget.html code:

<div>
Parcel Number/Owner Name/Address/Legal Description:
<input type="text" data-dojo-attach-point="searchBox" size="40" />
<button class="favorite styled" type="button" data-dojo-attach-event="click:buttonClickHandler">
Search
</button>
<div data-dojo-attach-point="resultsArea"></div>
<br>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:'true'"
style="height:650px;font-size:10pt;">
<div data-dojo-attach-point="searchResultsTable" class="resultsGrid"></div>
</div>
</div>

Re: FindTask Custom Widget: onRowClickHandler Not Firing

RobertScheitlin__GISP — Thu, 13 Feb 2020 21:55:00 GMT

Kelly,

I do not see anywhere where you are wiring the onRowClcikHander to your grid.

this.grid.on("dgrid-select", onRowClickHandler);‍

Re: FindTask Custom Widget: onRowClickHandler Not Firing

KenBuja — Fri, 14 Feb 2020 13:22:45 GMT

You do have a problem with your require modules not matching your function arguments. You left out an argument for ContentPane between Color and FeatureLayer.

topic Re: FindTask Custom Widget: onRowClickHandler Not Firing in Web AppBuilder Custom Widgets Questions

FindTask Custom Widget: onRowClickHandler Not Firing

Re: FindTask Custom Widget: onRowClickHandler Not Firing

Re: FindTask Custom Widget: onRowClickHandler Not Firing