AnsweredAssumed Answered

attribute edit

Question asked by satyanarayana_narmala on Aug 31, 2015
Latest reply on Sep 29, 2015 by abbabharath

Hi all,

 

 

I am trying to implement attribute edit using attribute inspector, the service is displaying but pop up info not getting displayed.

 

If the problem is with the proxy setting, can anybody help with it. i am using IIS server.

 

here is the code

 

<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--The viewport meta tag is used to improve the presentation and behavior of the samples

      on iOS devices-->

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

 

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

    <style>

      html, body {

        height: 100%; width: 100%;

        margin: 0;

        padding: 0;

        overflow: hidden;

      }

      #mapDiv{

        margin: 0;

        padding:0;

      }

      #detailPane{

        height:20px;

        color:#570026;

        font-size:12pt;

        font-weight:600;

        overflow:hidden;

      }

      .dj_ie .infowindow .window .top .right .user .content { position: relative; }

      .dj_ie .simpleInfoWindow .content {position: relative;}

 

      .esriAttributeInspector {height:100px;}

      .esriAttributeInspector .atiLayerName {display:none;}

 

      .esriAttributeInspector .atiButton{

        margin-top:1px;

        margin-right:45px;

       }

    </style>

   

    <script src="http://js.arcgis.com/3.14/"></script>

    <script>

      var map;

      var updateFeature;

     

      require([

        "esri/map",

        "esri/layers/FeatureLayer",

        "esri/dijit/AttributeInspector",

 

        "esri/symbols/SimpleLineSymbol",

        "esri/symbols/SimpleFillSymbol",

        "esri/Color",

 

        "esri/layers/ArcGISDynamicMapServiceLayer",

        "esri/config",

 

        "esri/tasks/query",

        "dojo/query",

        "dojo/parser",

        "dojo/dom-construct",

        "dijit/form/Button",

 

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"

      ], function(

        Map, FeatureLayer, AttributeInspector,

        SimpleLineSymbol, SimpleFillSymbol, Color,

        ArcGISDynamicMapServiceLayer, esriConfig,

        Query,dojoQuery,

        parser, domConstruct, Button

      ) {

        parser.parse();

 

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/jshelp/ags_proxy.html

   // esriConfig.defaults.io.proxyUrl = "/proxy/";

 

        map = new Map("mapDiv", {

          basemap: "streets",

          center: [78.20, 19.00],

          zoom: 11

        });

 

        map.on("layers-add-result", initSelectToolbar);

 

        var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/IRR/srsp_canal_WRK1/MapServer");

        petroFieldsMSL.setDisableClientCaching(true);

        map.addLayer(petroFieldsMSL);

 

        var petroFieldsFL = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/IRR/srsp_canal_WRK1/FeatureServer/1", {

          mode: FeatureLayer.MODE_SELECTION,

          outFields: ["objectid","code", "codename", "length", "description", "status_work", "la_status", "ip_status"]

        });

        var selectionSymbol = new SimpleFillSymbol(

            SimpleFillSymbol.STYLE_NULL,

            new SimpleLineSymbol(

                "solid",

                new Color("yellow"),

                2

            ),

            null

        );

        petroFieldsFL.setSelectionSymbol(selectionSymbol);

 

        petroFieldsFL.on("edits-complete", function() {

          petroFieldsMSL.refresh();

        });

 

        map.addLayers([petroFieldsFL]);

 

        function initSelectToolbar(evt) {

          var petroFieldsFL = evt.layers[1].layer;

          var selectQuery = new Query();

 

          map.on("click", function(evt) {

            selectQuery.geometry = evt.mapPoint;

            petroFieldsFL.selectFeatures(selectQuery, FeatureLayer.SELECTION_NEW, function(features) {

              if (features.length > 0) {

                //store the current feature

                updateFeature = features[0];

                map.infoWindow.setTitle(features[0].getLayer().name);

                map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));

              }

              else {

                map.infoWindow.hide();

              }

            });

          });

 

          map.infoWindow.on("hide", function() {

            petroFieldsFL.clearSelection();

          });

 

          var layerInfos = [

            {

              'featureLayer': petroFieldsFL,

              'showAttachments': false,

              'isEditable': true,

              'fieldInfos': [

                {'fieldName': 'objectid', 'isEditable': false, 'objectid': 'objectid:'},

                {'fieldName': 'code', 'isEditable': false, 'CANAL CODE': 'Acreage:'},

                {'fieldName': 'codename', 'isEditable': false, 'label': 'CANAL NAME:'},

                {'fieldName': 'length', 'isEditable': false, 'label': 'LENGTH IN METERS:'},

                {'fieldName': 'description', 'isEditable': false, 'label': 'CANAL DESCRIPTION:'},

                {'fieldName': 'status_work', 'isEditable': true, 'tooltip': 'WORK PROGRESS', 'label': 'WORK PROGRESS STATUS:'},

                {'fieldName': 'la_status', 'isEditable': true, 'tooltip': 'LAND AQUISITION', 'label': 'LAND AQUISITION STATUS:'},

                {'fieldName': 'ip_status', 'isEditable': true, 'tooltip': 'IP CREATED', 'label': 'IP CREATED STATUS:'}

              ]

            }

          ];

 

          var attInspector = new AttributeInspector({

            layerInfos: layerInfos

          }, domConstruct.create("div"));

 

 

          //add a save button next to the delete button

          var saveButton = new Button({ label: "Save", "class": "saveButton"},domConstruct.create("div"));

 

 

          domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");

 

 

          saveButton.on("click", function() {

            updateFeature.getLayer().applyEdits(null, [updateFeature], null);

          });

 

          attInspector.on("attribute-change", function(evt) {

            //store the updates to apply when the save button is clicked

            updateFeature.attributes[evt.fieldName] = evt.fieldValue;

          });

 

          attInspector.on("next", function(evt) {

            updateFeature = evt.feature;

            console.log("Next " + updateFeature.attributes.objectid);

          });

 

          attInspector.on("delete", function(evt) {

            evt.feature.getLayer().applyEdits(null, null, [evt.feature]);

            map.infoWindow.hide();

          });

 

          map.infoWindow.setContent(attInspector.domNode);

          map.infoWindow.resize(350, 240);

        }

      });

    </script>

  </head>

 

  <body class="claro">

    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%;height:100%;">

      <div id="detailPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">

        Click a field to display the attribute inspector with customized fields.

      </div>

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" id="mapDiv"></div>

    </div>

  </body>

</html>

Outcomes