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>
