I am trying to create a custom widget that allows users to copy and paste a record that has the same attributes and geometry. The copy and paste part of the widget is working but I also want the popup to appear for the newly created feature after it has been added. Originally, the section of code that I am having problems with worked without the popup appearing ...
_copyFeature: function() {
this.inherited(arguments);
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess());
},
_onEditSuccess: function() {
this.inherited(arguments);
this.map.graphics.clear();
this.map.setExtent(this.map.extent)
this._postResults("<span style='color:#3ca553;'>Copied " + this.sourceLayer.name + ' Site Number - ' + this.featureGraphic.attributes.site_num + " to " + this.targetLayerName + "</span><br>");
},
The code I am using to get the popup to appear is below. The problem is, the popup is showing the feature that I am copying not the newly added record.
_copyFeature: function() {
this.inherited(arguments);
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess());
},
_onEditSuccess: function() {
this.inherited(arguments);
this.targetLayer.refresh();
var query = new Query();
query.geometry = this.featureGraphic.geometry;
this.targetLayer.selectFeatures(query, this.targetLayer.SELECTION_NEW);
this.feature = this.targetLayer.getSelectedFeatures();
var selectLength = this.feature.length;
//console.log(selectLength);
//console.log(this.feature);
this.feature = this.targetLayer.getSelectedFeatures()[selectLength];
this.map.infoWindow.setFeatures([this.feature]);
this.map.infoWindow.show(this.featureGraphic.geometry);
this.map.graphics.clear();
this.map.setExtent(this.map.extent)
this._postResults("<span style='color:#3ca553;'>Copied " + this.sourceLayer.name + ' Site Number - ' + this.featureGraphic.attributes.site_num + " to " + this.targetLayerName + "</span><br>");
},
It appears like the edit is not being applied before the _onEditSuccess() is being run. I tried using 'edits-complete' so the _onEditSuccess() would run after the edit was completed but I had no luck. Maybe I am going about this the wrong way. Any suggestions would be appreciated.
Solved! Go to Solution.
M E,
OK then it is s scope issue inside the result function. Here is the fix for that:
this.targetLayer.applyEdits([this.featureGraphic], null, null, lang.hitch(this, this._onEditSuccess), lang.hitch(this, this._onEditError));
M E,
The applyEdits success is returning an object but you are not using it.
_copyFeature: function() {
this.inherited(arguments);
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess);
},
_onEditSuccess: function(adds) {
//adds is an array of FeatureEditResult
//each FeatureEditResult has an objectId property
//you can uses these oids in your query
this.inherited(arguments);
//loop through the adds array and build an array of ObjectIds
// for your query.
var myOids = ....
var query = new Query();
query.objectIds = myOids;
//todo
....
},
Thanks Robert,
I am still having some issues. When I run console.log(adds), it is returning as undefined. Here is the entire Widget.js file.
define(['dojo/_base/declare',
'jimu/BaseWidget',
"esri/layers/FeatureEditResult",
"esri/symbols/Symbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/Color",
"esri/geometry/Geometry",
'esri/geometry/Circle',
'esri/tasks/query',
'esri/graphic',
"dijit/form/Select",
'dojo/_base/html',
"jimu/PanelManager",
'dojo/_base/array',
'dojo/on',
"dojo/_base/lang",
'dijit/form/Form',
"dojo/domReady!"],
function(declare,
BaseWidget,
FeatureEditResult,
Symbol,
SimpleFillSymbol,
SimpleMarkerSymbol,
SimpleLineSymbol,
Color,
Geometry,
Circle,
Query,
Graphic,
Select,
html,
PanelManager,
Array,
on,
lang,
) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-vegnetcopyfeatures',
selectionListener: null,
selectDijit: null,
sourceLayer: null,
targetLayer: null,
targetLayerName: null,
isSelected: false,
featureGraphic: null,
feature: null,
onOpen: function() {
this.inherited(arguments);
this.map.infoWindow.hide();
this.map.setInfoWindowOnClick(false);
this._addListener(this.selectDijit.value);
},
startup: function() {
this.inherited(arguments);
console.log(this.map);
this._initSelectDijit();
},
_initSelectDijit: function() {
this.inherited(arguments);
this.selectDijit = new Select({
options: this.config.selectOptions
});
this.selectDijit.placeAt(this.layerDijit).startup();
this._addListener(this.selectDijit.value);
this.own(on(this.selectDijit, "change", lang.hitch(this, function () {
this._addListener(this.selectDijit.value);
})));
},
_addListener: function(value) {
this.inherited(arguments);
lang.hitch(this, this._getSourceLayer(value));
this._getTargetLayer(value);
if (this.selectionListener != null) {
this.selectionListener.remove();
}
this.selectionListener = this.map.on("click", lang.hitch(this, this._queryLayer));
},
_queryLayer: function(evt) {
this.inherited(arguments);
// console.log(evt);
var circle = new Circle({
center: evt.mapPoint,
geodesic: true,
radius: 5,
radiusUnits: "METERS"
});
var query = new Query();
query.geometry = circle;
this.sourceLayer.selectFeatures(query, this.sourceLayer.SELECTION_NEW, lang.hitch(this, this._selectionCallback));
},
_turnBtnOn: function() {
this.inherited(arguments);
html.setStyle(this.execNode, 'display', 'block');
},
_turnBtnOff: function() {
this.inherited(arguments);
html.setStyle(this.execNode, 'display', 'none');
isSelected = false;
this.map.graphics.clear();
},
_selectionCallback: function() {
this.inherited(arguments);
// console.log(this.sourceLayer.getSelectedFeatures());
if (this.sourceLayer.getSelectedFeatures().length > 0 && this.sourceLayer.visibleAtMapScale == true && this.sourceLayer.visible == true) {
this.isSelected = true;
this.feature = this.sourceLayer.getSelectedFeatures()[0];
//console.log(this.sourceLayer.id);
lang.hitch(this, this._addGraphicToMap(this.feature));
this.selectNode.innerHTML = "<strong>1 Feature Selected</strong><br><br>";
this.selectNode.innerHTML += "<strong>Prework ID</strong> " + this.feature.attributes.prework_id + "<br>";
if (this.sourceLayer.id === 'Vegetation_Treatment_Status_Archived_6309' || this.sourceLayer.id === 'Vegetation_Treatment_Status_Archived_5826' ){
this.selectNode.innerHTML += "<strong>Status</strong> " + "Proposed" + "<br>";
}
else{
this.selectNode.innerHTML += "<strong>Status</strong> " + this.feature.attributes.status + "<br>";
}
this.selectNode.innerHTML += "<strong>Site Number</strong> " + this.feature.attributes.site_num + "<br>";
this.selectNode.innerHTML += "<strong>Circuit</strong> " + this.feature.attributes.circuit + "<br>";
this.selectNode.innerHTML += "<strong>Span From</strong> " + this.feature.attributes.span_from + "<br>";
this.selectNode.innerHTML += "<strong>Span To</strong> " + this.feature.attributes.span_to + "<br>";
this.selectNode.innerHTML += "<strong>Treatment Type</strong> " + this.feature.attributes.treatment + "<br>";
this.selectNode.innerHTML += "<strong>Work Task</strong> " + this.feature.attributes.work_task + "<br>";
this._turnBtnOn();
}
else {
this.isSelected = false;
this.selectNode.innerHTML = "<strong>Select a feature to copy.</strong>";
this._turnBtnOff();
this.map.graphics.clear();
}
},
_addGraphicToMap: function(feature) {
this.inherited(arguments);
var geom = feature.geometry;
var Symbol
if (feature.geometry.type == "polygon") {
symbol = new SimpleFillSymbol();
symbol.setOutline(new SimpleLineSymbol("STYLE_SOLID", new Color("#2afaff"), 4));
}
else if (feature.geometry.type == "polyline") {
symbol = new SimpleLineSymbol("STYLE_SOLID", new Color("#2afaff"), 4);
}
else {
symbol = new SimpleMarkerSymbol("STYLE_CIRCLE", 14, new SimpleLineSymbol("STYLE_SOLID", new Color("#2afaff"), 4));
}
if (this.sourceLayer.id === 'Vegetation_Treatment_Status_3561'){
this.featureGraphic = new Graphic(
geom,
symbol,
{
"prework_id" : feature.attributes.prework_id,
"status" : feature.attributes.status,
//"status" : "Active"
"site_num" : feature.attributes.site_num,
"circuit" : feature.attributes.circuit,
"span_from" : feature.attributes.span_from,
"span_to" : feature.attributes.span_to,
"treatment" : feature.attributes.treatment,
"work_task" : feature.attributes.work_task,
"consent_obtained" : feature.attributes.consent_obtained,
"riparian_present" : feature.attributes.riparian_present,
"condition_assessment" : feature.attributes.condition_assessment,
"work_priority" : feature.attributes.work_priority,
"time_hrs" : feature.attributes.time_hrs,
"number_of_trees" : feature.attributes.number_of_trees,
"dbhcm" : feature.attributes.dbhcm,
"height" : feature.attributes.height,
"target_species" : feature.attributes.target_species,
"row" : feature.attributes.row,
"wildlife_tree" : feature.attributes.wildlife_tree,
"tree_risk" : feature.attributes.tree_risk,
"merchantable" : feature.attributes.merchantable,
"timing" : feature.attributes.timing,
"access" : feature.attributes.access,
"inspected_by" : feature.attributes.inspected_by,
"date_inspected" : feature.attributes.date_inspected,
"comments" : feature.attributes.comments,
"form8_comments" : feature.attributes.form8_comments,
"cycle_interval" : feature.attributes.cycle_interval,
"length_km" : feature.attributes.length_km,
"last_patrol_date" : feature.attributes.last_patrol_date
})
}
else if (this.sourceLayer.id === 'Vegetation_Treatment_Status_358'){
this.featureGraphic = new Graphic(
geom,
symbol,
{
"prework_id" : feature.attributes.prework_id,
"status" : feature.attributes.status,
//"status" : "Active"
"site_num" : feature.attributes.site_num,
"circuit" : feature.attributes.circuit,
"span_from" : feature.attributes.span_from,
"span_to" : feature.attributes.span_to,
"treatment" : feature.attributes.treatment,
"work_task" : feature.attributes.work_task,
"consent_obtained" : feature.attributes.consent_obtained,
"riparian_present" : feature.attributes.riparian_present,
"condition_assessment" : feature.attributes.condition_assessment,
"work_priority" : feature.attributes.work_priority,
"time_hrs" : feature.attributes.time_hrs,
"number_of_trees" : feature.attributes.number_of_trees,
"dbhcm" : feature.attributes.dbhcm,
"height" : feature.attributes.height,
"target_species" : feature.attributes.target_species,
"row" : feature.attributes.row,
"wildlife_tree" : feature.attributes.wildlife_tree,
"tree_risk" : feature.attributes.tree_risk,
"merchantable" : feature.attributes.merchantable,
"timing" : feature.attributes.timing,
"access" : feature.attributes.access,
"inspected_by" : feature.attributes.inspected_by,
"date_inspected" : feature.attributes.date_inspected,
"comments" : feature.attributes.comments,
"form8_comments" : feature.attributes.form8_comments,
"last_patrol_date" : feature.attributes.last_patrol_date
})
}
else if (this.sourceLayer.id === 'Vegetation_Treatment_Status_Archived_5826'){
this.featureGraphic = new Graphic(
geom,
symbol,
{
"prework_id" : 0,
"status" : 'Proposed',
"site_num" : feature.attributes.site_num,
"circuit" : feature.attributes.circuit,
"span_from" : feature.attributes.span_from,
"span_to" : feature.attributes.span_to,
"treatment" : feature.attributes.treatment,
"work_task" : feature.attributes.work_task,
"consent_obtained" : feature.attributes.consent_obtained,
"riparian_present" : feature.attributes.riparian_present,
"condition_assessment" : feature.attributes.condition_assessment,
"work_priority" : feature.attributes.work_priority,
"time_hrs" : feature.attributes.time_hrs,
"number_of_trees" : feature.attributes.number_of_trees,
"dbhcm" : feature.attributes.dbhcm,
"height" : feature.attributes.height,
"target_species" : feature.attributes.target_species,
"row" : feature.attributes.row,
"wildlife_tree" : feature.attributes.wildlife_tree,
"tree_risk" : feature.attributes.tree_risk,
"merchantable" : feature.attributes.merchantable,
"timing" : feature.attributes.timing,
"access" : feature.attributes.access,
"inspected_by" : feature.attributes.inspected_by,
"date_inspected" : feature.attributes.date_inspected,
"comments" : feature.attributes.comments,
"form8_comments" : feature.attributes.form8_comments,
"cycle_interval" : feature.attributes.cycle_interval,
"length_km" : feature.attributes.length_km,
"last_patrol_date" : feature.attributes.last_patrol_date
})
}
else if (this.sourceLayer.id === 'Vegetation_Treatment_Status_Archived_6309'){
this.featureGraphic = new Graphic(
geom,
symbol,
{
"prework_id" : 0,
"status" : 'Proposed',
"site_num" : feature.attributes.site_num,
"circuit" : feature.attributes.circuit,
"span_from" : feature.attributes.span_from,
"span_to" : feature.attributes.span_to,
"treatment" : feature.attributes.treatment,
"work_task" : feature.attributes.work_task,
"consent_obtained" : feature.attributes.consent_obtained,
"riparian_present" : feature.attributes.riparian_present,
"condition_assessment" : feature.attributes.condition_assessment,
"work_priority" : feature.attributes.work_priority,
"time_hrs" : feature.attributes.time_hrs,
"number_of_trees" : feature.attributes.number_of_trees,
"dbhcm" : feature.attributes.dbhcm,
"height" : feature.attributes.height,
"target_species" : feature.attributes.target_species,
"row" : feature.attributes.row,
"wildlife_tree" : feature.attributes.wildlife_tree,
"tree_risk" : feature.attributes.tree_risk,
"merchantable" : feature.attributes.merchantable,
"timing" : feature.attributes.timing,
"access" : feature.attributes.access,
"inspected_by" : feature.attributes.inspected_by,
"date_inspected" : feature.attributes.date_inspected,
"comments" : feature.attributes.comments,
"form8_comments" : feature.attributes.form8_comments,
"last_patrol_date" : feature.attributes.last_patrol_date
})
};
// console.log(this.featureGraphic);
this.map.graphics.clear();
this.map.graphics.add(this.featureGraphic);
},
_getSourceLayer: function(value) {
this.inherited(arguments);
var ids = this.map.graphicsLayerIds;
var layer;
for (i=0; i < ids.length; i++){
layer = this.map.getLayer(ids[i]);
if (layer.url == value) {
this.sourceLayer = layer;
//console.log(this.sourceLayer)
}
}
},
_getTargetLayer: function(value) {
this.inherited(arguments);
var layerPair = this.config.layerPair;
var layer;
var ids = this.map.graphicsLayerIds;
for ( i=0; i < layerPair.length; i++ ) {
if ( layerPair[i].source == value ) {
for (j=0; j < ids.length; j++){
layer = this.map.getLayer(ids[j]);
if (layer.url == layerPair[i].target) {
this.targetLayer = layer;
}
}
this.targetLayerName = layerPair[i].name;
}
}
this.targetNode.innerHTML = "Target layer is <strong>" + this.targetLayerName + "</strong>";
this.selectNode.innerHTML = "<strong>Select a feature to copy.</strong>";
this._turnBtnOff();
},
_copyFeature: function() {
this.inherited(arguments);
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess());
},
_onEditFail: function(e) {
this.inherited(arguments);
this._postResults("<span style='color:#c13333;'>" + e.name + ": " + e.message + "</span><br>");
},
_onEditSuccess: function(adds) {
this.inherited(arguments);
//this.targetLayer.refresh();
//console.log(this.targetLayer);
//var query = new Query();
// query.geometry = this.featureGraphic.geometry;
console.log(adds)
//this.targetLayer.selectFeatures(query, this.targetLayer.SELECTION_NEW);
//this.feature2 = this.targetLayer.getSelectedFeatures();
//var selectLength = this.feature2.length;
//console.log(selectLength);
//console.log(this.feature2);
//this.feature2 = this.targetLayer.getSelectedFeatures()[selectLength];
//this.map.infoWindow.setFeatures([this.feature2]);
//this.map.infoWindow.show(this.featureGraphic.geometry);
this.map.graphics.clear();
this.map.setExtent(this.map.extent)
this._postResults("<span style='color:#3ca553;'>Copied " + this.sourceLayer.name + ' Site Number - ' + this.featureGraphic.attributes.site_num + " to " + this.targetLayerName + "</span><br>");
},
_postResults: function(string) {
this.inherited(arguments);
this.map.graphics.clear();
this.resultsNode.innerHTML += string;
html.setStyle(this.resultsBtn, 'display', 'block');
},
_clearResults: function() {
this.inherited(arguments);
this.resultsNode.innerHTML = "";
this.selectNode.innerHTML = "";
html.setStyle(this.execNode, 'display', 'none');
html.setStyle(this.resultsBtn, 'display', 'none');
PanelManager.getInstance().closePanel(this.id + '_panel');
},
onClose: function() {
this.inherited(arguments);
this.map.setInfoWindowOnClick(true);
this.selectionListener.remove();
this.map.graphics.clear();
this._turnBtnOff();
if (this.sourceLayer) {
this.sourceLayer.clearSelection();
}
}
// onMinimize: function(){
// console.log('onMinimize');
// },
// onMaximize: function(){
// console.log('onMaximize');
// },
// onSignIn: function(credential){
// /* jshint unused:false*/
// console.log('onSignIn');
// },
// onSignOut: function(){
// console.log('onSignOut');
// }
// onPositionChange: function(){
// console.log('onPositionChange');
// },
// resize: function(){
// console.log('resize');
// }
//methods to communication between widgets:
});
});
M E,
When you have () behind a function name that function is called immediately.
//you have
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess());
//Should be
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess);
When I remove the (), this._onEditSuccess doesn't run?
M E,
Then your applyEdits is not successfully running then.
this.targetLayer.applyEdits([this.featureGraphic], null, null, this._onEditSuccess, this._onEditError);
...
_onEditError: function(err) {
console.error(err);
},
Thanks Robert,
The error is 'this.inherited is not a function' inside the _onEditSuccess function.
M E,
Remove this.inherited then as you are not overriding an existing function.
Yes, I tried that Robert. Then it just throws an error on the next line.
this.targetLayer.selectFeatures(...);
this.map.infoWindow.setFeatures(...);
this.map.infoWindow.show(...);
this.map.graphics.clear();
Above was how I was getting the popup to appear (for the wrong feature) previously. Am I not able to use these inside the _onEditSuccess function now?
M E,
OK then it is s scope issue inside the result function. Here is the fix for that:
this.targetLayer.applyEdits([this.featureGraphic], null, null, lang.hitch(this, this._onEditSuccess), lang.hitch(this, this._onEditError));