topic Access featureLayers on click or in dropdown List in ArcGIS JavaScript Maps SDK Questions

Access featureLayers on click or in dropdown List

Vakhtang_Zubiashvili — Sat, 11 Dec 2021 21:42:23 GMT

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.

Re: People

RobertScheitlin__GISP — Thu, 20 Aug 2020 12:37:02 GMT

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.

Re: People

Vakhtang_Zubiashvili — Sat, 11 Dec 2021 21:42:26 GMT

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.

Re: People

RobertScheitlin__GISP — Thu, 20 Aug 2020 13:01:21 GMT

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.

Re: People

Vakhtang_Zubiashvili — Thu, 20 Aug 2020 13:21:39 GMT

Ok, let me try and keep in touch.

Re: People

Vakhtang_Zubiashvili — Sat, 11 Dec 2021 21:42:29 GMT

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()
            }; 

};‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: People

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:42:32 GMT

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).

Re: People

Vakhtang_Zubiashvili — Mon, 24 Aug 2020 10:15:54 GMT

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