Greetings,
I'm working on a map that will contain features for attribute editing, and features to display a chart pretty much exactly like the examples. I can get each to work independently, but not together.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--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" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body {
height: 100%; width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#mapDiv{
margin: 0;
padding:0;
}
#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 src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
var updateFeature;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/AttributeInspector",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/Color",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/config",
"esri/tasks/query",
"dojo/parser",
"dojo/dom-construct",
"dijit/form/Button",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, FeatureLayer, AttributeInspector,
SimpleLineSymbol, SimpleFillSymbol, Color,Popup, PopupTemplate,
ArcGISDynamicMapServiceLayer, esriConfig,
Query,
parser, 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: "streets",
center: [-97.395, 37.537],
zoom: 11
});
map.on("layers-add-result", initSelectToolbar);
var petroFieldsMSL = new ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/MapServer");
petroFieldsMSL.setDisableClientCaching(true);
map.addLayer(petroFieldsMSL);
var ReportMaster = new esri.layers.ArcGISDynamicMapServiceLayer("");
map.addLayer(ReportMaster);
var petroFieldsFL = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSFields/FeatureServer/0", {
mode: FeatureLayer.MODE_SELECTION,
outFields: ["approxacre", "objectid", "field_name", "activeprod", "cumm_oil", "cumm_gas", "avgdepth"]
});
var selectionSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_NULL,
new SimpleLineSymbol(
"solid",
new Color("yellow"),
2
),
null
);
petroFieldsFL.setSelectionSymbol(selectionSymbol);
petroFieldsFL.on("edits-complete", function() {
petroFieldsMSL.refresh();
});
map.addLayers([petroFieldsFL]);
function initSelectToolbar(evt) {
var asdf = evt.layers[0].layer;
var selectQuery = new Query();
map.on("click", function(evt) {
var selectionQuery = new esri.tasks.Query();
var tol = map.extent.getWidth()/map.width * 30;
var x = evt.mapPoint.x;
var y = evt.mapPoint.y;
var queryExtent = new esri.geometry.Extent(x-tol,y-tol,x+tol,y+tol,evt.mapPoint.spatialReference);
selectionQuery.geometry = queryExtent;
asdf.selectFeatures(selectionQuery, FeatureLayer.SELECTION_NEW, function(features) {
//store the current feature
updateFeature = features[0]; console.log("adf");
map.infoWindow.setTitle(features[0].getLayer().name); console.log("adf");
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)); console.log("adf");
});
});
var layerInfos = [
{
'featureLayer': petroFieldsFL,
'showAttachments': false,
'isEditable': true,
'fieldInfos': [
{'fieldName': 'activeprod', 'isEditable': true, 'tooltip': 'Current Status', 'label': 'Status:'},
{'fieldName': 'field_name', '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 AttributeInspector({
layerInfos: layerInfos
}, domConstruct.create("div"));
//add a save button next to the delete button
var saveButton = new Button({ label: "Save", "class": "saveButton"});
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);
}
var popupTemplate = new PopupTemplate({
"title": "asdf",
"fieldInfos": [{
"fieldName": "BLOCKCE10",
"label": "Sasdf",
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "relationships/0/GAL",
"label": "Sum of species tree count",
"format": {
"places": 0,
"digitSeparator": true
},
"statisticType": "sum"
}, {
"fieldName": "relationships/0/date2",
"label": "Common Name"
}, {
"fieldName": "BLOCKCE10",
"label": "SERVICE_ID"
}],
"description": "asdf",
"showAttachments": false,
"mediaInfos": [{
"title": "",
"type": "columnchart",
"caption": "",
"value": {
"theme": "GreySkies",
"fields": ["relationships/0/GAL"],
"normalizeField": null,
"tooltipField": "relationships/0/date2"
}
}]
});
var popupTemplate1 = new PopupTemplate({
"title": "asdf",
"fieldInfos": [{
"fieldName": "Point_Count",
"label": "Count of Points",
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "relationships/1/GAL",
"label": "Sum of species tree count",
"format": {
"places": 0,
"digitSeparator": true
},
"statisticType": "sum"
}, {
"fieldName": "relationships/1/date2",
"label": "Common Name"
}, {
"fieldName": "BLOCKCE10",
"label": "Block"
}],
"description": "asdf",
"showAttachments": false,
"mediaInfos": [{
"title": "",
"type": "columnchart",
"caption": "",
"value": {
"theme": "GreySkies",
"fields": ["relationships/1/GAL"],
"normalizeField": null,
"tooltipField": "relationships/1/date2"
}
}]
});
var popupTemplate2 = new PopupTemplate({
"title": "asdf",
"fieldInfos": [{
"fieldName": "Point_Count",
"label": "Count of Points",
"format": {
"places": 0,
"digitSeparator": true
}
}, {
"fieldName": "relationships/2/GAL",
"label": "Sum of species tree count",
"format": {
"places": 0,
"digitSeparator": true
},
"statisticType": "sum"
}, {
"fieldName": "relationships/2/date2",
"label": "Common Name"
}, {
"fieldName": "BLOCKCE10",
"label": "Block"
}],
"description": "asdf",
"showAttachments": false,
"mediaInfos": [{
"title": "",
"type": "columnchart",
"caption": "",
"value": {
"theme": "GreySkies",
"fields": ["relationships/2/GAL"],
"normalizeField": null,
"tooltipField": "relationships/2/date2"
}
}]
});
var popupTemplate3 = new PopupTemplate({
title: "{asdf}",
fieldInfos: [
{
fieldName: "asdf",
visible: true,
label: "Service ID"
},
{
fieldName: "asdf",
visible: true,
label: "Name",
}
],
showAttachments: true
});
var featureLayer = new FeatureLayer("asdf", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate,
outFields: ["*"]
});
map.addLayer(featureLayer);
var featureLayer1 = new FeatureLayer("asdf", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate1,
outFields: ["*"]
});
map.addLayer(featureLayer1);
var featureLayer2 = new FeatureLayer("asdf", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate2,
outFields: ["*"]
});
map.addLayer(featureLayer2);
var featureLayer3 = new FeatureLayer("asdf", {
mode: FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate3,
outFields: ["asdf","asdf"]
});
map.addLayer(featureLayer3);
});
</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" data-dojo-props="region:'center'" id="mapDiv"></div>
</div>
</body>
</html>
Does anyone know of a way to have access to both the attribute inspector and the chart abilities of popup template?
Any help would be greatly appreciated.
Hi William - did you ever get this figured out?
David
Not yet, at the time we just separated the charts and attribute inspector into two separate functions. This will be something we circle back to when the time comes.
Sure thing. We're doing something similar so if/when we get something working I'll post back-