Andrew this works fine for me:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Update FeatureLayer using applyEdits() - 4.8</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.editArea-container {
background: #fff;
font-family: "Avenir Next W00", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.5em;
overflow: auto;
padding: 12px 15px;
width: 300px;
}
.edit-button:hover,
.edit-button:focus {
background-color: #e4e4e4;
}
.inputInfo {
font-size: 12px;
height: 32px;
margin-bottom: 6px;
padding: 0 6px;
width: 100%;
}
.list-heading {
font-weight: normal;
margin-top: 20px;
margin-bottom: 10px;
color: #323232;
}
.edit-button {
font-size: 14px;
height: 32px;
margin-top: 10px;
width: 100%;
background-color: transparent;
border: 1px solid #0079c1;
color: #0079c1;
}
.or-wrap {
background-color: #e0e0e0;
height: 1px;
margin: 2em 0;
overflow: visible;
}
.or-text {
background: #fff;
line-height: 0;
padding: 0 1em;
position: relative;
top: -.75em;
}
input:invalid {
border: 1px solid red;
}
input:valid {
border: 1px solid green;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/Layer",
"esri/layers/FeatureLayer",
"esri/Graphic",
"esri/widgets/Expand",
"esri/widgets/Home",
"esri/geometry/Extent",
"esri/Viewpoint",
"esri/core/watchUtils",
"dojo/on",
"dojo/dom",
"dojo/domReady!"
],
function(
Map, SceneView, Layer, FeatureLayer, Graphic, Expand,
Home, Extent, Viewpoint, watchUtils,
on, dom
) {
var featureLayer, editExpand;
var editArea, attributeEditing, inputDescription,
inputUserInfo, updateInstructionDiv;
var map = new Map({
basemap: "streets"
});
var initialExtent = new Extent({
xmin: -13045631,
xmax: -13042853,
ymin: 4034880,
ymax: 4034881,
spatialReference: 102100
});
var view = new SceneView({
container: "viewDiv",
map: map,
extent: initialExtent
});
layer = new FeatureLayer({
url: "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/incidents_report/FeatureServer/0",
outFields: ["*"]
});
addLayer(layer);
setupEditing();
setupView();
function addLayer(layer) {
featureLayer = layer;
map.add(layer);
}
function applyEdits(params) {
unselectFeature();
var promise = featureLayer.applyEdits(params);
editResultsHandler(promise);
}
function editResultsHandler(promise) {
promise
.then(function(editsResult) {
var extractObjectId = function(result) {
return result.objectId;
};
if (editsResult.addFeatureResults.length > 0) {
var adds = editsResult.addFeatureResults.map(
extractObjectId);
newIncidentId = adds[0];
selectFeature(newIncidentId);
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
view.on("click", function(event) {
unselectFeature();
view.hitTest(event).then(function(response) {
if (response.results.length > 0 && response.results[0].graphic) {
var feature = response.results[0].graphic;
selectFeature(feature.attributes[featureLayer.objectIdField]);
inputDescription.value = feature.attributes[
"Incident_Desc"];
inputUserInfo.value = feature.attributes[
"Incident_Address"];
attributeEditing.style.display = "block";
updateInstructionDiv.style.display = "none";
}
});
});
function selectFeature(objectId) {
var selectionSymbol = {
type: "simple-marker",
color: [0, 0, 0, 0],
style: "square",
size: "40px",
outline: {
color: [0, 255, 255, 1],
width: "3px"
}
};
var query = featureLayer.createQuery();
query.where = featureLayer.objectIdField + " = " + objectId;
featureLayer.queryFeatures(query).then(function(results) {
if (results.features.length > 0) {
editFeature = results.features[0];
editFeature.symbol = selectionSymbol;
view.graphics.add(editFeature);
}
});
}
function unselectFeature() {
attributeEditing.style.display = "none";
updateInstructionDiv.style.display = "block";
inputDescription.value = null;
inputUserInfo.value = null;
view.graphics.removeAll();
}
function setupView() {
var homeButton = new Home({
view: view,
viewpoint: new Viewpoint({
targetGeometry: initialExtent
})
});
view.ui.add(homeButton, "top-left");
editExpand = new Expand({
expandIconClass: "esri-icon-edit",
expandTooltip: "Expand Edit",
expanded: true,
view: view,
content: editArea
});
view.ui.add(editExpand, "top-right");
}
function setupEditing() {
editArea = dom.byId("editArea");
updateInstructionDiv = dom.byId("updateInstructionDiv");
attributeEditing = dom.byId("featureUpdateDiv");
inputDescription = dom.byId("inputDescription");
inputUserInfo = dom.byId("inputUserInfo");
on(dom.byId("btnUpdate"), "click", function(event) {
if (editFeature) {
editFeature.attributes["Incident_Desc"] = inputDescription.value;
editFeature.attributes["Incident_Address"] = inputUserInfo.value;
var edits = {
updateFeatures: [editFeature]
};
applyEdits(edits);
}
});
on(dom.byId("btnAddFeature"), "click", function() {
unselectFeature();
on.once(view, "click", function(event) {
event.stopPropagation();
if (event.mapPoint) {
point = event.mapPoint.clone();
point.z = undefined;
point.hasZ = false;
newIncident = new Graphic({
geometry: point,
attributes: {}
});
var edits = {
addFeatures: [newIncident]
};
applyEdits(edits);
attributeEditing.style.display = "block";
updateInstructionDiv.style.display = "none";
dom.byId("viewDiv").style.cursor = "auto";
} else {
console.error("event.mapPoint is not defined");
}
});
dom.byId("viewDiv").style.cursor = "crosshair";
editArea.style.cursor = "auto";
});
on(dom.byId("btnDelete"), "click", function() {
var edits = {
deleteFeatures: [editFeature]
};
applyEdits(edits);
});
view.when(function() {
watchUtils.whenTrue(view, "stationary", function() {
if (editExpand) {
if (view.zoom <= 14) {
editExpand.domNode.style.display = "none";
} else {
editExpand.domNode.style.display = "block";
}
}
});
});
}
function handleLayerLoadError(error) {
console.log("Layer failed to load: ", error);
}
});
</script>
</head>
<body>
<div id="editArea" class="editArea-container">
<div id="addFeatureDiv">
<h3 class="list-heading">Report Incidents</h3>
<ul style="font-size: 13px; padding-left: 1.5em;">
<li>Click Add incident button</li>
<li>Click on the map to create the incident</li>
</ul>
<input type="button" class="edit-button" value="Add incident" id="btnAddFeature">
</div>
<div id="updateInstructionDiv" style="text-align:center">
<p class="or-wrap">
<span class="or-text">Or</span>
</p>
<p>Select an incident to edit or delete.</p>
</div>
<div id="featureUpdateDiv" style="display:none; margin-top: 1em;">
<h3 class="list-heading">Enter the incident information</h3>
<div id="attributeArea">
<label for="inputDescription">Description:</label>
<input class="inputInfo" type="text" id="inputDescription" placeHolder="Enter description">
<br>
<label for="inputUserInfo">Contact:</label>
<input class="inputInfo" required type="email" name="email" id="inputUserInfo" pattern="[^ @]*@[^ @]*"
placeHolder="Enter email address">
<br>
<input type="button" class="edit-button" value="Update incident info" id="btnUpdate">
</div>
<div id="deleteArea">
<input type="button" class="edit-button" value="Delete incident" id="btnDelete">
</div>
</div>
</div>
<div id="viewDiv"></div>
</body>
</html>