Community

Attribute Inspector ??? Edits Not Working

838
1
11-07-2013 08:17 PM
NumaGremling
by
New Contributor
‎11-07-2013 08:17 PM
Hi everyone,

I am using the attribute inspector to add records to a table. When you click on a parcel the attribute inspector will open, the user can enter values, and the newly entered values should write to a table. It all seems to work fine to a certain extent; I looked at it in fiddler and the apply edits is coming back successfully, but it does not seem to take it after all. I have attached my script and I would appreciate any advice on how to tackle this issue. Could it be linked to not using a proxy page?

<!DOCTYPE html>
<html>
<head>
  
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  
  <title>Attribute Inspector</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 250px;
    }

    .esriAttributeInspector .dijitTextBox {
      width: 10em;
    }

    .esriAttributeInspector .atiLayerName {
      display: none;
    }

    .esriAttributeInspector .atiLabel {
      font-weight: bold;
      color: #705B35;
    }

    .esriAttributeInspector .atiField {
      background: #FFF6D9;
    }

    .esriAttributeInspector .atiButtons {
      color: #705B35;
    }
  </style>

  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
    var map, operationalLayer;

    require([
      "esri/map", "esri/layers/FeatureLayer", 
      "esri/tasks/query",
   "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Legend",
   "esri/dijit/AttributeInspector",
      "esri/config",
      "dojo/dom",
   "dojo/parser",
   "dojo/_base/Color",
   "esri/dijit/editing/Editor",
   "dojo/_base/array",
      "dijit/layout/BorderContainer",
   "dijit/layout/ContentPane",
   "dijit/layout/AccordionContainer",
      "dojo/domReady!"
   
    ], function(
      Map,
   FeatureLayer,
      Query,
   SimpleFillSymbol,
      Legend,
   AttributeInspector,
      esriConfig,
      dom,
   parser,
   Color,
   Editor,
   arrayUtils
   
    ) {
      parser.parse();
      //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
      //for details on setting up a proxy page.
      //esriConfig.defaults.io.proxyUrl = "http://msgis-c23-03/Test/proxy.php";
      
      map = new Map("map", {
        basemap:"topo",
        //center :[-118.407, 34.452],
        //zoom   :13
  center :[-118.185, 33.8748],
        zoom   :18
      });


   
      //parcelLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/FeatureServer/9", {
      //  mode: FeatureLayer.MODE_ONDEMAND,
      //  outFields: ["station_id", "lithology_type", "metamorphic_facies", "geomodifications", "objectid"]
      //});

      parcelLayer = new FeatureLayer("http://msgis-webdev-1.spatial.redlands.edu/arcgis/rest/services/numa_gremling/ParcelsAndTables/FeatureServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["Id", "Name"]
      });

      parcelTable = new FeatureLayer("http://msgis-webdev-1.spatial.redlands.edu/arcgis/rest/services/numa_gremling/ParcelsAndTables/FeatureServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["OBJECTID", "Location", "Event", "Date", "YouTube", "Press"]
      });   

   
      var symbol = new SimpleFillSymbol().outline.setColor(new Color([0, 255, 0, 1])).setWidth(5);
      parcelLayer.setSelectionSymbol(symbol);

   
 
 
      map.on("layers-add-result", function(results) {
        //add the legend
        //var legend = new Legend({
        //  map: map,
        //  layerInfos: [{ 
        //    layer: parcelLayer, 
        //    title: ""
        //  }]
        //}, "legendDiv");
        //legend.startup();
  var layerInfos = [{
          featureLayer: parcelTable,
          showAttachments: false,
          isEditable: true,
          showDeleteButton: false,
          fieldInfos: [
            { fieldName: "OBJECTID", tooltip: "The station id.", label: "OBJECTID:", isEditable: true },
            { fieldName: "Location", tooltip: "The lithology type of the rock unit", label: "Location", isEditable: true },
            { fieldName: "Event", tooltip: "The lithology type of the rock unit", label: "Location", isEditable: true },
            { fieldName: "Date", tooltip: "The lithology type of the rock unit", label: "Date", isEditable: true },
            { fieldName: "YouTube", tooltip: "The lithology type of the rock unit", label: "YouTube", isEditable: true },
            { fieldName: "Press", tooltip: "The lithology type of the rock unit", label: "Press", isEditable: true }
          ]
        }];
   
  var selectQuery = new Query();
  parcelLayer.on("click", function(e){
        dom.byId("details").innerHTML = "";
        // console.log(e.graphic);
        selectQuery.objectIds = [e.graphic.attributes.OBJECTID];
        parcelTable.selectFeatures(selectQuery);
      });
        
  var attInspector = new AttributeInspector({
          layerInfos: layerInfos
        }, "attributesDiv");
  
  attInspector.on("attribute-change", function(evt) {
  var feature = evt.feature;
  feature.attributes[evt.fieldName] = evt.newFieldValue;
  feature.getLayer().applyEdits(null, [feature], null);
  
  });
  
      });
   
 
 
   map.addLayers([parcelLayer]);
   map.addLayers([parcelTable]);
      
   
  
 ///
    
        
   
   
   
   
    });
  </script>
</head>
<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:&apos;headline&apos;, gutters:true" style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&apos;right&apos;">

    <div data-dojo-type="dijit/layout/AccordionContainer">
 
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:&apos;Details&apos;, selected:true">
    <span id="details">Click a geology outcrop to view details.</span>

    <div id="attributesDiv"></div>
      </div>
   
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:&apos;Legend&apos;">
    <div id="legendDiv"></div>
      </div>


   
    </div>
 
 <div id="editorDiv"></div>
 
 
  </div>
  <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&apos;center&apos;" style="overflow:hidden;">
  </div>
</div>
</body>
</html>


Thank you for your help.

PS: the script is based on the following sample, in case that helps.
AtrrInspTable.zip
0 Kudos
1 Reply
NumaGremling
by
New Contributor
‎11-08-2013 04:02 PM
Here is an updated script. It is finally taking the edits. Although now I realize there is a logical mistake, and I would be interested if anyone has suggestions as to what should be changed.

It will always only update the first three records in my table. This is due to the fact that it finds the Object ID of a parcel and then writes to the corresponding Object ID in the table (so the first three rows). Where should the script be changed to make the user add a new record each time they click a parcel? There is no need to edit previously submitted information (so, I guess it should not default to an existing record in the table in the first place, but show blank input fields). Each time the attribute inspector pops up the user would enter information which would add a new row to the table.

As you can see I am avoiding a relationship query as I am struggling with that one a lot. But if anyone has suggestions how to implement one, please let me know.

Thank you very much.


<!DOCTYPE html>
<html>
<head>
  
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  
  <title>Attribute Inspector</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <style>
    html, body {
      height: 97%;
      width: 98%;
      margin: 1%;
    }

    #rightPane {
      width: 250px;
    }

    .esriAttributeInspector .dijitTextBox {
      width: 10em;
    }

    .esriAttributeInspector .atiLayerName {
      display: none;
    }

    .esriAttributeInspector .atiLabel {
      font-weight: bold;
      color: #705B35;
    }

    .esriAttributeInspector .atiField {
      background: #FFF6D9;
    }

    .esriAttributeInspector .atiButtons {
      color: #705B35;
    }
  </style>

  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
    var map, operationalLayer;

    require([
      "esri/map", "esri/layers/FeatureLayer", 
      "esri/tasks/query",
   "esri/symbols/SimpleFillSymbol",
      "esri/dijit/Legend",
   "esri/dijit/AttributeInspector",
      "esri/config",
      "dojo/dom",
   "dojo/parser",
   "dojo/_base/Color",
   "esri/dijit/editing/Editor",
   "dojo/_base/array",
      "dijit/layout/BorderContainer",
   "dijit/layout/ContentPane",
   "dijit/layout/AccordionContainer",
      "dojo/domReady!"
   
    ], function(
      Map,
   FeatureLayer,
      Query,
   SimpleFillSymbol,
      Legend,
   AttributeInspector,
      esriConfig,
      dom,
   parser,
   Color,
   Editor,
   arrayUtils
   
    ) {
      parser.parse();
      //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
      //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
      //for details on setting up a proxy page.
      //esriConfig.defaults.io.proxyUrl = "http://msgis-c23-03/Test/proxy.php";
      
      map = new Map("map", {
        basemap:"topo",
        //center :[-118.407, 34.452],
        //zoom   :13
  center :[-118.185, 33.8748],
        zoom   :18
      });


   
      //parcelLayer = new FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/Energy/Geology/FeatureServer/9", {
      //  mode: FeatureLayer.MODE_ONDEMAND,
      //  outFields: ["station_id", "lithology_type", "metamorphic_facies", "geomodifications", "objectid"]
      //});

      parcelLayer = new FeatureLayer("http://msgis-webdev-1.spatial.redlands.edu/arcgis/rest/services/numa_gremling/ParcelsAndTables/FeatureServer/0", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["Id", "Name"]
      });

      parcelTable = new FeatureLayer("http://msgis-webdev-1.spatial.redlands.edu/arcgis/rest/services/numa_gremling/ParcelsAndTables/FeatureServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields: ["OBJECTID", "Location", "Event", "Date", "YouTube", "Press"]
      });   

   
      var symbol = new SimpleFillSymbol().outline.setColor(new Color([0, 255, 0, 1])).setWidth(5);
      parcelLayer.setSelectionSymbol(symbol);

   
 
 
      map.on("layers-add-result", function(results) {
        //add the legend
        //var legend = new Legend({
        //  map: map,
        //  layerInfos: [{ 
        //    layer: parcelLayer, 
        //    title: ""
        //  }]
        //}, "legendDiv");
        //legend.startup();
  var layerInfos = [{
          featureLayer: parcelTable,
          showAttachments: false,
          isEditable: true,
          showDeleteButton: false,
          fieldInfos: [
            { fieldName: "OBJECTID", tooltip: "The station id.", label: "OBJECTID:", isEditable: true },
            { fieldName: "Location", tooltip: "The lithology type of the rock unit", label: "Location", isEditable: true },
            { fieldName: "Event", tooltip: "The lithology type of the rock unit", label: "Location", isEditable: true },
            { fieldName: "Date", tooltip: "The lithology type of the rock unit", label: "Date", isEditable: true },
            { fieldName: "YouTube", tooltip: "The lithology type of the rock unit", label: "YouTube", isEditable: true },
            { fieldName: "Press", tooltip: "The lithology type of the rock unit", label: "Press", isEditable: true }
          ]
        }];
   
  var selectQuery = new Query();
  parcelLayer.on("click", function(e){
        dom.byId("details").innerHTML = "";
        // console.log(e.graphic);
  selectQuery.objectIds = [e.graphic.attributes.OBJECTID];
        parcelTable.selectFeatures(selectQuery);
      });
        
  var attInspector = new AttributeInspector({
          layerInfos: layerInfos
        }, "attributesDiv");
  
  attInspector.on("attribute-change", function (evt) {
   var feature = evt.feature;
   var fids = {
    'Date' : "dijit_form_FilteringSelect_2",
    'Event' : "dijit_form_FilteringSelect_1",
    'Location' : "dijit_form_FilteringSelect_0",
    'OBJECTID' : evt.feature.attributes.OBJECTID,
    'Press' : "dijit_form_TextBox_2",
    'YouTube' : "dijit_form_TextBox_1"
   };
   //feature.attributes[evt.fieldName] = evt.newFieldValue;  
   //evt.newFieldValue is 'undefined' so it was dropped in the database. 
   feature.attributes[evt.fieldName] = dijit.byId(fids[evt.fieldName]).get('value');
   feature.getLayer().applyEdits(null, [feature], null);
  });
  
      });
   
 
 
   map.addLayers([parcelLayer]);
   map.addLayers([parcelTable]);
      
   
  
 ///
    
        
   
   
   
   
    });
  </script>
</head>
<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:&apos;headline&apos;, gutters:true" style="width: 100%; height: 100%; margin: 0;">

  <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&apos;right&apos;">

    <div data-dojo-type="dijit/layout/AccordionContainer">
 
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:&apos;Details&apos;, selected:true">
    <span id="details">Click a geology outcrop to view details.</span>

    <div id="attributesDiv"></div>
      </div>
   
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:&apos;Legend&apos;">
    <div id="legendDiv"></div>
      </div>


   
    </div>
 
 <div id="editorDiv"></div>
 
 
  </div>
  <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:&apos;center&apos;" style="overflow:hidden;">
  </div>
</div>
</body>
</html>
0 Kudos