applyEdits not working

119
6
Jump to solution
a week ago
New Contributor II

Hello Everyone!

I am trying to update the existing value of "PCR_NBR" in featurelayer by looking at the sample code of ArcGIS API for JS using apply edits, but its not working. In this code I am just trying to replace the value by 20. Also is it possible to run loop to have conditional statement, for eg: if PCR_NBR is less than 50, replace it by 20, if it is more than 50, replace it by 100?

Thanks in advance!

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
      Update Feature Attributes | Sample | ArcGIS API for JavaScript 4.18
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
      html,
      body,
      #viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #info {
        padding: 14px;
        border-radius: 5px;
      }

      #update {
        padding: 6px;
      }

      #form {
        background: #fff;
      }

      /* replaces esri-widget--panel */
      .scroller {
        overflow-x: hidden;
        overflow-y: auto;
      }

    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/FeatureForm",
        "esri/layers/FeatureLayer",
        "esri/form/FormTemplate"
      ], function(Map, MapView, FeatureForm, FeatureLayer, FormTemplate) {
        let highlight, editFeature;
        var popupMajorRoads = {
          title: "Pavement Condition Rating(PCR): " + "{PCR_NBR}",
          content: [{
            type: "fields",
            fieldInfos: [{
                fieldName: "PCR_YEAR",
                label: "PCR Year",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "PCR_NBR",
                label: "Pavement Condition (PCR)",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "NLFID",
                label: "NLFID",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "JURISDICTI",
                label: "Juristiction",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "ROUTE_TYPE",
                label: "Route Type",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "ROUTE_NBR",
                label: "Route Number",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "DIRECTION_",
                label: "Direction",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              },
              {
                fieldName: "LANES",
                label: "Number of Lanes",
                isEditable: true,
                tooltip: "",
                visible: true,
                format: null,
                stringFieldOption: "text-box"
              }
            ]
          }]
        };
        const featureLayer = new FeatureLayer({
          portalItem: {
            id: "8108b08e5ec643388380599f82e84b96"
          },
          outFields: ["*"],
          visible: true,
          popupTemplate: popupMajorRoads
        });

        const map = new Map({
          basemap: "topo-vector",
          layers: [featureLayer]
        });

        let view = new MapView({
          map: map,
          container: "viewDiv",
          center: [-82.9988, 39.9612],
          zoom: 10,

        });
        featureLayer.queryFeatures({
            outFields: ["*"],
            returnGeometry: true
          })
          .then(function(results) {
            if (results.features.length > 0) {
              editFeature = results.features[0];
              editFeature.attributes.PCR_NBR = 20;
            }
          });

        const edits = {
          updateFeatures: [editFeature]
        };
        featureLayer.applyEdits(edits);

      });

    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="info" class="esri-widget">
    </div>

  </body>

</html>

 

 

Reply
0 Kudos
1 Solution

Accepted Solutions
MVP Honored Contributor

As for doing it in a loop, try this (untested).

 

editFeatures = results.features;
editFeatures.forEach(editFeature => {
  if (editFeature.attributes.PCR_NBR < 50) {
    editFeature.attributes.PCR_NBR = 20;
  } else {
    editFeature.attributes.PCR_NBR = 100;
  }
});
const edits = {
  updateFeatures: editFeatures
};
featureLayer.applyEdits(edits);

 

 

 

View solution in original post

6 Replies
MVP Regular Contributor

Starting with the simplest things, have you verified the PortalItem is hosted as a Feature Service with Update capabilities? Are you getting an error in the console?

New Contributor II

@BlakeTerhuneThanks for your reply. I am not sure if I understood your question properly or not. I just uploaded a shapefile to arcgis for developers and got portalid from there. I didn't add any additional settings to it. Also, I don't want this code to make changes to the original data in server, I just want to make temporary change on workspace only.

Reply
0 Kudos
MVP Regular Contributor

No worries. Looks like you were able to get to the root of the problem. Carry on!

MVP Honored Contributor

You are calling applyEdits outside the queryFeatures function, meaning it's trying to apply the edits before the query is finished. Try moving it inside the "then" function

 

featureLayer.queryFeatures({
  outFields: ["*"],
  returnGeometry: true
})
  .then(function(results) {
    if (results.features.length > 0) {
    editFeature = results.features[0];
    editFeature.attributes.PCR_NBR = 20;
    const edits = {
      updateFeatures: [editFeature]
    };
    featureLayer.applyEdits(edits);
  }
});

 

 

MVP Honored Contributor

As for doing it in a loop, try this (untested).

 

editFeatures = results.features;
editFeatures.forEach(editFeature => {
  if (editFeature.attributes.PCR_NBR < 50) {
    editFeature.attributes.PCR_NBR = 20;
  } else {
    editFeature.attributes.PCR_NBR = 100;
  }
});
const edits = {
  updateFeatures: editFeatures
};
featureLayer.applyEdits(edits);

 

 

 

View solution in original post

New Contributor II

Thank you very much @KenBuja, it works. One more question: once we update the attribute value, shouldn't the value in popup window update by itself? Also the value in featuretable widget (assuming we have it in this code)?

Reply
0 Kudos