Hello everyone,
I have the attached file (AddRecord_V6.html) which I will paste into the thread at the bottom. It works fine in the JavaScript sandbox environment. I have recently tried to break this file out into separate files (.html, .js, .css) to see if I can get this working from the web server on my PC (localhost).
Of course it's not working. What I see is:
I'm confident that 2 things that need to be changed when moving away from the Sandbox environment are:
Basically I don't know what I'm missing to get this working. Any direction greatly appreciated. The index.zip contains the individual files broken out. Below is the code from AddRecord_V6.html
Thanks all!
<!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>Multiple Attribute Inspectors</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<style>
html,body {
height:100%;
width:100%;
background-color:#FFF;
font-family:Kimberley, sans-serif;
margin:0;
padding:0;
}
#header {
padding-top:4px;
padding-right:15px;
background-color:#570026;
color:#CCC59E;
font-size:16pt;
text-align:right;
font-weight:700;
height:55px;
margin:2px;
}
#subheader {
font-size:small;
color:#E8D9AC;
text-align:right;
padding-right:1px; /*20px;*/
}
#leftPane {
margin:5px; /*added this, seems to align #leftPane & #map a bit nicer*/
width:200px; /*300px;*/
color:#3C1700;
background-color:#FFF;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#LocateButton {
position: absolute;
top: 129px;
left: 20px;
z-index: 50;
}
#map {
margin:5px;
padding:0px;
}
.templatePicker {
border: none !important;
height: 93% !important;
}
.templatePicker .grid .groupLabel{ /* This css will remove the template picker title*/
display:none; /* "TRPLCWH.Comments"*/
}
.templatePicker .itemLabel{ /*makes text orange*/
color:black;
}
.roundedCorners{
border:solid 3px #705B35;
border-radius:6px;
}
.shadow {
-webkit-box-shadow: 0 8px 6px -6px #999;
-moz-box-shadow: 0 8px 6px -6px #999;
box-shadow: 0 8px 6px -6px #999;
}
.esriAttributeInspector {
height:283px;
/*width:400px;*/
overflow: hidden; /* makes it so that the vertical scroll bar does not show up */
}
.esriAttributeInspector .atiLayerName {
display:none;
}
.esriAttributeInspector .atiField {
font-family: "Verdana";
font-size: 1em;
width: 300px;
}
.esriAttributeInspector .atiTextAreaField {
font-family: "Verdana";
font-size: 1em;
width: 296px;
}
.saveButton {
padding-left:45px;
margin:0px;width:16px; height:16px;
}
</style>
<script src="http://js.arcgis.com/3.10/"></script>
<script>
require([
"esri/map", "esri/dijit/HomeButton", "esri/dijit/LocateButton", "esri/layers/FeatureLayer", "esri/dijit/AttributeInspector", "esri/graphic", "esri/config",
"dojo/dom", "dojo/on", "dojo/_base/array", "esri/toolbars/draw", "dojo/dom-construct",
"dojo/parser", "esri/toolbars/draw", "esri/dijit/editing/TemplatePicker", "esri/dijit/AttributeInspector",
"dijit/form/Button", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, HomeButton, LocateButton, FeatureLayer, AttributeInspector, Graphic, esriConfig,
dom, on, array, Draw, domConstruct,
parser, draw, TemplatePicker, AttributeInpsector,
Button
) {
parser.parse();
esriConfig.defaults.io.proxyUrl = "/proxy";
var map, updateFeature;
map = new esri.Map("map", {
basemap: "streets",
center: [-114.2, 51.06],
zoom: 12
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
on(map, "layers-add-result", initEditing);
var pointLayer = new FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/CitizenComments/FeatureServer/0", {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"]
});
map.addLayers([pointLayer]);
function initEditing(results) {
var layers = [results.layers[0].layer];
var templatePicker = new TemplatePicker({
featureLayers: layers,
rows: 'auto',
columns: 'auto',
grouping: true
}, "templatePickerDiv");
templatePicker.startup();
var drawToolbar = new Draw(map);
var selectedTemplate;
on(templatePicker, "selection-change", function() {
selectedTemplate = templatePicker.getSelected();
if (selectedTemplate) {
switch (selectedTemplate.featureLayer.geometryType) {
case "esriGeometryPoint":
drawToolbar.activate(esri.toolbars.Draw.POINT);
break;
}
}
});
on(drawToolbar, "draw-end", function(geometry) {
updateFeature = geometry;
console.log(updateFeature);
if (map.infoWindow.isShowing) {
map.infoWindow.hide();
}
drawToolbar.deactivate();
var fieldAttributes = layerFieldToAttributes(selectedTemplate.featureLayer.fields);
var newAttributes = dojo.mixin(fieldAttributes, selectedTemplate.template.prototype.attributes);
var newGraphic = new Graphic(geometry, null, newAttributes);
var layerInfos = [{
'featureLayer': selectedTemplate.featureLayer,
'isEditable': true,
'showAttachments': true,
fieldInfos: [
{ fieldName: "NAME", label: "NAME:", isEditable: true },
{ fieldName: "EMAIL", label: "EMAIL:", isEditable: true },
{ fieldName: "PHONE", label: "PHONE:", isEditable: true },
{ fieldName: "CITIZEN_COMMENT", label: "COMMENT:", isEditable: true, 'stringFieldOption': 'textarea' }
]
}];
var attInspector = new AttributeInspector({
layerInfos: layerInfos
}, domConstruct.create("div"));
var saveButton = new Button({ label: "Save", "class": "saveButton"});
domConstruct.place(saveButton.domNode, attInspector.deleteBtn.domNode, "after");
saveButton.on("click", function(){
map.infoWindow.hide();
});
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null, function() {
var screenPoint = map.toScreen(getInfoWindowPositionPoint(newGraphic));
map.infoWindow.setContent(attInspector.domNode);
map.infoWindow.resize(400,400); //(325, 185);
map.infoWindow.show(screenPoint, map.getInfoWindowAnchor(screenPoint));
templatePicker.clearSelection();
});
on(attInspector, "attribute-change", function(evt) {
evt.feature.attributes[evt.fieldName] = evt.fieldValue;
evt.feature.getLayer().applyEdits(null, [evt.feature], null);
});
//delete a point
on(attInspector, "delete", function(evt) {
evt.feature.getLayer().applyEdits(null, null, [evt.feature]);
map.infoWindow.hide();
});
});
}
//removing this code makes it so that the info window does not open
function getInfoWindowPositionPoint(feature) {
var point;
switch (feature.getLayer().geometryType) {
case "esriGeometryPoint":
point = feature.geometry;
break;
}
return point;
}
//required for info window
function layerFieldToAttributes(fields) {
var attributes = {};
dojo.forEach(fields, function(field) {
attributes[field.name] = null;
});
return attributes;
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
Planning Comments
<div id="subheader">
West Springs
</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
<div>Click the pin below then click location on map to add your comment.</div>
<div id="templatePickerDiv"></div>
</div>
<div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
</div>
</body>
</html>
Solved! Go to Solution.
Chris,
Just add the JS API script to your index.html:
<!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>Multiple Attribute Inspectors</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Reference the js frame work from ESRI-->
<script src="//js.arcgis.com/3.10"></script>
<script src="js/map.js"></script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
Planning Comments
<div id="subheader">West Springs</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
<div>Click the pin below then click location on map to add your comment.</div>
<div id="templatePickerDiv"></div>
</div>
<div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
</div>
</body>
</html>
Chris,
Just add the JS API script to your index.html:
<!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>Multiple Attribute Inspectors</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Reference the js frame work from ESRI-->
<script src="//js.arcgis.com/3.10"></script>
<script src="js/map.js"></script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false"
style="width:100%; height:100%;">
<div id="header" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
Planning Comments
<div id="subheader">West Springs</div>
</div>
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" class="roundedCorners" id="leftPane">
<div>Click the pin below then click location on map to add your comment.</div>
<div id="templatePickerDiv"></div>
</div>
<div id="map" class="shadow roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
</div>
</div>
</body>
</html>
Thanks Robert. That seemed pretty simple. It works fine in Chrome. In IE it will not open the form or put a point on the map when I click to add a new point, I believe this is where the proxy is required?? I am using IE 9 (which I thought it would work fine with, I thought the Proxy was needed only for older browser versions)?
Thanks for your help,
Chris
Chris,
It works fine on my local web server using IE11 (I don't have access to IE9).