<!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" /> <!--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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 98%; width: 98%; padding: 0; overflow:hidden; } #mapDiv{ padding:0; border: solid 2px #705B35; } .roundedCorners { -moz-border-radius: 4px; border-radius: 4px; } #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;} .saveButton { padding-left:45px; margin:0px;width:16px; height:16px; } </style> <script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript" language="Javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.AttributeInspector-all"); var map; var updateFeature; function init() { //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. esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; var initialExtent = new esri.geometry.Extent({"xmin":-8584936.075899996,"ymin":4691869.096699994,"xmax":-8561487.160099998,"ymax":4721092.926799998,"spatialReference":{"wkid":102113}}); map = new esri.Map("mapDiv", {extent:initialExtent, spatialReference:{"wkid":102113}}); dojo.connect(map, "onLoad", function() { //resize the map when the browser resizes dojo.connect(dijit.byId('mapDiv'), 'resize', map,map.resize); }); dojo.connect(map, "onLayersAddResult", initSelectToolbar); var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(tiledLayer); var editable = new esri.layers.ArcGISDynamicMapServiceLayer("http://129.2.24.163/ArcGIS/rest/services/Capstone_Projects/JayGregEdit/MapServer"); editable.setDisableClientCaching(true); map.addLayer(editable); var roadObs = new esri.layers.FeatureLayer("http://129.2.24.163/ArcGIS/rest/services/Capstone_Projects/JayGregEdit/FeatureServer/1", { mode: esri.layers.FeatureLayer.MODE_SELECTION, outFields: ["*"] }); var selectionSymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color("yellow"), 2),null); roadObs.setSelectionSymbol(selectionSymbol); dojo.connect(roadObs, "onEditsComplete", function() { petroFieldsMSL.refresh(); }); map.addLayers([roadObs]); } function initSelectToolbar(results) { var roadObs = results[0].layer; var selectQuery = new esri.tasks.Query(); dojo.connect(map, "onClick", function(evt) { selectQuery.geometry = evt.mapPoint; roadObs.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, function(features) { if (features.length > 0) { console.log("found"); //store the current feature updateFeature = features[0]; map.infoWindow.setTitle(features[0].getLayer().name); map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); } else { console.log("nothing found"); map.infoWindow.hide(); } }); }); dojo.connect(map.infoWindow, "onHide", function() { roadObs.clearSelection(); }); var layerInfos = [{'featureLayer':roadObs, 'showAttachments':false, 'isEditable': true, 'fieldInfos': [ {'fieldName': 'DESCRIPTION', 'isEditable':true, 'tooltip': 'Short Description', 'label':'Description:'}, {'fieldName': 'DATE_REPORTED', 'isEditable':true, 'tooltip': 'Report Date', 'label':'Date'}, {'fieldName': 'STATUS', 'isEditable':true,'label':'Status:'} ]}]; var attInspector = new esri.dijit.AttributeInspector({ layerInfos:layerInfos }, dojo.create("div") ); //add a save button next to the delete button var saveButton = new dijit.form.Button({label:"Save","class":"saveButton"}); dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after"); dojo.connect(saveButton,"onClick",function(){ updateFeature.getLayer().applyEdits(null, [updateFeature], null); }); dojo.connect(attInspector, "onAttributeChange", function(feature,fieldName,newFieldValue) { //store the updates to apply when the save button is clicked updateFeature.attributes[fieldName] = newFieldValue; }); dojo.connect(attInspector,"onNext",function(feature){ updateFeature = feature; console.log("Next " + updateFeature.attributes.objectid); }); dojo.connect(attInspector, "onDelete",function(feature){ feature.getLayer().applyEdits(null,null,[feature]); map.infoWindow.hide(); }); map.infoWindow.setContent(attInspector.domNode); map.infoWindow.resize(325,210); } dojo.addOnLoad(init); </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" class="roundedCorners" data-dojo-props="region:'center'" id="mapDiv"></div> </div> </body> </html>
Solved! Go to Solution.