I am trying to build a custom widget for Web App Builder that has the same functionality as the FindTask class in the Java Script API. Thus far, my code searches for an attribute value in a rest service (i.e. owner name of a parcel) and returns the search results in the Dev Tool’s Console window, NOT in a table grid that I am striving for. I am a Java Script novice and would appreciate any guidance or suggestions as to what my code is lacking to output the search results into a table grid.
Thanks in advance!
Here is the Widget.js code:
define([
// Specify required modules
"dojo/_base/declare",
"jimu/BaseWidget",
"esri/tasks/FindTask",
"esri/tasks/FindParameters",
"esri/symbols/SimpleFillSymbol",
"dojox/grid/DataGrid",
"dojo/_base/array",
"esri/symbols/SimpleLineSymbol",
"esri/graphic",
"dojo/data/ItemFileReadStore",
"dojo/_base/Color"
],
function (
declare,
BaseWidget,
FindTask,
FindParameters,
SimpleFillSymbol,
DataGrid,
arrayUtils,
SimpleLineSymbol,
Graphic,
ItemFileReadStore,
Color
) {
var clazz = declare([BaseWidget], {
baseClass: 'jimu-widget-demo',
_getMapId: function () {
alert(this.map.id);
},
postCreate: function () {
this.grid = new DataGrid({
rowsPerPage: '5', rowSelector: '20px'
}, this.searchResultsTable);
},
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();
//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.resultsArea.innerHTML = JSON.stringify(results); //returns results in widget window
this.showResults(results);
});
},
showResults: function (results) {
this.map.graphics.clear();
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 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;
});
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.
store = new ItemFileReadStore({
data: data
});
this.grid.setStore(store);
//this.grid.on("rowclick", onRowClickHandler);
//Zoom back to the initial map extent
//map.centerAndZoom(center, zoom);
}
});
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="35" />
<button class="favorite styled" type="button" data-dojo-attach-event="click:buttonClickHandler">
Search
</button>
<div data-dojo-attach-point="resultsArea"></div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:'true'"
style="height:150px;font-size:10pt;">
<table data-dojo-attach-point="searchResultsTable">
<thead>
<tr>
<th field="Parcel_Num" width="10%">Parcel ID</th>
<th field="Owner1" width="11%">Owner 1</th>
<th field="Owner2" width="11%">Owner 2</th>
<th field="Prop_Adrs1" width="11%">Property Address</th>
<th field="Prop_Adrs2" width="8%">City</th>
<th field="Lgl_Desc1" width="8%">Legal 1</th>
<th field="Lgl_Desc2" width="8%">Legal 2</th>
<th field="Lgl_Desc3" width="8%">Legal 3</th>
<th field="Lgl_Desc4" width="8%">Legal 4</th>
<th field="Lgl_Desc5" width="8%">Legal 5</th>
</tr>
</thead>
</table>
</div>
</div>
