AnsweredAssumed Answered

arcgis atribute editor empty

Question asked by amaynard on Apr 22, 2016
Latest reply on Apr 22, 2016 by amaynard

I'm trying to modify the attribute editor sample (Using the attribute inspector | ArcGIS API for JavaScript ) to remove the query and simply open clicked points for editing.  I think it has something to do with how I call the selected feature, but I cannot pin point it.  Can someone point me in the right direction on how to populate the attribute inspector.  code below.

 

<!DOCTYPE html>

<html>

<head>

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

 

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

<title>Editable FeatureLayer with Attribute Inspector</title>

 

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

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

<style>

  html, body, #mapDiv{

    height: 100%;

    width: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

  }

  #detailPane{

    padding: 6px;

    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 .atiLayerName {display:none;}

 

   #testFloatingPane {

            -moz-border-radius: 6px;

            -webkit-border-radius: 6px;

            position: absolute;

            top: 35px;

            left: 60px;

            width: 200px;

            height: 300px;

            z-index: 90;

        }

 

        .dojoxFloatingPaneContent {

            font-family: Arial, Helvetica, sans-serif;

            font-size: 8pt;

            font-weight: bold;

            overflow: auto;

        }

 

        .dojoxFloatingPaneTitle, .reportTitlePane {

            color: white;

            background-color: #76a2c5;

            font-family: Arial, Helvetica, sans-serif;

            font-size: 12pt;

            font-weight: bold;

            overflow: auto;

        }

</style>

 

<script src="https://js.arcgis.com/3.16/"></script>

<script>

  var map, updateFeature;

 

  require([

    "esri/map",

    "esri/layers/FeatureLayer",

    "dojox/layout/FloatingPane",

    "esri/dijit/AttributeInspector",

    "dojo/parser",

    "esri/dijit/editing/TemplatePicker",

   

    "esri/symbols/SimpleLineSymbol",

    "esri/symbols/SimpleMarkerSymbol",

    "esri/Color",

 

    "esri/config",

 

    "esri/tasks/query",

    "dojo/dom-construct",

    "dijit/form/Button",

 

    "dojo/domReady!"

  ], function(

    Map, FeatureLayer, FloatingPane, AttributeInspector, parser, TemplatePicker,

    SimpleLineSymbol, SimpleMarkerSymbol, Color,

    esriConfig,

    Query, 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: "dark-gray",

      center: [-97.395, 37.537],

      zoom: 5

    });

 

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

 

    //Feature Layer representing 2015 men's NCAA basketball tournament teams

    var teamsFL = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NCAA_Tourney_2015/FeatureServer/1", {

                mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["University", "WINPER", "Rd_64_Venue", "Rd_64_Result", "Rd_64_Margin"]

    });

 

    var selectionSymbol = new SimpleMarkerSymbol(

        SimpleMarkerSymbol.STYLE_CIRCLE, 6,

        new SimpleLineSymbol(

            "solid",

            new Color([255,0,0,0.5]),

            4

        ),

        new Color("ED3939")

    );

 

    var defaultSymbol = new SimpleMarkerSymbol(

        SimpleMarkerSymbol.STYLE_CIRCLE, 7,

        null,

        new Color([255,255,255])

    );

    teamsFL.setSelectionSymbol(selectionSymbol);

 

   

 

    map.addLayers([teamsFL]);

 

    function initSelectToolbar(evt) {

        console.log("initSelectToolbar started", evt);

      var teamsFL = evt.layers[0].layer;

              console.log("teamsFL started", teamsFL);

      var selectQuery = new Query();

 

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

         console.log("start select");

        updateFeature = teamsFL[0];

            map.infoWindow.setTitle("cleanup site");

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

                   });

     

 

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

        teamsFL.clearSelection();

      });

     

 

      var layerInfos = [

        {

          'featureLayer': teamsFL,

          'showAttachments': false,

          'isEditable': true,

          'fieldInfos': [

            {'fieldName': 'University', 'isEditable': false, 'label': 'School:'},

            {'fieldName': 'WINPER', 'isEditable': true, 'tooltip': 'Win percentage', 'label': 'Win percentage:'},

            {'fieldName': 'Rd_64_Venue', 'isEditable': false, 'label': 'Rd 1 Venue:'},

            {'fieldName': 'Rd_64_Result', 'isEditable': true, 'tooltip': 'First round result (W/L)', 'label': 'Rd 1 Result:'},

            {'fieldName': 'Rd_64_Margin', 'isEditable': true, 'tooltip': 'First round margin of victory/loss', 'label': 'Rd 1 Margin:'}

          ]

        }

      ];

 

      //Initialize Attribute Inspector

      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 id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">

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

 

    Click to display the attribute inspector for all NCAA men's basketball tournament teams within 50 miles of click.

  </div>

  <div id="mapDiv" div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:100%;"></div>

   <div id="testFloatingPane" data-dojo-type="dojox/layout/FloatingPane"

     data-dojo-props="title:'Add Cleanup', closable:false, resizable:false, dockable:true, movable:false">

    

     <div id="reportContainer" data-dojo-type="dijit/layout/ContentPane">

       

     test

        </div><!--endreportContainer-->

        </div><!--end testFloatingPane-->

            </div><!--end main-->

 

</body>

</html>

Outcomes