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>
