<!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" />
<!--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.2/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 djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></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 = "/proxy/proxy.ashx";
var startExtent = new esri.geometry.Extent(-78.9860343,35.9206581,-78.83153915,36.02365493, new esri.SpatialReference({wkid:4326}) );
map = new esri.Map("mapDiv", {extent:esri.geometry.geographicToWebMercator(startExtent)});
dojo.connect(map, "onLoad", function() {
var resizeTimer;
dojo.connect(dijit.byId('mapDiv'), 'resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function(){
map.resize();
map.reposition();
}, 500);
});
});
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 petroFieldsMSL = new esri.layers.ArcGISDynamicMapServiceLayer("http://maps.mapfactory.org/arcgis/rest/services/DurhamStreets/MapServer");
petroFieldsMSL.setDisableClientCaching(true);
map.addLayer(petroFieldsMSL);
var petroFieldsFL = new esri.layers.FeatureLayer("http://maps.mapfactory.org/ArcGIS/rest/services/DurhamPrayer/FeatureServer/0", {
mode: esri.layers.FeatureLayer.MODE_SELECTION,
//outFields: ["prefix","pretyper","name","type","suffix","prayer","selectdate"]
outFields: ["*"]
});
//var selectionSymbol = new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color("yellow"), 2);
//petroFieldsFL.setSelectionSymbol(selectionSymbol);
dojo.connect(petroFieldsFL, "onEditsComplete", function() {
petroFieldsMSL.refresh();
});
map.addLayers([petroFieldsFL]);
}
function initSelectToolbar(results) {
var petroFieldsFL = results[0].layer;
var selectQuery = new esri.tasks.Query();
dojo.connect(map, "onClick", function(evt) {
selectQuery.geometry = evt.mapPoint;
petroFieldsFL.selectFeatures(selectQuery, esri.layers.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();
}
});
});
dojo.connect(map.infoWindow, "onHide", function() {
petroFieldsFL.clearSelection();
});
var layerInfos = [{'featureLayer':petroFieldsFL,
'showAttachments':false,
'isEditable': true,
'fieldInfos': [
{'fieldName': 'prayer', 'isEditable':true, 'tooltip': 'Current Status', 'label':'Status:'},
{'fieldName': 'selectdate', 'isEditable':true, 'tooltip': 'The name of this oil field', 'label':'Field Name:'},
//{'fieldName': 'approxacre', 'isEditable':false,'label':'Acreage:'},
//{'fieldName': 'avgdepth', 'isEditable':false, 'label':'Average Depth:'},
//{'fieldName': 'cumm_oil', 'isEditable':false, 'label':'Cummulative Oil:'},
//{'fieldName': 'cumm_gas', 'isEditable':false, 'label':'Cummulative Gas:'}
]}];
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 dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%;height:100%;">
<div id="detailPane" dojotype="dijit.layout.ContentPane" region="top">
Click a field to display the attribute inspector with customized fields.
</div>
<div dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center" id="mapDiv"></div>
</div>
</body>
</html>