Chart in attribute inspector

williamcarr · ‎12-12-2014

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

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>

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.

DavidColey · ‎07-20-2015

Hi William - did you ever get this figured out?

David

williamcarr · ‎07-23-2015

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.

DavidColey · ‎07-24-2015

Sure thing. We're doing something similar so if/when we get something working I'll post back-