Access featureLayers on click or in dropdown List

1010
7
Jump to solution
08-20-2020 12:29 AM
Vakhtang_Zubiashvili
Occasional Contributor II

Hello there, Robert Scheitlin, GISP

Any tips for my problem please, if you have any code example and share i will appreciate, here is what i do: i have three editable layer on my webmap and custom HTML form for editing, in form i have dropdown list for my three layer to chose which of them to edit, but i can not edit my layers added on map, using drop down i create additional featurelayer   for editing and then edit it. 

Questionis: how can i use my layers which i have on map to edit without creating new layer? using drop down or just clicking on layer on map.

Code:

 $(function xaxvi() {
          $("#DropSearch").on("change", function () {
            switch ($(this).val()) {
              case "1":
                $("#divText").html("");
                break;
              case "Wa":
                $("#divText").html("localhost:6080/arcgis/rest/services/test/aragvi_service/FeatureServer/2");
                break;
              case "urduli":
                $("#divText").html("localhost:6080/arcgis/rest/services/test/aragvi_service/FeatureServer/4");
                break;
              case "vantuzi":
                $("#divText").html("localhost:6080/arcgis/rest/services/test/aragvi_service/FeatureServer/3");  
    
              }
            
            console.log($("#divText").html()) // აქ გავუშვა ლინკი
            //console.log($(this).val())   // აქ გავუშვა Expression 

            lrpopup  = {
              title: "ჭა კამერა",
              lastEditInfoEnabled: false,
      content: [{
         type: "fields",
        
         fieldInfos: [{
           fieldName: "mdgomareoba",
            label: "მდგომარეობა",
           visible: true
         }
         ]
     }],
     actions: [measureThisAction, openFileList, uploadFileList, saveFileList]
            }
            var myURLO = $("#divText").html()
               const lr = new FeatureLayer({url: myURLO,
                outFields: ["*"],
                listMode: "hide",
                popupEnabled: true,
                popupTemplate: lrpopup,
                id: "xaxvi",
               
                symbol:{
                 type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                 style: "square",
                 color: "#8A2BE2",
                 size: "16px",
                 outline: { // autocasts as new SimpleLineSymbol()
                   color: [255, 255, 255],
                   width: 3
                    }
                  },
                })
               lr.opacity = 0;
               map.add(lr);
                  
            const featureForm = new FeatureForm({
              container: "formDiv",
              layer: lr,
              fieldConfig: [
                {
                  name: "komentari",
                  label: "komentari",      
                }
              ]
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks in advance.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtang,

  Your code logic is pretty mixed up. You have to many view click event handlers. Se my comments in the code below.

view.on("click", function(event) {
 view.hitTest(event)
  .then(getGraphics);
})
function getGraphics(response) {
        var graphic = response.results[0].graphic;
//right here you have the feature that was clicked
//so why are you not setting the FeatureForm feature attribute?
        var attributes = graphic.attributes;
        var ido = graphic.layer;
            console.log(ido)

            const featureForm = new FeatureForm({
              container: "formDiv",
              layer: ido,
              fieldConfig: [
                {
                  name: "komentari",
                  label:"komentari",        
                }
              ]
            });
//Not sure what this next line is for
            document.getElementById(formDiv)

//What you need is something like this.
featureForm.feature = graphic;

Forget your whole selectExistingFeature where you add another view click handler (this is the reason you have to click twice).

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

If the layers are added to the webmap using the "FeatureServer" url from the start then there is no need to add then as a featurelayer again. Just get a reference to the layer object from the map layers property and set that to the FeatureForm layer property. 

Vakhtang_Zubiashvili
Occasional Contributor II

yes, but how can i point selected featurelayer (one from three editable layer) here?:

 const featureForm = new FeatureForm({
              container: "formDiv",
              layer: lr,
              fieldConfig: [
                {
                  name: "komentari",
                  label: "komentari",        
                }
              ]
            });

attributes are same for all three featurelayer, but when i click on e.g. RED featurelayer i want get attribute info from RED, when i click GRAY get Gray info and same for YELLOW.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Do all three layers use the same url?... If not then you have the ability to determine which one to set to the FeatureForm based on the url or id.

Vakhtang_Zubiashvili
Occasional Contributor II

Ok, let me try and keep in touch.

0 Kudos
Vakhtang_Zubiashvili
Occasional Contributor II

Hi Robert,

I tried different ways and now i can get my layer, but still some problem. When i click ones it returns layer, but in my form it does not appear and when i click second time it appears in form, but when i change text it returns error : 

 ---- Uncaught TypeError: Cannot convert undefined or null to object

Here is a screen shot and code (Code is a standard Applyedits, just to show you where featutreLayer goes) for review:

view.on("click", function(event) {
 view.hitTest(event)
  .then(getGraphics);
})
function getGraphics(response) {
        var graphic = response.results[0].graphic;
        var attributes = graphic.attributes;
        var ido = graphic.layer;
            console.log(ido)

            const featureForm = new FeatureForm({
              container: "formDiv",
              layer: ido,
              fieldConfig: [
                {
                  name: "komentari",
                  label:"komentari",        
                }
              ]
            });
            document.getElementById(formDiv)
            featureForm.on("submit", function() {
              if (editFeature) {
                const updated = featureForm.getValues();
                Object.keys(updated).forEach(function(name) {
                  editFeature.attributes.komentari = 
                       document.getElementById("Req_Code").value;
                });
                const edits = {
                  updateFeatures: [editFeature]
                };
                applyEditsToIncidents(edits);
                document.getElementById("viewDiv").style.cursor = "auto";
              }
            });
            selectExistingFeature();
    
       function applyEditsToIncidents(params) {
              unselectFeature();
              ido
                .applyEdits(params)
                .then(function(editsResult) {
                  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");
                    }
                  }
                  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);
                });
            }

            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 == ido
                    ) {
                      if (addFeatureDiv.style.display === "block") {
                        toggleEditingDivs("none", "block");
                      }
                      selectFeature(
                        response.results[0].graphic.attributes[
                          ido.objectIdField
                        ]
                      );
                    }
                  });
                }
              }); 
            }

            function selectFeature(objectId) {
              // query feature from the server
              ido
                .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;
                        console.log(editFeature.attributes.komentari)
                        document.getElementById("Req_Code").value = editFeature.attributes.komentari;

                    view.whenLayerView(editFeature.layer).then(function(layerView) {
                      highlight = layerView.highlight(editFeature);
                    });
                  }
                });
            }
            const addFeatureDiv = document.getElementById("addFeatureDiv");
            const attributeEditing = document.getElementById("featureUpdateDiv");
             
            function unselectFeature() {
               if (highlight) {
               highlight.remove();
               }
            }
  
            document.getElementById("btnUpdate").onclick = function() {
              // Fires feature form's submit event.
              featureForm.submit();
              //removeLR()
            }; 

};
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtang,

  Your code logic is pretty mixed up. You have to many view click event handlers. Se my comments in the code below.

view.on("click", function(event) {
 view.hitTest(event)
  .then(getGraphics);
})
function getGraphics(response) {
        var graphic = response.results[0].graphic;
//right here you have the feature that was clicked
//so why are you not setting the FeatureForm feature attribute?
        var attributes = graphic.attributes;
        var ido = graphic.layer;
            console.log(ido)

            const featureForm = new FeatureForm({
              container: "formDiv",
              layer: ido,
              fieldConfig: [
                {
                  name: "komentari",
                  label:"komentari",        
                }
              ]
            });
//Not sure what this next line is for
            document.getElementById(formDiv)

//What you need is something like this.
featureForm.feature = graphic;

Forget your whole selectExistingFeature where you add another view click handler (this is the reason you have to click twice).

Vakhtang_Zubiashvili
Occasional Contributor II

Thanks Robert, i guessed what was my problem. Great!

0 Kudos