Create Polygon Feature: Java Script

5995
20
Jump to solution
01-09-2020 11:27 PM
Vakhtang_Zubiashvili
Occasional Contributor III

Hi guys,

I am trying to use ArcGIS API for JavaScript Sandbox this sample to add polygon feature, i also use codes taking from here https://community.esri.com/thread/224031-how-to-create-a-polygon-js-api-49?commentID=811443&et=watch... from   Robert Scheitlin, GISP,   but can not combine this two sample to add polygon and update attributes. 

Thank you for your help

Here is a code samples i use (you can see them in links too):

// ***********************************************************
      // Call FeatureLayer.applyEdits() with specified params.
      // ***********************************************************
      function applyEdits(params) {
        featureLayer.applyEdits(params).then(function(editsResult) {
          // Get the objectId of the newly added feature.
          // Call selectFeature function to highlight the new feature.
          if (editsResult.addFeatureResults.length > 0) {
            const objectId = editsResult.addFeatureResults[0].objectId;
            //selectFeature(objectId);
          }
        })
// called when sketchViewModel's create-complete event is fired.
        function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: sketchViewModel.graphic.symbol,
            attributes: {}
          });

<!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.14</title>
    <link
      rel="stylesheet"
    />
    <script src="https://js.arcgis.com/4.14/"></script>
    <style>
      html,
      body,
      #viewDiv {
        padding0;
        margin0;
        height100%;
        width100%;
      }
      #formDiv {
        width100%;
      }
      .esri-item-list__scroller {
        overflow-yvisible;
      }
      .editArea-container {
        background#fff;
        line-height1.5em;
        overflowauto;
        padding12px 15px;
        width300px;
      }
      .list-heading {
        font-weightnormal;
        margin-top20px;
        margin-bottom10px;
        color#323232;
      }
      .or-wrap {
        background-color#e0e0e0;
        height1px;
        margin2em 0;
        overflowvisible;
      }
      .or-text {
        background#fff;
        line-height0;
        padding0 1em;
        positionrelative;
        bottom0.75em;
      }
      /* override default styles */
      .esri-feature-form {
        background#fff;
      }
      .esri-feature-templates {
        width256px;
      }
      .esri-feature-templates__section-header {
        displaynone;
      }
      .esri-feature-templates__section {
        box-shadownone;
      }
      .esri-feature-templates__scroller {
        max-height200px;
      }
    </style>
    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/layers/FeatureLayer",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Expand",
        "esri/widgets/FeatureForm",
        "esri/widgets/FeatureTemplates"
      ], function(
        Map,
        MapView,
        SketchViewModel,
        FeatureLayer,
        Graphic,
        GraphicsLayer,
        Expand,
        FeatureForm,
        FeatureTemplates
      ) {
        let editFeaturehighlight;
        const featureLayer = new FeatureLayer({
          url:
          title:"ქუჩების ფენა",
          outFields: ["*"],
          popupEnabled: false,
          id: "incidentsLayer"
        });     
        // GraphicsLayer to hold graphics created via sketch view model
      const graphicsLayer = new GraphicsLayer({
        id: "tempGraphics"
      });
        const map = new Map({
          basemap: "dark-gray",
          layers: [graphicsLayerfeatureLayer]
        });
        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [44.750241.725524],
          zoom: 12
        });
        //****************************-სიმბოლოები პოლიგონისთვის-***********************
        const pointSymbol = {
        type: "simple-marker"// autocasts as new SimpleMarkerSymbol()
        style: "square",
        color: "#8A2BE2",
        size: "16px",
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255255255],
          width: 3
        }
      };
      const polylineSymbol = {
        type: "simple-line"// autocasts as new SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      };

      const polygonSymbol = {
        type: "simple-fill"// autocasts as new SimpleFillSymbol()
        color: "red",
        style: "solid",
        outline: {
          color: "red",
          width: 1
        }
      };
        // New FeatureForm and set its layer to 'Incidents' FeatureLayer.
        // FeatureForm displays attributes of fields specified in fieldConfig.
        const featureForm = new FeatureForm({
          container: "formDiv",
          layer: featureLayer,
          fieldConfig: [
            {
              name: "Req_Code",
              label: "REQ კოდი"
            },
            {
              name: "abonentebis_raodenoba",
              label: "აბონენტების რაოდენობა"
            }
          ]
        });
        // Listen to the feature form's submit event.
        // Update feature attributes shown in the form.
        featureForm.on("submit"function() {
          if (editFeature) {
            // Grab updated attributes from the form.
            const updated = featureForm.getValues();
           // Loop through updated attributes and assign
            // the updated values to feature attributes.
            Object.keys(updated).forEach(function(name) {
              editFeature.attributes[name] = updated[name];
            });
            // Setup the applyEdits parameter with updates.
            const edits = {
              updateFeatures: [editFeature]
            };
            applyEditsToIncidents(edits);
            document.getElementById("viewDiv").style.cursor = "auto";
          }
        });
        // Check if the user clicked on the existing feature
        selectExistingFeature();
        // The FeatureTemplates widget uses the 'addTemplatesDiv'
        // element to display feature templates from incidentsLayer
        const templates = new FeatureTemplates({
          container: "addTemplatesDiv",
          layers: [featureLayer]
        });
        // Listen for when a template item is selected
        templates.on("select"function(evtTemplate) {
          // Access the template item's attributes from the event's
          // template prototype.
          attributes = evtTemplate.template.prototype.attributes;
          unselectFeature();
          document.getElementById("viewDiv").style.cursor = "crosshair";
          // With the selected template item, listen for the view's click event and create feature
          const handler = view.on("click"function(event) {
            // remove click event handler once user clicks on the view
            // to create a new feature
            handler.remove();
            event.stopPropagation();
            featureForm.feature = null;
            if (event.mapPoint) {
              point = event.mapPoint.clone();
              point.z = undefined;
              point.hasZ = false;
              // Create a new feature using one of the selected
              // template items.
              editFeature = new Graphic({
                geometry: point,
                attributes: {
                  IncidentType: attributes.IncidentType
                }
              });
              // Setup the applyEdits parameter with adds.
              const edits = {
                addFeatures: [editFeature]
              };
              applyEditsToIncidents(edits);
              document.getElementById("viewDiv").style.cursor = "auto";
            } else {
              console.error("event.mapPoint is not defined");
            }
          });
        });
        // Call FeatureLayer.applyEdits() with specified params.
        function applyEditsToIncidents(params) {
          // unselectFeature();
          featureLayer
            .applyEdits(params)
            .then(function(editsResult) {
              // Get the objectId of the newly added feature.
              // Call selectFeature function to highlight the new feature.
              if (
                editsResult.addFeatureResults.length > 0 ||
                editsResult.updateFeatureResults.length > 0
              ) {
                unselectFeature();
                let objectId;
                if (editsResult.addFeatureResults.length > 0) {
                  objectId = editsResult.addFeatureResults[0].objectId;
                } else {
                  featureForm.feature = null;
                  objectId = editsResult.updateFeatureResults[0].objectId;
                }
                selectFeature(objectId);
                if (addFeatureDiv.style.display === "block") {
                  toggleEditingDivs("none""block");
                }
              }
              // show FeatureTemplates if user deleted a feature
              else if (editsResult.deleteFeatureResults.length > 0) {
                toggleEditingDivs("block""none");
              }
            })
            .catch(function(error) {
              console.log("===============================================");
              console.error(
                "[ applyEdits ] FAILURE: ",
                error.code,
                error.name,
                error.message
              );
              console.log("error = "error);
            });
        }
        // Check if a user clicked on an incident feature.
        function selectExistingFeature() {
          view.on("click"function(event) {
            // clear previous feature selection
            unselectFeature();
            if (
              document.getElementById("viewDiv").style.cursor != "crosshair"
            ) {
              view.hitTest(event).then(function(response) {
                // If a user clicks on an incident feature, select the feature.
                if (response.results.length === 0) {
                  toggleEditingDivs("block""none");
                } else if (
                  response.results[0].graphic &&
                  response.results[0].graphic.layer.id == "incidentsLayer"
                ) {
                  if (addFeatureDiv.style.display === "block") {
                    toggleEditingDivs("none""block");
                  }
                  selectFeature(
                    response.results[0].graphic.attributes[
                      featureLayer.objectIdField
                    ]
                  );
                }
              });
            }
          });
        }
        // Highlights the clicked feature and display
        // the feature form with the incident's attributes.
        function selectFeature(objectId) {
          // query feature from the server
          featureLayer
            .queryFeatures({
              objectIds: [objectId],
              outFields: ["*"],
              returnGeometry: true
            })
            .then(function(results) {
              if (results.features.length > 0) {
                editFeature = results.features[0];
                // display the attributes of selected feature in the form
                featureForm.feature = editFeature;
                // highlight the feature on the view
                view.whenLayerView(editFeature.layer).then(function(layerView) {
                  highlight = layerView.highlight(editFeature);
                });
              }
            });
        }
        // Expand widget for the editArea div.
        const editExpand = new Expand({
          expandIconClass: "esri-icon-edit",
          expandTooltip: "Expand Edit",
          expanded: true,
          view: view,
          content: document.getElementById("editArea")
        });
        view.ui.add(editExpand"top-right");
        // input boxes for the attribute editing
        const addFeatureDiv = document.getElementById("addFeatureDiv");
        const attributeEditing = document.getElementById("featureUpdateDiv");
        // Controls visibility of addFeature or attributeEditing divs
        function toggleEditingDivs(addDivattributesDiv) {
          addFeatureDiv.style.display = addDiv;
          attributeEditing.style.display = attributesDiv;
          document.getElementById(
            "updateInstructionDiv"
          ).style.display = addDiv;
        }
        // Remove the feature highlight and remove attributes
        // from the feature form.
        function unselectFeature() {
          if (highlight) {
            highlight.remove();
          }
        }
        // Update attributes of the selected feature.
        document.getElementById("btnUpdate").onclick = function() {
          // Fires feature form's submit event.
          featureForm.submit();
        };
        // Delete the selected feature. ApplyEdits is called
        // with the selected feature to be deleted.
        document.getElementById("btnDelete").onclick = function() {
          // setup the applyEdits parameter with deletes.
          const edits = {
            deleteFeatures: [editFeature]
          };
          applyEditsToIncidents(edits);
          document.getElementById("viewDiv").style.cursor = "auto";
        };
      });
    </script>
  </head>
<body>
    <div id="editArea" class="editArea-container esri-widget--panel">
      <div id="addFeatureDiv" style="display:block;">
        <h3 class="list-heading">Report Incidents</h3>
        <ul style="font-size: 13px; padding-left: 1.5em;">
          <li>აირჩიეთ ფენა ჩამოათვალიდან</li>
          <li>დააწკაპეთ რუკაზე რომ დაამატოთ ახალი ობიექტი</li>
          <li>დაკავშირებული მონაცემების ატვირთვა</li>
          <li>დააწკაპეთ <i>მონაცემების ატვირთვა</i></li>
        </ul>
        <div id="addTemplatesDiv" style="background:#fff;"></div>
      </div>
      <div id="featureUpdateDiv" style="display:none; margin-top: 1em;">
        <h3 class="list-heading">შეიყვანეთ ინციდენტის ინფორმაცია</h3>
        <div id="attributeArea">
          <div id="formDiv"></div>
          <input
            type="button"
            class="esri-button"
            value="მონაცემების ატვირთვა"
            id="btnUpdate"   />
        </div>
        <br />
        <div id="deleteArea">
          <input
            type="button"
            class="esri-button"
            value="წაშალეთ ინციდენტი"
            id="btnDelete" />
        </div>
      </div>
      <div id="updateInstructionDiv" style="text-align:center; display:block">
        <p class="or-wrap"><span class="or-text">ან</span></p>
        <p id="selectHeader">მონიშნეთ ინციდენტი რომ წაშალოთ ან შეცვალოთ.</p>
      </div>
    </div>
    <div id="viewDiv"></div>
  </body>
</html>
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Vakhtang,

  You will need to check your ArcGIS Server logs to see what is failing on the server end then.

View solution in original post

20 Replies
RobertScheitlin__GISP
MVP Emeritus

Vakhtang,

  So far you have not even added in anything about the SketchViewModel, which is something you will need to be able to draw the polygon. Once the template is selected you can get the symbology from the selected template to set the SketchViewModel symbol.

0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor III

Dear Robert,

I added some changes you can see from line 244 to line 256, but still no success.

<!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.14</title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding0;
        margin0;
        height100%;
        width100%;
      }

      #formDiv {
        width100%;
      }

      .esri-item-list__scroller {
        overflow-yvisible;
      }

      .editArea-container {
        background#fff;
        line-height1.5em;
        overflowauto;
        padding12px 15px;
        width300px;
      }

      .list-heading {
        font-weightnormal;
        margin-top20px;
        margin-bottom10px;
        color#323232;
      }

      .or-wrap {
        background-color#e0e0e0;
        height1px;
        margin2em 0;
        overflowvisible;
      }

      .or-text {
        background#fff;
        line-height0;
        padding0 1em;
        positionrelative;
        bottom0.75em;
      }

      /* override default styles */
      .esri-feature-form {
        background#fff;
      }

      .esri-feature-templates {
        width256px;
      }

      .esri-feature-templates__section-header {
        displaynone;
      }

      .esri-feature-templates__section {
        box-shadownone;
      }

      .esri-feature-templates__scroller {
        max-height200px;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/layers/FeatureLayer",
        "esri/Graphic",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Expand",
        "esri/widgets/FeatureForm",
        "esri/widgets/FeatureTemplates"
      ], function(
        Map,
        MapView,
        SketchViewModel,
        FeatureLayer,
        Graphic,
        GraphicsLayer,
        Expand,
        FeatureForm,
        FeatureTemplates
      ) {
        let editFeaturehighlight;

        const featureLayer = new FeatureLayer({
          url:
            "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0",
          title:"ქუჩების ფენა",
          outFields: ["*"],
          popupEnabled: false,
          id: "incidentsLayer"
        });
       
        // GraphicsLayer to hold graphics created via sketch view model
      const graphicsLayer = new GraphicsLayer({
        id: "tempGraphics"
      });
       

        const map = new Map({
          basemap: "dark-gray",
          layers: [graphicsLayerfeatureLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [44.750241.725524],
          zoom: 12,
          highlightOptions: {
            color: "red"
          }
        });

        //****************************-სიმბოლოები პოლიგონისთვის-***********************
        var pointSymbol = {
        type: "simple-marker"// autocasts as new SimpleMarkerSymbol()
        style: "square",
        color: "#8A2BE2",
        size: "16px",
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255255255],
          width: 3
        }
      };

      var polylineSymbol = {
        type: "simple-line"// autocasts as new SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      };

      var polygonSymbol = {
        type: "simple-fill"// autocasts as new SimpleFillSymbol()
        color: "red",
        style: "solid",
        outline: {
          color: "red",
          width: 1
        }
      };

        // New FeatureForm and set its layer to 'Incidents' FeatureLayer.
        // FeatureForm displays attributes of fields specified in fieldConfig.
        const featureForm = new FeatureForm({
          container: "formDiv",
          layer: featureLayer,
          fieldConfig: [
            {
              name: "Req_Code",
              label: "REQ კოდი"
            },
            {
              name: "abonentebis_raodenoba",
              label: "აბონენტების რაოდენობა"
            }
          ]
        });
          
        // Listen to the feature form's submit event.
        // Update feature attributes shown in the form.
        featureForm.on("submit"function() {
          if (editFeature) {
            // Grab updated attributes from the form.
            const updated = featureForm.getValues();

            // Loop through updated attributes and assign
            // the updated values to feature attributes.
            Object.keys(updated).forEach(function(name) {
              editFeature.attributes[name] = updated[name];
            });

            // Setup the applyEdits parameter with updates.
            const edits = {
              updateFeatures: [editFeature]
            };
            applyEditsToIncidents(edits);
            document.getElementById("viewDiv").style.cursor = "auto";
          }
        });

        // Check if the user clicked on the existing feature
        selectExistingFeature();

        // The FeatureTemplates widget uses the 'addTemplatesDiv'
        // element to display feature templates from incidentsLayer
        const templates = new FeatureTemplates({
          container: "addTemplatesDiv",
          layers: [featureLayer]
        });

        // Listen for when a template item is selected
        templates.on("select"function(evtTemplate) {
          // Access the template item's attributes from the event's
          // template prototype.
          attributes = evtTemplate.template.prototype.attributes;
          unselectFeature();
          document.getElementById("viewDiv").style.cursor = "crosshair";

          // With the selected template item, listen for the view's click event and create feature
          const handler = view.on("click"function(event) {
            // remove click event handler once user clicks on the view
            // to create a new feature
            handler.remove();
            event.stopPropagation();
            featureForm.feature = null;


          var sketchViewModel = new SketchViewModel({
          view,
          layer: graphicsLayer,
          pointSymbol,
          polylineSymbol,
          polygonSymbol
        });
        setUpClickHandler();

            if (event.mapPoint) {
              point = event.mapPoint.clone();
              point.z = undefined;
              point.hasZ = false;

              // Create a new feature using one of the selected
              // template items.
              function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: sketchViewModel.graphic.symbol,
            attributes: {
              IncidentType: attributes.IncidentType
            }
          });
          graphicsLayer.add(graphic);

               const edits = { //Fire the addFeatures function using the completed graphic
              addFeatures: [graphic]
              };
              applyEdits(edits);
            
            console.log(graphic);
        }
              applyEditsToIncidents(edits);
              document.getElementById("viewDiv").style.cursor = "auto";
            } else {
              console.error("event.mapPoint is not defined");
            }
          });
        });

        // Call FeatureLayer.applyEdits() with specified params.
        function applyEditsToIncidents(params) {
          // unselectFeature();
          featureLayer
            .applyEdits(params)
            .then(function(editsResult) {
              // Get the objectId of the newly added feature.
              // Call selectFeature function to highlight the new feature.
              if (
                editsResult.addFeatureResults.length > 0 ||
                editsResult.updateFeatureResults.length > 0
              ) {
                unselectFeature();
                let objectId;
                if (editsResult.addFeatureResults.length > 0) {
                  objectId = editsResult.addFeatureResults[0].objectId;
                } else {
                  featureForm.feature = null;
                  objectId = editsResult.updateFeatureResults[0].objectId;
                }
                selectFeature(objectId);
                if (addFeatureDiv.style.display === "block") {
                  toggleEditingDivs("none""block");
                }
              }
              // show FeatureTemplates if user deleted a feature
              else if (editsResult.deleteFeatureResults.length > 0) {
                toggleEditingDivs("block""none");
              }
            })
            .catch(function(error) {
              console.log("===============================================");
              console.error(
                "[ applyEdits ] FAILURE: ",
                error.code,
                error.name,
                error.message
              );
              console.log("error = "error);
            });
        }

        // Check if a user clicked on an incident feature.
        function selectExistingFeature() {
          view.on("click"function(event) {
            // clear previous feature selection
            unselectFeature();
            if (
              document.getElementById("viewDiv").style.cursor != "crosshair"
            ) {
              view.hitTest(event).then(function(response) {
                // If a user clicks on an incident feature, select the feature.
                if (response.results.length === 0) {
                  toggleEditingDivs("block""none");
                } else if (
                  response.results[0].graphic &&
                  response.results[0].graphic.layer.id == "incidentsLayer"
                ) {
                  if (addFeatureDiv.style.display === "block") {
                    toggleEditingDivs("none""block");
                  }
                  selectFeature(
                    response.results[0].graphic.attributes[
                      featureLayer.objectIdField
                    ]
                  );
                }
              });
            }
          });
        }

        // Highlights the clicked feature and display
        // the feature form with the incident's attributes.
        function selectFeature(objectId) {
          // query feature from the server
          featureLayer
            .queryFeatures({
              objectIds: [objectId],
              outFields: ["*"],
              returnGeometry: true
            })
            .then(function(results) {
              if (results.features.length > 0) {
                editFeature = results.features[0];

                // display the attributes of selected feature in the form
                featureForm.feature = editFeature;

                // highlight the feature on the view
                view.whenLayerView(editFeature.layer).then(function(layerView) {
                  highlight = layerView.highlight(editFeature);
                });
              }
            });
        }

        // Expand widget for the editArea div.
        const editExpand = new Expand({
          expandIconClass: "esri-icon-edit",
          expandTooltip: "Expand Edit",
          expanded: true,
          view: view,
          content: document.getElementById("editArea")
        });

        view.ui.add(editExpand"top-right");
        // input boxes for the attribute editing
        const addFeatureDiv = document.getElementById("addFeatureDiv");
        const attributeEditing = document.getElementById("featureUpdateDiv");

        // Controls visibility of addFeature or attributeEditing divs
        function toggleEditingDivs(addDivattributesDiv) {
          addFeatureDiv.style.display = addDiv;
          attributeEditing.style.display = attributesDiv;

          document.getElementById(
            "updateInstructionDiv"
          ).style.display = addDiv;
        }

        // Remove the feature highlight and remove attributes
        // from the feature form.
        function unselectFeature() {
          if (highlight) {
            highlight.remove();
          }
        }

        // Update attributes of the selected feature.
        document.getElementById("btnUpdate").onclick = function() {
          // Fires feature form's submit event.
          featureForm.submit();
        };

        // Delete the selected feature. ApplyEdits is called
        // with the selected feature to be deleted.
        document.getElementById("btnDelete").onclick = function() {
          // setup the applyEdits parameter with deletes.
          const edits = {
            deleteFeatures: [editFeature]
          };
          applyEditsToIncidents(edits);
          document.getElementById("viewDiv").style.cursor = "auto";
        };
      });

    </script>
  </head>

  <body>
    <div id="editArea" class="editArea-container esri-widget--panel">
      <div id="addFeatureDiv" style="display:block;">
        <h3 class="list-heading">Report Incidents</h3>
        <ul style="font-size: 13px; padding-left: 1.5em;">
          <li>აირჩიეთ ფენა ჩამოათვალიდან</li>
          <li>დააწკაპეთ რუკაზე რომ დაამატოთ ახალი ობიექტი</li>
          <li>დაკავშირებული მონაცემების ატვირთვა</li>
          <li>დააწკაპეთ <i>მონაცემების ატვირთვა</i></li>
        </ul>
        <div id="addTemplatesDiv" style="background:#fff;"></div>
      </div>

      <div id="featureUpdateDiv" style="display:none; margin-top: 1em;">
        <h3 class="list-heading">შეიყვანეთ ინციდენტის ინფორმაცია</h3>
        <div id="attributeArea">
          <div id="formDiv"></div>
          <input
            type="button"
            class="esri-button"
            value="მონაცემების ატვირთვა"
            id="btnUpdate"
          />
        </div>
        <br />
        <div id="deleteArea">
          <input
            type="button"
            class="esri-button"
            value="წაშალეთ ინციდენტი"
            id="btnDelete"
          />
        </div>
      </div>

      <div id="updateInstructionDiv" style="text-align:center; display:block">
        <p class="or-wrap"><span class="or-text">ან</span></p>
        <p id="selectHeader">მონიშნეთ ინციდენტი რომ წაშალოთ ან შეცვალოთ.</p>
      </div>
    </div>
    <div id="viewDiv"></div>
  </body>
</html>
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Vakhtang,

   So you are still not understanding the workflow of the code you are trying to change.

The code is still focusing on single point clicks (line 10). What I believe you need to do is after the template is clicked then create the sketchViewModel. Then add the create-complete event listener to the sketchViewModel and get the models geometry to use in your new graphic and the attributes from the template selected.

        // Listen for when a template item is selected
        templates.on("select", function(evtTemplate) {
          // Access the template item's attributes from the event's
          // template prototype.
          attributes = evtTemplate.template.prototype.attributes;
          unselectFeature();
          document.getElementById("viewDiv").style.cursor = "crosshair";

          // With the selected template item, listen for the view's click event and create feature
          const handler = view.on("click", function(event) {
            // remove click event handler once user clicks on the view
            // to create a new feature
            handler.remove();
            event.stopPropagation();
            featureForm.feature = null;
 


          var sketchViewModel = new SketchViewModel({
          view,
          layer: graphicsLayer,
          pointSymbol,
          polylineSymbol,
          polygonSymbol
        });
        setUpClickHandler();
 

            if (event.mapPoint) {
              point = event.mapPoint.clone();
              point.z = undefined;
              point.hasZ = false;

              // Create a new feature using one of the selected
              // template items.
              function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: sketchViewModel.graphic.symbol,
            attributes: {
              IncidentType: attributes.IncidentType
            }
          });
          graphicsLayer.add(graphic);

               const edits = { //Fire the addFeatures function using the completed graphic
              addFeatures: [graphic]
              };
              applyEdits(edits);
            
            console.log(graphic);
        }
              applyEditsToIncidents(edits);
              document.getElementById("viewDiv").style.cursor = "auto";
            } else {
              console.error("event.mapPoint is not defined");
            }
          });
        });
0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor III

Robert,

I tried to follow your suggestion, add some part of code to add just polygon, but i stacked

// Listen for when a template item is selected
        templates.on("select"function(evtTemplate) {
          // Access the template item's attributes from the event's
          // template prototype.
          attributes = evtTemplate.template.prototype.attributes;
          unselectFeature();
          document.getElementById("viewDiv").style.cursor = "crosshair";
          // With the selected template item, listen for the view's click event and create feature
          const handler = view.on("click"function(event) {
            var sketchViewModel = new SketchViewModel({
               view,
               layer: graphicsLayer,
               pointSymbol,
               polylineSymbol,
               polygonSymbol
              });       
              setUpClickHandler();
 // ***********************************************************
      // Call FeatureLayer.applyEdits() with specified params.    ეს მონაკვეთი არ მუშაობს
      // ***********************************************************
      function applyEdits(params) {
        featureLayer.applyEdits(params).then(function(editsResult) {
          // Get the objectId of the newly added feature.
          // Call selectFeature function to highlight the new feature.
          if (editsResult.addFeatureResults.length > 0) {
            const objectId = editsResult.addFeatureResults[0].objectId;
            //selectFeature(objectId);
          }
        })
        .catch(function(error) {
          console.log("===============================================");
          console.error("[ applyEdits ] FAILURE: "error.codeerror.name,
            error.message);
          console.log("error = "error);
        });
      }
        // Listen to create-complete event to add a newly created graphic to view
        sketchViewModel.on("create-complete"addGraphic);
        // Listen the sketchViewModel's update-complete and update-cancel events
        sketchViewModel.on("update-complete"updateGraphic);
        sketchViewModel.on("update-cancel"updateGraphic);
        // აქედან ვიწყებ ხვალ=====================================================
        // called when sketchViewModel's create-complete event is fired.
        function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: sketchViewModel.graphic.symbol,
            attributes: {}
          });
          graphicsLayer.add(graphic);
               const edits = { //Fire the addFeatures function using the completed graphic
              addFeatures: [graphic]
              };
              applyEdits(edits);
            console.log(graphic);
        }
        // Runs when sketchViewModel's update-complete or update-cancel
        // events are fired.
        function updateGraphic(event) {
          // Create a new graphic and set its geometry event.geometry
          var graphic = new Graphic({
            geometry: event.geometry,
            symbol: editGraphic.symbol
          });
          graphicsLayer.add(graphic);
          // set the editGraphic to null update is complete or cancelled.
          editGraphic = null;
        }
        // set up logic to handle geometry update and reflect the update on "graphicsLayer"
        function setUpClickHandler() {
          view.on("click"function (event) {
            view.hitTest(event).then(function (response) {
              var results = response.results;
              if (results.length > 0) {
                for (var i = 0i < results.lengthi++) {
                  // Check if we're already editing a graphic
                  if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") {
                    // Save a reference to the graphic we intend to update
                    editGraphic = results[i].graphic;
                    // Remove the graphic from the GraphicsLayer
                    // Sketch will handle displaying the graphic while being updated
                    graphicsLayer.remove(editGraphic);
                    sketchViewModel.update(editGraphic);
                    break;
                  }
                }
              }
            });
          });
        }
     });
    });
  
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Vakhtang,

   You were still leaving in the point creating (i.e. the setUpClickHandler and const handler = view.on("click", function(event) {) portions. This what I was trying to say last time. Try and follow the code logic. Here is a quick edit of the code (unverified) that you can start with. Notice the focus is on selecting a template and then creating the sketchViewModel once the template is selected then on sketch completion you create the graphic and apply the edits. I did not include anything about the feature form where you can fill the attributes based on a form though. Right now it would just take the templates default attributes for the selected template.

var sketchViewModel, attributes;
        // Listen for when a template item is selected
        templates.on("select", function(evtTemplate) {
          // Access the template item's attributes from the event's
          // template prototype.
          attributes = evtTemplate.template.prototype.attributes;
          sketchViewModel = new SketchViewModel({
            view,
            layer: graphicsLayer,
            pointSymbol,
            polylineSymbol,
            polygonSymbol
          });
          sketchViewModel.on("create-complete", addGraphic);
        });

        function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: sketchViewModel.graphic.symbol,
            attributes: attributes
          });
          graphicsLayer.add(graphic);
          const edits = { 
            addFeatures: [graphic]
          };
          applyEdits(edits);
          console.log(graphic);
        }

        function applyEdits(params) {
          featureLayer.applyEdits(params).then(function(editsResult) {
            // Get the objectId of the newly added feature.
            // Call selectFeature function to highlight the new feature.
            if (editsResult.addFeatureResults.length > 0) {
              const objectId = editsResult.addFeatureResults[0].objectId;
            }
          })
          .catch(function(error) {
            console.log("===============================================");
            console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
              error.message);
            console.log("error = ", error);
          });
        }
Vakhtang_Zubiashvili
Occasional Contributor III

Dear Robert,

I changed you code using 4.14 version of create sketch polygon, now i can draw polygon click on template in form, but can't update in featureLayer, it seems everything ok, but does not work:

const templates = new FeatureTemplates({
          container: "addTemplatesDiv",
          layers: [featureLayer]
        });


        
        // Listen for when a template item is selected
        templates.on("select", function(evtTemplate) {
          var sketchVM = new SketchViewModel({
            view,
            layer: graphicsLayer,
            layer: graphicsLayer,
            pointSymbol,
            polylineSymbol,
            polygonSymbol
          });
          

         
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
sketchVM.on("create-complete", addGraphic);

function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: event.geometry,
            symbol: sketchVM.graphic.symbol,
            attributes: attributes
          });
          
          graphicsLayer.add(graphic);

          const edits = { 
            addFeatures: [graphic]
          };
          applyEdits(edits);
          console.log(graphic);
        }
        function applyEdits(params) {
          featureLayer.applyEdits(params).then(function(editsResult) {
            // Get the objectId of the newly added feature.
            // Call selectFeature function to highlight the new feature.
            if (editsResult.addFeatureResults.length > 0) {
              const objectId = editsResult.addFeatureResults[0].objectId;
            }
          })
          .catch(function(error) {
            console.log("===============================================");
            console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
              error.message);
            console.log("error = ", error);
          });
        }
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
UndralBatsukh
Esri Regular Contributor

Hi there, 

You should use Editor widget to create features and update their attributes in your layer.  You can find editor samples here

-Undral

0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor III

Thanks Undral, but i need to use custom Form and also want to see how code works itself for future purposes.

0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor III

Hi again,

I have changed code, Robert Scheitlin, GISP‌ helped me. I still try to configure code, use code Robert gave me and code we have in template ArcGIS API for JavaScript Sandbox.

Now i can click on template, draw polygon sketch, but it does not apply edits to Featurelayer and gives error. Se images and code: 

 templates.on("select", function(evtTemplate) {
    // Access the template item's attributes from the event's
    // template prototype.
    attributes = evtTemplate.template.prototype.attributes;
    unselectFeature();
    document.getElementById("viewDiv").style.cursor = "crosshair";

    // With the selected template item, listen for the view's click event and create feature
    const handler = view.on("click", function(event) {
      // remove click event handler once user clicks on the view
      // to create a new feature
      handler.remove();
      event.stopPropagation();
      featureForm.feature = null;

      var sketchVM = new SketchViewModel({
        view,
        layer: graphicsLayer,
        pointSymbol,
        polylineSymbol,
        polygonSymbol
      });      
      // Call create method to create a polygon with Click.
       sketchVM.create("polygon", {mode: "click"});
   // Create a new feature using one of the selected
        // template items.
        editFeature = new Graphic({
            geometry: event.geometry,
            symbol: sketchVM.graphic.symbol,
            attributes: {
            IncidentType: attributes.IncidentType
          }
        });
        // Setup the applyEdits parameter with adds.
        const edits = {
          addFeatures: [editFeature]
        };
        applyEditsToIncidents(edits);
        document.getElementById("viewDiv").style.cursor = "auto";     
    });
  });
   // Call FeatureLayer.applyEdits() with specified params.
   function applyEditsToIncidents(params) {
          // unselectFeature();
          featureLayer
            .applyEdits(params)
            .then(function(editsResult) {
              // Get the objectId of the newly added feature.
              // Call selectFeature function to highlight the new feature.
              if (
                editsResult.addFeatureResults.length > 0 ||
                editsResult.updateFeatureResults.length > 0
              ) {
                unselectFeature();
                let objectId;
                if (editsResult.addFeatureResults.length > 0) {
                  objectId = editsResult.addFeatureResults[0].objectId;
                } else {
                  featureForm.feature = null;
                  objectId = editsResult.updateFeatureResults[0].objectId;
                }
                selectFeature(objectId);
                if (addFeatureDiv.style.display === "block") {
                  toggleEditingDivs("none", "block");
                }
              }
              // show FeatureTemplates if user deleted a feature
              else if (editsResult.deleteFeatureResults.length > 0) {
                toggleEditingDivs("block", "none");
              }
            })
            .catch(function(error) {
              console.log("===============================================");
              console.error(
                "[ applyEdits ] FAILURE: ",
                error.code,
                error.name,
                error.message
              );
              console.log("error = ", error);
            });
        }
0 Kudos