AnsweredAssumed Answered

applyEdits() with a button rather than create-complete JS API 4.9

Question asked by SimonWebster.QFES on Nov 19, 2018
Latest reply on Nov 26, 2018 by SimonWebster.QFES

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: 

           // 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.
                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 = { //Fire the addFeatures function using the completed graphic
                   addFeatures: [graphic]
                };

                console.log(currentSketch);
                applyEdits(edits);

                document.getElementById("polygonButton").disabled = true; //disable new feature button to prevent duplicates

                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. 

            //Try to catch the form submit function
            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
                    }
                });
                //graphicsLayer.add(graphic)
                const edits = { //Fire the addFeatures function using the completed graphic
                    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. 

 

           // *****************************************************
            // Delete button click event. 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]
                };
                console.log(editFeature);
                applyEdits(edits);
                document.getElementById("polygonButton").enabled = true; //disable new feature button to prevent duplicates
            }

 

Any ideas?

 

Thanks in advance

Outcomes