Chart in attribute inspector

williamcarr — Fri, 12 Dec 2014 18:06:24 GMT

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>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Editable FeatureLayer in Selection Only Mode with Attribute Inspector</title>

<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>

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"),

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>

Click a field to display the attribute inspector with customized fields.

</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.

topic Chart in attribute inspector in ArcGIS JavaScript Maps SDK Questions

Chart in attribute inspector

Re: Chart in attribute inspector

Re: Chart in attribute inspector

Re: Chart in attribute inspector