topic Re: Editing Feature Layers in Esri JS API 4 in ArcGIS JavaScript Maps SDK Questions

Editing Feature Layers in Esri JS API 4

Anonymous User — Sun, 12 Dec 2021 05:27:51 GMT

Hey Team!

I'm struggling with what was an easy workflow in Esri's 3.x JS API -- editing features.

I've started with the Esri provided sample (ArcGIS API for JavaScript Sandbox) and run into a few hiccups that seemingly stem from the feature layer's source (i.e. adding an item from Portal rather than adding a feature layer directly (difference shown below):

 // add an editable featurelayer from portal
        Layer.fromPortalItem({
            portalItem: { // autocasts as new PortalItem()
              id: "511b97fc0d364367b127f8ba5c89ad13"
            }
          }).then(addLayer)
          .catch(handleLayerLoadError);

        setupEditing();
        setupView();

        function addLayer(layer) {
          featureLayer = layer;
          map.add(layer);
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

vs.

        var lineSample = new FeatureLayer({
          url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Water_Network/FeatureServer/3"
        });

        map.add(lineSample);
‍‍‍‍‍

It appears that the esri sample (first) uses the layer as a callback-promise subsequently and the layer has some 'implicit' properties that get passed, specifically the fields. When using a Feature Layer the only fields I'm seeing when I console.log the hitEvent results are the objectID and the created_user, while the esri sample has all of the layer's attributes.

If someone could point me in the right direction for how to properly define the Feature Layer's schema so that it can be passed into the editor-form, I'd be super appreciative!

Robert Scheitlin, GISP‌

Re: Editing Feature Layers in Esri JS API 4

Anonymous User — Mon, 13 Aug 2018 16:26:05 GMT

Think I made a simple mistake here and forgot to define the fields property when adding a Feature Layer...

Re: Editing Feature Layers in Esri JS API 4

Anonymous User — Mon, 13 Aug 2018 16:34:57 GMT

Nope -- setting the graphics nor the Feature Layer's schema doesn't seem to do the trick either...

Still just getting the OBJECTID and created_user fields as the returned fields...

Re: Editing Feature Layers in Esri JS API 4

RobertScheitlin__GISP — Sun, 12 Dec 2021 05:27:57 GMT

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;

        // feature edit area domNodes
        var editArea, attributeEditing, inputDescription,
          inputUserInfo, updateInstructionDiv;

        var map = new Map({
          basemap: "streets"
        });

        // initial extent of the view and home button
        var initialExtent = new Extent({
          xmin: -13045631,
          xmax: -13042853,
          ymin: 4034880,
          ymax: 4034881,
          spatialReference: 102100
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          extent: initialExtent
        });

        // add an editable featurelayer from portal
        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);
        }

        // *****************************************************
        // applyEdits promise resolved successfully
        // query the newly created feature from the featurelayer
        // set the editFeature object so that it can be used
        // to update its features.
        // *****************************************************
        function editResultsHandler(promise) {
          promise
            .then(function(editsResult) {
              var extractObjectId = function(result) {
                return result.objectId;
              };

              // get the objectId of the newly added feature
              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);
            });
        }

        // *****************************************************
        // listen to click event on the view
        // 1. select if there is an intersecting feature
        // 2. set the instance of editFeature
        // 3. editFeature is the feature to update or delete
        // *****************************************************
        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";
            }
          });
        });

        // *****************************************************
        // select Feature function
        // 1. Select the newly created feature on the view
        // 2. or select an existing feature when user click on it
        // 3. Symbolize the feature with cyan rectangle
        // *****************************************************
        function selectFeature(objectId) {
          // symbol for the selected feature on the view
          var selectionSymbol = {
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            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);
            }
          });
        }

        // *****************************************************
        // hide attributes update and delete part when necessary
        // *****************************************************
        function unselectFeature() {
          attributeEditing.style.display = "none";
          updateInstructionDiv.style.display = "block";

          inputDescription.value = null;
          inputUserInfo.value = null;
          view.graphics.removeAll();
        }

        // *****************************************************
        // add homeButton and expand widgets to UI
        // *****************************************************
        function setupView() {
          // set home buttone view point to initial extent
          var homeButton = new Home({
            view: view,
            viewpoint: new Viewpoint({
              targetGeometry: initialExtent
            })
          });
          view.ui.add(homeButton, "top-left");

          // expand widget
          editExpand = new Expand({
            expandIconClass: "esri-icon-edit",
            expandTooltip: "Expand Edit",
            expanded: true,
            view: view,
            content: editArea
          });
          view.ui.add(editExpand, "top-right");
        }

        // *****************************************************
        // set up for editing
        // *****************************************************
        function setupEditing() {
          // input boxes for the attribute editing
          editArea = dom.byId("editArea");
          updateInstructionDiv = dom.byId("updateInstructionDiv");
          attributeEditing = dom.byId("featureUpdateDiv");
          inputDescription = dom.byId("inputDescription");
          inputUserInfo = dom.byId("inputUserInfo");

          // *****************************************************
          // btnUpdate click event
          // update attributes of selected feature
          // *****************************************************
          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);
            }
          });

          // *****************************************************
          // btnAddFeature click event
          // create a new feature at the click location
          // *****************************************************
          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);

                // ui changes in response to creating a new feature
                // display feature update and delete portion of the edit area
                attributeEditing.style.display = "block";
                updateInstructionDiv.style.display = "none";
                dom.byId("viewDiv").style.cursor = "auto";
              } else {
                console.error("event.mapPoint is not defined");
              }
            });

            // change the view's mouse cursor once user selects
            // a new incident type to create
            dom.byId("viewDiv").style.cursor = "crosshair";
            editArea.style.cursor = "auto";
          });

          // *****************************************************
          // delete button click event. ApplyEdits is called
          // with the selected feature to be deleted
          // *****************************************************
          on(dom.byId("btnDelete"), "click", function() {
            var edits = {
              deleteFeatures: [editFeature]
            };
            applyEdits(edits);
          });

          // *****************************************************
          // watch for view LOD change. Display Feature editing
          // area when view.zoom level is 14 or higher
          //.catch hide the feature editing area
          // *****************************************************
          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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Editing Feature Layers in Esri JS API 4

Anonymous User — Mon, 13 Aug 2018 17:22:33 GMT

Ahhhhhhfffff course it does

Not sure what I was doing differently there -- it seems the promise-chain is predicated on something I was not paying attention to.

Slowly but surely getting better though!