var attributeInspector = new AttributeInspector({layerInfos: layers}, "attributeDiv"); var settings = { attributeInspector: attributeInspector, map: map, layerInfos: layers, toolbarVisible: false };
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <!--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>Edit rivers and waterbodies</title> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css" /> <style> html,body{height:100%;width:100%;margin:0;overflow:hidden;} #map{ padding:0; } #header{ font-size: 1.1em; font-family: sans-serif; padding-left: 1em; padding-top:4px; color:#660000; } .templatePicker { border: none; } </style> <script src="http://js.arcgis.com/3.6/"></script> <script> var map; require([ "esri/map", "esri/toolbars/edit", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/dijit/editing/Editor", "esri/dijit/AttributeInspector", "esri/dijit/editing/TemplatePicker", "esri/config", "dojo/i18n!esri/nls/jsapi", "dojo/_base/array", "dojo/parser", "dojo/keys", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, Edit, ArcGISTiledMapServiceLayer, FeatureLayer, SimpleMarkerSymbol, SimpleLineSymbol, Editor,AttributeInspector, TemplatePicker, esriConfig, jsapiBundle, arrayUtils, parser, keys ) { parser.parse(); map = new Map("map", { basemap: "satellite", center: [-96.541, 38.351], zoom: 14, slider: false }); map.on("layers-add-result", initEditor); //add boundaries and place names var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"); map.addLayer(labels); var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); map.addLayers([waterbodies,rivers]); function initEditor(evt) { var layers = arrayUtils.map(evt.layers, function(result) { return { featureLayer: result.layer }; }); var attributeInspector = new AttributeInspector({layerInfos: layers}, "attributeDiv"); var settings = { attributeInspector: attributeInspector, map: map, layerInfos: layers, toolbarVisible: false }; var params = {settings: settings}; var myEditor = new Editor(params,'editorDiv'); myEditor.startup(); } }); </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'"> Edit Hydrography </div> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 350px;overflow:hidden;"> <div id="editorDiv"></div> <div id="attributeDiv"></div> </div> <div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div> </div> </body> </html>
Hi Kelly. I know this is old but had reason to revisit this for another project I am working on. I would like to suggest that this be updated and shared as a sample on the Javascript API samples web page as it is very valuable in my opinion. I am certain others would feel the same way. Would also love to see a version that uses Dojo Bootstrap to display attribute data (without using jQuery). Belated thanks.