topic Re: AttributeInspector requires a FeatureLayer when using graphics? in ArcGIS JavaScript Maps SDK Questions

AttributeInspector requires a FeatureLayer when using graphics?

DuncanNisbett — Mon, 27 Aug 2012 14:12:08 GMT

I'm attempting to create a feature where a user is able to come in and create graphics to mark out excavation areas. The existing layers are all Dynamic layers. Through my research with the AttributeInspector (AI) it looks like it requires a FeatureLayer, which is a child of the Graphics layer. Is there a way to use the AttributeInspector without having to add a FeatureLayer? And if a FeatureLayer is required, can one create an "empty" layer just to satisfy the constraints of the AI?

I've attached a sample file of how I'm currently attempting to achieve this and obviously it doesn't work at the moment. Any insight someone might have would be greatly appreciated. I've also included the code in the post for easy reference.

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <meta name="viewport" content="width=device-width,user-scalable=no"/>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Maps Toolbar</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0; padding: 0;
      }
    </style>
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad: true
      }
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.toolbars.draw");
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
   dojo.require("esri.toolbars.edit");
   dojo.require("dijit.form.Button");
      dojo.require("dijit.Menu");
   dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.editing.TemplatePicker");
dojo.require("esri.dijit.AttributeInspector-all");

      var map, toolbar, editToolbar, symbol, geomTask;
   var ctxMenuForGraphics, ctxMenuForMap;

      function init() {
        var startExtent = new esri.geometry.Extent({"xmin":-11721159,"ymin":-1138850,"xmax":8277212,"ymax":9858297,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map",{extent:startExtent});

        dojo.connect(map, "onLoad", createToolbar);

        //add the world street map basemap
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

        map.addLayer(basemap);

      }

      function createToolbar(themap) {
        //resize the map when the browser resizes
        dojo.connect(dijit.byId('map'), 'resize', map,map.resize);

       toolbar = new esri.toolbars.Draw(map);
    editToolbar = new esri.toolbars.Edit(map);

       dojo.connect(toolbar, "onDrawEnd", addToMap);
      }

      function addToMap(geometry) {
        toolbar.deactivate();
        map.showZoomSlider();
         switch (geometry.type) {
            case "polygon":
              var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
              break;
          }
          var graphic = new esri.Graphic(geometry, symbol);
    graphic.setAttributes({"Title": "My Shape", "Description": "My Test Description", "Perimeter": "0", "Area": "0"})
    graphic.setInfoTemplate(infoTemplateNew(graphic));
          map.graphics.add(graphic);
      }

function infoTemplateNew(graphic){
var infoWindow = new esri.InfoTemplate();
infoWindow.setTitle(graphic.attributes.Title)

//possible code to abstractly handle updating fields - errors out at the moment
var layer = map.getLayer("map_graphics");
//var layer = esri.layers.FeatureLayer;
var layerInfos = [{'featureLayer': layer,'isEditable': false}];
var attInspector = new esri.dijit.AttributeInspector({layerInfos: layerInfos}, dojo.create("div"));
infoWindow.setContent(attInspector.domNode);

return infoWindow;
}

function activateToolbar(graphic){
var tool = 0;
tool = tool | esri.toolbars.Edit.MOVE;
tool = tool | esri.toolbars.Edit.EDIT_VERTICES;
tool = tool | esri.toolbars.Edit.SCALE;
tool = tool | esri.toolbars.Edit.ROTATE;
var options = {
    allowAddVertices: true,
    allowDeleteVertices: true
};
editToolbar.activate(tool, graphic, options);
}

      dojo.addOnLoad(init);
    </script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
    <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;">
      <span>Draw:<br /></span>
      <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();}">Polygon</button>
      
    </div>
    <div id="map" data-dojo-type="dijit.layout.ContentPane" style="border:solid 2px #587498;margin:5px;" data-dojo-props="region:'center'">
    </div>
</div>
</body>
</html>

[/HTML]

Re: AttributeInspector requires a FeatureLayer when using graphics?

DuncanNisbett — Tue, 28 Aug 2012 21:06:48 GMT

Came up with a workaround to my issue. Instead of attempting to modify attributes of the Graphic with the AttributeInspector, I created my own form that allowed me to specifically designate the attributes to modify and then save/update accordingly. I would still be interested in finding a way through this problem, but it is no longer a stumbling block in my development.

Re: AttributeInspector requires a FeatureLayer when using graphics?

KellyHutchins — Fri, 10 Dec 2021 21:24:05 GMT

You could create a feature collection based feature layer and use that with the AttributeInspector widget. Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <!--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>Validate Attributes</title>

    <!-- include dojo theme -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
      #leftPane{
        overflow:hidden;
        border:none;
        color:#5C832F;
      }
      #map{
        border: solid medium #382513;
        padding:0;
      }

      .esriAttributeInspector{
          atiLayerName:'Building Details'
      }
      .templatePicker{
        border:none !important;
      }
      .templatePicker .grid .groupLabel{
        display:none;
      }
    </style>

    <!-- specify dojo configuration to parse dijits at load time -->
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad:true
      };
    </script>

    <!-- reference ArcGIS JavaScript API -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script type="text/javascript">
      //require selection dijit
      dojo.require("esri.map");
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.form.ValidationTextBox");

      var map;
      
      function init() {
 
        var initialExtent = new esri.geometry.Extent({"xmin":-13062820,"ymin":4063755,"xmax":-13048794,"ymax":4071609,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent:initialExtent, slider: false, nav: true });
        
        dojo.connect(map, "onLoad", function() {
         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        dojo.connect(map, "onLayersAddResult", initEditor);
        

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
 
 
        var featureCollection = {};
        featureCollection.layerDefinition = {"id":0,"name":"Notes","type":"Feature Layer","displayField":"name","description":"","copyrightText":"","relationships":[],"geometryType":"esriGeometryPoint","minScale":0,"maxScale":0,"extent":{"xmin":-165.874652126,"ymin":-49.9999999999999,"xmax":176.176078869,"ymax":76.745946916,"spatialReference":{"wkid":4326}},"drawingInfo":{"renderer":{"type":"simple","symbol":{"type":"esriPMS","url":"images/flickr.png","contentType":"image/png","color":null,"width":28,"height":28,"angle":0,"xoffset":0,"yoffset":0},"label":"","description":""},"transparency":0,"labelingInfo":null},"hasAttachments":true,"htmlPopupType":"esriServerHTMLPopupTypeAsHTMLText","objectIdField":"objectid","globalIdField":"globalid","typeIdField":"","fields":[{"name":"objectid","type":"esriFieldTypeOID","alias":"Objectid","editable":false,"domain":null},{"name":"note","type":"esriFieldTypeString","alias":"Note","editable":true,"length":255,"domain":null},{"name":"link","type":"esriFieldTypeString","alias":"Link","editable":true,"length":2048,"domain":null},{"name":"name","type":"esriFieldTypeString","alias":"Name","editable":true,"length":50,"domain":null},{"name":"email","type":"esriFieldTypeString","alias":"Email","editable":true,"length":50,"domain":null},{"name":"phone","type":"esriFieldTypeString","alias":"Phone","editable":true,"length":50,"domain":null},{"name":"globalid","type":"esriFieldTypeGlobalID","alias":"globalid","editable":false,"length":38,"domain":null},{"name":"notedate","type":"esriFieldTypeDate","alias":"Notedate","editable":false,"length":36,"domain":null}],"types":[],"templates":[{"name":"Notes","description":"","drawingTool":"esriFeatureEditToolPoint","prototype":{"attributes":{"notedate":null,"note":null,"link":null,"name":null,"email":null,"phone":null}}}],"capabilities":"Query,Editing"}

        
         var fields = dojo.map(featureCollection.layerDefinition.fields, function(field) {
          return field.name;
        });
        var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
          outFields: fields
        });


        map.addLayers([featureLayer]);
      }

      function initEditor(results) {
        //only one layer 
        var featureLayer = results[0].layer;

        var templatePicker = new esri.dijit.editing.TemplatePicker({
          featureLayers: [featureLayer],
          rows: 'auto',
          groupingEnabled:false,
          columns: 1
        },'editorDiv');
        templatePicker.startup();


      
       
       var layerInfos = [{
          'featureLayer':featureLayer,
          'showAttachments':false,
          'showDeleteButton':false,
          'fieldInfos':[
            {'fieldName':'name','label':'Name'},
            {'fieldName':'email','label':'Email'},
            {'fieldName':'phone','label':'Phone'},
            {'fieldName':'note','label':'Details', 'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA},
            {'fieldName':'notedate','label':'Date'}
          ]
        }];   
        
        //define the editor settings
        var settings = {
          map: map,
          templatePicker:templatePicker,
          layerInfos:layerInfos
        };
        
        var params = {settings: settings};

        //Create the editor widget 
        var editorWidget = new esri.dijit.editing.Editor(params);
        editorWidget.startup();
        
        //resize the info window (attribute inspector)
        map.infoWindow.resize(295,245);
      }
      
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">    
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
      <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;"  data-dojo-props="region:'left'">
        <div id="editorDiv"></div>
        <div></div>
      </div>
    </div>
  </body>
</html>

Re: AttributeInspector requires a FeatureLayer when using graphics?

DerivenC — Fri, 10 Dec 2021 21:24:08 GMT

You could create a feature collection based feature layer and use that with the AttributeInspector widget. Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
    <!--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>Validate Attributes</title>

    <!-- include dojo theme -->
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <style type="text/css">
      .dj_ie .infowindow .window .top .right .user .content { position: relative; }
      .dj_ie .simpleInfoWindow .content {position: relative;}
    </style>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
      #leftPane{
        overflow:hidden;
        border:none;
        color:#5C832F;
      }
      #map{
        border: solid medium #382513;
        padding:0;
      }

      .esriAttributeInspector{
          atiLayerName:'Building Details'
      }
      .templatePicker{
        border:none !important;
      }
      .templatePicker .grid .groupLabel{
        display:none;
      }
    </style>

    <!-- specify dojo configuration to parse dijits at load time -->
    <script type="text/javascript">
      dojoConfig = {
        parseOnLoad:true
      };
    </script>

    <!-- reference ArcGIS JavaScript API -->
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script type="text/javascript">
      //require selection dijit
      dojo.require("esri.map");
      dojo.require("esri.dijit.editing.Editor-all");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.form.ValidationTextBox");

      var map;
      
      function init() {
 
        var initialExtent = new esri.geometry.Extent({"xmin":-13062820,"ymin":4063755,"xmax":-13048794,"ymax":4071609,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", { extent:initialExtent, slider: false, nav: true });
        
        dojo.connect(map, "onLoad", function() {
         //resize the map when the browser resizes
         dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        
        dojo.connect(map, "onLayersAddResult", initEditor);
        

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);
 
 
        var featureCollection = {};
        featureCollection.layerDefinition = {"id":0,"name":"Notes","type":"Feature Layer","displayField":"name","description":"","copyrightText":"","relationships":[],"geometryType":"esriGeometryPoint","minScale":0,"maxScale":0,"extent":{"xmin":-165.874652126,"ymin":-49.9999999999999,"xmax":176.176078869,"ymax":76.745946916,"spatialReference":{"wkid":4326}},"drawingInfo":{"renderer":{"type":"simple","symbol":{"type":"esriPMS","url":"images/flickr.png","contentType":"image/png","color":null,"width":28,"height":28,"angle":0,"xoffset":0,"yoffset":0},"label":"","description":""},"transparency":0,"labelingInfo":null},"hasAttachments":true,"htmlPopupType":"esriServerHTMLPopupTypeAsHTMLText","objectIdField":"objectid","globalIdField":"globalid","typeIdField":"","fields":[{"name":"objectid","type":"esriFieldTypeOID","alias":"Objectid","editable":false,"domain":null},{"name":"note","type":"esriFieldTypeString","alias":"Note","editable":true,"length":255,"domain":null},{"name":"link","type":"esriFieldTypeString","alias":"Link","editable":true,"length":2048,"domain":null},{"name":"name","type":"esriFieldTypeString","alias":"Name","editable":true,"length":50,"domain":null},{"name":"email","type":"esriFieldTypeString","alias":"Email","editable":true,"length":50,"domain":null},{"name":"phone","type":"esriFieldTypeString","alias":"Phone","editable":true,"length":50,"domain":null},{"name":"globalid","type":"esriFieldTypeGlobalID","alias":"globalid","editable":false,"length":38,"domain":null},{"name":"notedate","type":"esriFieldTypeDate","alias":"Notedate","editable":false,"length":36,"domain":null}],"types":[],"templates":[{"name":"Notes","description":"","drawingTool":"esriFeatureEditToolPoint","prototype":{"attributes":{"notedate":null,"note":null,"link":null,"name":null,"email":null,"phone":null}}}],"capabilities":"Query,Editing"}

        
         var fields = dojo.map(featureCollection.layerDefinition.fields, function(field) {
          return field.name;
        });
        var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
          outFields: fields
        });


        map.addLayers([featureLayer]);
      }

      function initEditor(results) {
        //only one layer 
        var featureLayer = results[0].layer;

        var templatePicker = new esri.dijit.editing.TemplatePicker({
          featureLayers: [featureLayer],
          rows: 'auto',
          groupingEnabled:false,
          columns: 1
        },'editorDiv');
        templatePicker.startup();


      
       
       var layerInfos = [{
          'featureLayer':featureLayer,
          'showAttachments':false,
          'showDeleteButton':false,
          'fieldInfos':[
            {'fieldName':'name','label':'Name'},
            {'fieldName':'email','label':'Email'},
            {'fieldName':'phone','label':'Phone'},
            {'fieldName':'note','label':'Details', 'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA},
            {'fieldName':'notedate','label':'Date'}
          ]
        }];   
        
        //define the editor settings
        var settings = {
          map: map,
          templatePicker:templatePicker,
          layerInfos:layerInfos
        };
        
        var params = {settings: settings};

        //Create the editor widget 
        var editorWidget = new esri.dijit.editing.Editor(params);
        editorWidget.startup();
        
        //resize the info window (attribute inspector)
        map.infoWindow.resize(295,245);
      }
      
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="claro">    
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
      <div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;"  data-dojo-props="region:'left'">
        <div id="editorDiv"></div>
        <div></div>
      </div>
    </div>
  </body>
</html>

^ This is awesome! Thank you!