Set selection symbology click from custom widget

[JamesCrandall]

I'm trying to perform a selection from an attribute query, center the map and apply a symbol to the selection.  I know I'm selecting the correct point feature, the map centers on it, but I'm not sure how to change the symbol of that selected feature.

I'm applying the query on a feature layer in the source webmap.

e.target.id is just sending the value for the where of the query.

        reply_click: function (e) {
            
            console.log(e.target.id)
            this.map.itemInfo.itemData.operationalLayers.forEach(layer => {
                if (layer.layerObject) {
                    if (layer.title === "Water Use Application Facilities") {                        
                        var queryTask = new QueryTask(layer.layerObject)
                        var query = new Query();
                        query.returnGeometry = true;
                        query.outFields = ['*']
                        query.where = "facilityId = '" + e.target.id + "'"
                                           
                        layer.layerObject.setSelectionSymbol(new SimpleMarkerSymbol(this.config.selectionSymbol));
                        layer.layerObject.selectFeatures(query).then(function (features) {
                            if (layer.layerObject.geometryType === 'esriGeometryPoint' && features.length === 1) {
                                this.map.centerAt(features[0].geometry); //correctly centers
                                
                            }
                        });
                    }
                }
            })
        },

symbology is defined in the config.json file of the widget:

"selectionSymbol": {
		"color": [
			0,
			0,
			0,
			0
		],
		"size": 20.5,
		"angle": 0,
		"xoffset": 0,
		"yoffset": 0,
		"type": "esriSMS",
		"style": "esriSMSCircle",
		"outline": {
			"color": [
				0,
				255,
				250,
				255
			],
			"width": 1.50,
			"type": "esriSLS",
			"style": "esriSLSSolid"
		}
	}

[RobertScheitlin__GISP]

@JamesCrandall You should try using 

layer.layerObject.setSelectionSymbol(symbolJsonUtils.fromJson(this.config.selectionSymbol));

[JamesCrandall]

Hi Robert -- thanks for the reply.

I still don't see any change in symbol on the selected feature.  In an attempt to simplify, I just added the SimpleMarkerSymbol reference directly in the code to see if that would work but still not getting the symbology to change.

I thought perhaps a layer.refresh() was needed but it has no affect.

var selSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 0, 0]), 1),
                new Color([0, 255, 0, 0.25]));
            
            console.log(e.target.id)
            this.map.itemInfo.itemData.operationalLayers.forEach(layer => {
                if (layer.layerObject) {
                    if (layer.title === "Water Use Application Facilities") {                        
                        var queryTask = new QueryTask(layer.layerObject)
                        var query = new Query();
                        query.returnGeometry = true;
                        query.outFields = ['*']
                        query.where = "facilityId = '" + e.target.id + "'"
                                           
                        //layer.layerObject.setSelectionSymbol(new SimpleMarkerSymbol(this.config.selectionSymbol));
                        var selSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1),new Color([0, 255, 0, 0.25]));
                        layer.layerObject.setSelectionSymbol(selSymbol);
                        layer.layerObject.selectFeatures(query).then(function (features) {
                            if (layer.layerObject.geometryType === 'esriGeometryPoint' && features.length === 1) {
                                this.map.centerAt(features[0].geometry);
                                //layer.layerObject.setSelectionSymbol(symbolJsonUtils.fromJson(selSymbol));
                                layer.layerObject.setSelectionSymbol(selSymbol);
                                layer.layerObject.refresh();
                            }
                        });
                    }
                }
            })

Just for reference, query.where is getting built with the e.target.id and seems to work fine because the map.centerAt() functions correctly when I click the specific item on the widget (e.target.id is the facilityId property found on the grid within the widget).

[RobertScheitlin__GISP · Accepted solution]

@JamesCrandall Personally I do not use a FeatureLayer's selectFeatures method. I always just add a GraphicsLayer to the Map with the results of the query. The GL is overlayed on the FeatureLayer and easy to define the symbology you want.

[JamesCrandall]

Was tired of banging my head against the wall on that setSelectionsSysmbol and just implemented a simply selection Graphic that is added to the map.  I supposed if I have other graphics to deal with then the wholesale map.graphics.clear() that I do prior to each call would need to change but for now this will work I think.

[RobertScheitlin__GISP]

@JamesCrandall I also normally add a query specific GraphicsLayer to the map that way clearing the map.graphics does not affect the query that I am working with.