I believe I may have figured out the rest. You can add a Save button next to the Delete button that will close the form. Also, to get rid of the scroll bar, you can adjust the height of the template picker in the CSS. Also, I upgraded the code from Legacy to the new AMD. Below is an example:
<!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;
}
#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:blue;
}
.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:100px;
}
.esriAttributeInspector .atiLayerName {
display:none;
}
.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/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, 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
});
on(map, "layers-add-result", initEditing);
var pointLayer = new FeatureLayer("http://gismap2.calgary.ca/arcgis/rest/services/LUPP_Testing/Citizen_Comments/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>
</div>
</body>
</html>