I have been trying to add a save button to the AttributeInspector (just like here without the editor widget) of the Editor widget since our users don't find it intuitive to close the inspector to save edits. This approach requires accessing the AttributeInspector within the Editor widget, at which I have been unsuccessful. I have seen a few approaches such as:
attInspector = editor.attributeInspector; (here and here)
and
attInspector = editor._attributeInspector; (here)
The documentation says: "The Editor widget provides out-of-the-box editing capabilities using an editable layer in a Feature Service. It combines the out-of-the-box TemplatePicker, AttachmentEditor, AttributeInspector and GeometryService to provide feature and attribute editing.". Is there a way to modify the AttributeInspector within the Editor widget?
Thanks
Solved! Go to Solution.
Naci,
Not sure what problem you are having but here is a full working sample:
<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.22/esri/css/esri.css" />
<style>
html,body{height:100%;width:100%;margin:0;overflow:hidden;}
#map{
padding:0;
}
#header{
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top:4px;
color:#660000;
}
.templatePicker {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
.dj_ie .simpleInfoWindow .content {position: relative;}
.esriAttributeInspector .atiButton{
margin-top:1px;
margin-right:45px;
}
</style>
<script src="http://js.arcgis.com/3.22/"></script>
<script>
var map;
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/toolbars/edit",
"esri/dijit/AttributeInspector",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dojo/dom-construct",
"dijit/form/Button",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, GeometryService, Edit, AttributeInspector,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys,
domConstruct, Button
) {
parser.parse();
// snapping is enabled for this sample - change the tooltip to reflect this
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-96.541, 38.351],
zoom: 14,
slider: false
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
map.addLayer(labels);
var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([waterbodies,rivers]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, "templateDiv");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function(result) {
return { featureLayer: result.layer };
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = {settings: settings};
var myEditor = new Editor(params,'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
var attInspector = myEditor.attributeInspector;
//console.info(attInspector);
var saveButton = new Button({label:"save","class":"atiButton, atiDeleteButton"});
dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");
arrayUtils.forEach(attInspector.layerInfos, function(layerInfo){
if(layerInfo.featureLayer === waterbodies){
layerInfo.fieldInfos = [
{fieldName: 'elevation', isEditable: true, tooltip: 'Elev', label: 'Elevation'},
{fieldName: 'reachcode', isEditable: true, tooltip: 'Code', label: 'Code'}
];
}
console.info(layerInfo);
});
}
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
Edit Hydrography
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
<div id="templateDiv"></div>
<div id="editorDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Naci,
Not sure what problem you are having but here is a full working sample:
<!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>Edit rivers and waterbodies</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.22/esri/css/esri.css" />
<style>
html,body{height:100%;width:100%;margin:0;overflow:hidden;}
#map{
padding:0;
}
#header{
font-size: 1.1em;
font-family: sans-serif;
padding-left: 1em;
padding-top:4px;
color:#660000;
}
.templatePicker {
border: none;
}
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
.dj_ie .simpleInfoWindow .content {position: relative;}
.esriAttributeInspector .atiButton{
margin-top:1px;
margin-right:45px;
}
</style>
<script src="http://js.arcgis.com/3.22/"></script>
<script>
var map;
require([
"esri/map",
"esri/tasks/GeometryService",
"esri/toolbars/edit",
"esri/dijit/AttributeInspector",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/dijit/editing/Editor",
"esri/dijit/editing/TemplatePicker",
"esri/config",
"dojo/i18n!esri/nls/jsapi",
"dojo/_base/array", "dojo/parser", "dojo/keys",
"dojo/dom-construct",
"dijit/form/Button",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map, GeometryService, Edit, AttributeInspector,
ArcGISTiledMapServiceLayer, FeatureLayer,
Color, SimpleMarkerSymbol, SimpleLineSymbol,
Editor, TemplatePicker,
esriConfig, jsapiBundle,
arrayUtils, parser, keys,
domConstruct, Button
) {
parser.parse();
// snapping is enabled for this sample - change the tooltip to reflect this
jsapiBundle.toolbars.draw.start = jsapiBundle.toolbars.draw.start + "<br>Press <b>ALT</b> to enable snapping";
// refer to "Using the Proxy Page" for more information: https://developers.arcgis.com/javascript/jshelp/ags_proxy.html
esriConfig.defaults.io.proxyUrl = "/proxy/";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new Map("map", {
basemap: "satellite",
center: [-96.541, 38.351],
zoom: 14,
slider: false
});
map.on("layers-add-result", initEditor);
//add boundaries and place names
var labels = new ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
map.addLayer(labels);
var rivers = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
var waterbodies = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer...",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([waterbodies,rivers]);
function initEditor(evt) {
var templateLayers = arrayUtils.map(evt.layers, function(result){
return result.layer;
});
var templatePicker = new TemplatePicker({
featureLayers: templateLayers,
grouping: true,
rows: "auto",
columns: 3
}, "templateDiv");
templatePicker.startup();
var layers = arrayUtils.map(evt.layers, function(result) {
return { featureLayer: result.layer };
});
var settings = {
map: map,
templatePicker: templatePicker,
layerInfos: layers,
toolbarVisible: true,
createOptions: {
polylineDrawTools:[ Editor.CREATE_TOOL_FREEHAND_POLYLINE ],
polygonDrawTools: [ Editor.CREATE_TOOL_FREEHAND_POLYGON,
Editor.CREATE_TOOL_CIRCLE,
Editor.CREATE_TOOL_TRIANGLE,
Editor.CREATE_TOOL_RECTANGLE
]
},
toolbarOptions: {
reshapeVisible: true
}
};
var params = {settings: settings};
var myEditor = new Editor(params,'editorDiv');
//define snapping options
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CROSS,
15,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.5]),
5
),
null
);
map.enableSnapping({
snapPointSymbol: symbol,
tolerance: 20,
snapKey: keys.ALT
});
myEditor.startup();
var attInspector = myEditor.attributeInspector;
//console.info(attInspector);
var saveButton = new Button({label:"save","class":"atiButton, atiDeleteButton"});
dojo.place(saveButton.domNode, attInspector.deleteBtn.domNode, "before");
arrayUtils.forEach(attInspector.layerInfos, function(layerInfo){
if(layerInfo.featureLayer === waterbodies){
layerInfo.fieldInfos = [
{fieldName: 'elevation', isEditable: true, tooltip: 'Elev', label: 'Elevation'},
{fieldName: 'reachcode', isEditable: true, tooltip: 'Code', label: 'Code'}
];
}
console.info(layerInfo);
});
}
});
</script>
</head>
<body class="claro">
<div id="main" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="height:width:100%;height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" id="header" data-dojo-props="region:'top'">
Edit Hydrography
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width: 300px;overflow:hidden;">
<div id="templateDiv"></div>
<div id="editorDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" id="map" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
I see what I was doing wrong. I wrote
var attInspector = myEditor.attributeInspector;
before myEditor.startup().
Thanks!!