AnsweredAssumed Answered

ListView Widget

Question asked by rbuford on Sep 19, 2019
Latest reply on Mar 6, 2020 by mrouhi

Hi All or Robert Scheitlin, GISP ,

 

I am needing help with the ListView widget. We are needing it to display only unique values from a feature layer field as well as filter and zoom to from the selected list item. here is my widget.js code. I changed the outfield to the config.titleField and was able to pass only unique values to the list however this changed the click function. See widget.js below I also attached the full zip.

 

 

define(['dojo/_base/declare',
'jimu/BaseWidget',
'dojo/_base/lang',
'dojo/Deferred',
'dgrid/OnDemandList',
'dgrid/Selection',
"dojo/store/Memory",
"esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/on"
],
function(declare, BaseWidget,
lang, Deferred,
OnDemandList, Selection, Memory,
Query, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, on) {
//To create a widget, you need to derive from BaseWidget.
return declare([BaseWidget], {
// DemoWidget code goes here

//please note that this property is be set by the framework when widget is loaded.
//templateString: template,

baseClass: 'jimu-widget-listview',
featureLayer: null,
list: null,

postCreate: function() {
this.inherited(arguments);
console.log('postCreate');

this.headerNode.innerHTML = this.config.widgetHeaderText;

this.featureLayer = this.map.getLayer(this.config.layerId);

var highlightSymbol;
switch(this.featureLayer.geometryType) {
case 'esriGeometryPoint':
highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, null, '#e74c3c');
break;
case 'esriGeometryPolyline':
highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, '#e74c3c', 3);
break;
case 'esriGeometryPolygon':
highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, '#fff', 2),
'#e74c3c');
break;
}
this.featureLayer.setSelectionSymbol(highlightSymbol);

this.createList();
},

startup: function() {
this.inherited(arguments);
console.log('startup');
},

_createListItem: function(featureObj) {
var listItemRoot = document.createElement('DIV');
listItemRoot.className = 'list-item';
if(featureObj) {
var thumbnailImgWrapper, thumbnailImg, listItemTitle;
// Create thumbnail
if(featureObj.thumbnailImg) {
thumbnailImgWrapper = document.createElement('div');
thumbnailImgWrapper.className = 'thumbnail-wrapper';
thumbnailImg = document.createElement('img');
thumbnailImg.src = featureObj.thumbnailImg;
thumbnailImgWrapper.appendChild(thumbnailImg);
listItemRoot.appendChild(thumbnailImgWrapper);
}
// Create title
if(featureObj.title && typeof featureObj.title === 'string') {
listItemTitle = document.createElement('H4');
listItemTitle.innerHTML = featureObj.title;
listItemRoot.appendChild(listItemTitle);
if(thumbnailImg)
thumbnailImg.alt = featureObj.title;
}
} else {
listItemRoot.innerHTML = 'NO DATA AVAILABLE';
}

return listItemRoot;
},

createList: function() {
this.getDataStore().then(lang.hitch(this, function(datastore) {
var list = new (declare([OnDemandList, Selection]))({
'store': datastore,
'selectionMode': 'single',
'renderRow': lang.hitch(this, function (object, options) {
return this._createListItem(object);
})
}, this.ListNode);
list.startup();
list.on('.dgrid-row:click', lang.hitch(this, function(evt) {
var row = list.row(evt);
var query = new Query();
query.objectIds = [row.data.id];
this.featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, lang.hitch(this, function(result) {
if (result.length) {
var feature = result[0],
newMapCenter,
geometry = feature.geometry,
extent = geometry.getExtent(),
shape = feature.getShape();
if(extent && extent.getCenter) {
newMapCenter = extent.getCenter(); // polygon & polyline
} else {
newMapCenter = geometry; // point
}
this.map.centerAt(newMapCenter); // move to the feature
if(shape) shape.moveToFront(); // move the feature to front
}
}));
}));
}));
},

getDataStore: function() {
var def = new Deferred();

// Query features
var query = new Query();
query.returnGeometry = false;
query.outFields = [this.config.titleField];
query.returnDistinctValues = true;
query.where = '1=1';

this.featureLayer.queryFeatures(query, lang.hitch(this, function(featureSet) {
// console.log(featureSet);
var featureSetRemapped = [];
for(var index in featureSet.features) {
var feature = featureSet.features[index];
featureSetRemapped.push({
'id': feature.attributes[this.featureLayer.objectIdField],
'title': feature.attributes[this.config.titleField],
'thumbnailImg': feature.attributes[this.config.thumbnailField]
});
}

def.resolve(new Memory({
data: featureSetRemapped
}));
}));

return def;
},



onOpen: function(){
console.log('onOpen');
},

onClose: function(){
console.log('onClose');
},

onMinimize: function(){
console.log('onMinimize');
},

onMaximize: function(){
console.log('onMaximize');
},

onSignIn: function(credential){
/* jshint unused:false*/
console.log('onSignIn');
},

onSignOut: function(){
console.log('onSignOut');
}
});
});@

Attachments

Outcomes