Hi,
I've successfully managed to create new polygon features in a featurelayer using sketch geometries applyEdits() when the user finishes drawing. This, however, has some issues from a usability point of view - in that if my user has made a mistake they cannot edit the polygon before the rest of the form on the page is submitted.
What I'd like to do is either
a) submit the polygon when the page on the form is submitted (preferable), or;
b) work out how to delete the polygon from the feature service using the drawing that's still on the screen
The function I am successfully using:
sketchViewModel.on("create-complete", addGraphic);
sketchViewModel.on("update-complete", updateGraphic);
sketchViewModel.on("update-cancel", updateGraphic);
function addGraphic(event) {
var varCreatedByUser = document.querySelector('#Created_By').value;
var varCreatedDate = document.querySelector('#Upload_Date').value;
var varActivityType = document.querySelector('#Activity_Type').value;
var varActivityName = document.querySelector('#ActivityName').value;
var varOCBYear = document.querySelector('#Year').value;
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: {
CreatedByUser: varCreatedByUser,
CreatedDate: varCreatedDate,
ActivityType: varActivityType,
ActivityName: varActivityName,
OCBYear: varOCBYear
}
});
graphicsLayer.add(graphic);
const edits = {
addFeatures: [graphic]
};
console.log(currentSketch);
applyEdits(edits);
document.getElementById("polygonButton").disabled = true;
console.log(graphic);
}
What I have tried so far:
Option a)
Watching my form submit button for an onclick action and attempting to grab the graphic in the same way that the function addGraphic(event) function does. Not sure if this is a great idea as I'm also sending a form that causes a page change..
I assume this one fails because I'm not passing the object in via the event, though I'm not really sure.
document.getElementById("btnFormSubmit").onclick = function () {
var varCreatedByUser = document.querySelector('#Created_By').value;
var varCreatedDate = document.querySelector('#Upload_Date').value;
var varActivityType = document.querySelector('#Activity_Type').value;
var varActivityName = document.querySelector('#ActivityName').value;
var varOCBYear = document.querySelector('#Year').value;
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: {
CreatedByUser: varCreatedByUser,
CreatedDate: varCreatedDate,
ActivityType: varActivityType,
ActivityName: varActivityName,
OCBYear: varOCBYear
}
});
const edits = {
addFeatures: [graphic]
};
applyEdits(edits);
}
Option b)
I also tried for option b) by allowing the graphic to be submitted and then allowing the user to delete the feature and start again. I suspect I'm missing quite a bit here - like I'm sure I probably need to be collecting the object ID of the feature from the server after submission, storing that in a global variable, and then on delete passing that Object ID back + clear the map. I'm just not sure how, and I have not found a reference to this that seems like it would work. I've also tried referencing deleteFeatures: [graphic], but I'm assuming it's out of scope since its created in the create function. I'm not really sure about that being the right line of thought either.
document.getElementById("btnDelete").onclick = function () {
const edits = {
deleteFeatures: [editFeature]
};
console.log(editFeature);
applyEdits(edits);
document.getElementById("polygonButton").enabled = true;
}
Any ideas?
Thanks in advance