Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Attribute Inspector with custom widget
Explore in the sandbox
Open in CodePen
View live sample
Download as a zip file
Description
Version 2.2 of the ArcGIS API for JavaScript added the ability to specify a custom dijit as the editor for fields in the attribute inspector widget. This sample replaces a default text box with Dojo's ValidationTextBox. A ValidationTextBox is a widget that checks the users input against specified validation rules. Here a new ValidationTextBox is created and a regular expression is set that checks to make sure the input is a phone number.
var myDijit = new dijit.form.ValidationTextBox({regExp : "\\(?(\\d{3})\\)?[- ]?(\\d{3})[- ]?(\\d{4})",
required : false,
promptMessage: "Enter phone number",
invalidMessage : "Enter valid phone number"
});
After creating the custom widget, create a new field infos object and enter the newly created widget for the field you want to replace. In this snippet the phone number field is set to use the ValidationTextBox.
var layerInfos = [{'featureLayer':featureLayer,
'showAttachments':false,
'showDeleteButton':false,
'fieldInfos':[
{'fieldName':'name','label':'Name'},
{'fieldName':'email','label':'Email'},
{'fieldName':'phone','label':'Phone','customField':myDijit},
{'fieldName':'note','label':'Details', 'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA},
{'fieldName':'notedate','label':'Date'}
]
}];
Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Validate Attributes</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
.dj_ie .infowindow .window .top .right .user .content { position: relative; }
.dj_ie .simpleInfoWindow .content {position: relative;}
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; }
#leftPane{
overflow:hidden;
border:none;
color:#5C832F;
}
#map{
border: solid medium #382513;
padding:0;
}
.esriAttributeInspector{
atiLayerName:'Building Details'
}
.templatePicker{
border:none !important;
}
.templatePicker .grid .groupLabel{
display:none;
}
</style>
<script>var dojoConfig = { parseOnLoad:true };</script>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
//require selection dijit
dojo.require("esri.map");
dojo.require("esri.dijit.editing.Editor-all");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.form.ValidationTextBox");
var map;
function init() {
//This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esri.config.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.
esri.config.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map = new esri.Map("map", {
basemap: "topo",
center: [-117.282, 34.289],
zoom: 13,
slider: false
});
dojo.connect(map, "onLayersAddResult", initEditor);
//Add the editable feature layer to the map
var pointsOfInterest = new esri.layers.FeatureLayer("https://services5.arcgis.com/lVkj5PBOw7tRmIPU/arcgis/rest/services/Notes/FeatureServer/1",{
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
map.addLayers([pointsOfInterest]);
}
function initEditor(results) {
//only one layer
var featureLayer = results[0].layer;
var templatePicker = new esri.dijit.editing.TemplatePicker({
featureLayers: [featureLayer],
rows: 'auto',
groupingEnabled:false,
columns: 1
},'editorDiv');
templatePicker.startup();
//define the fields the attribute inspector contains
//phone number ^\\(?(\\d{3})\\)?[- ]?(\\d{3})[- ]?(\\d{4})$
//zip code ^(\\d{5}-\\d{4})|(\\d{5})$
var myDijit = new dijit.form.ValidationTextBox({
regExp : "\\(?(\\d{3})\\)?[- ]?(\\d{3})[- ]?(\\d{4})",
required : false,
promptMessage: "Enter phone number",
invalidMessage : "Enter valid phone number"
});
var layerInfos = [{
'featureLayer':featureLayer,
'showAttachments':false,
'showDeleteButton':false,
'fieldInfos':[
{'fieldName':'name','label':'Name'},
{'fieldName':'email','label':'Email'},
{'fieldName':'phone','label':'Phone','customField':myDijit},
{'fieldName':'note','label':'Details', 'stringFieldOption':esri.dijit.AttributeInspector.STRING_FIELD_OPTION_TEXTAREA},
{'fieldName':'notedate','label':'Date'}
]
}];
//define the editor settings
var settings = {
map: map,
templatePicker:templatePicker,
layerInfos:layerInfos
};
var params = {settings: settings};
//Create the editor widget
var editorWidget = new esri.dijit.editing.Editor(params);
editorWidget.startup();
//resize the info window (attribute inspector)
map.infoWindow.resize(295,245);
}
dojo.ready(init);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%;height:100%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>
<div id="leftPane" data-dojo-type="dijit.layout.ContentPane" style="width:100px;" data-dojo-props="region:'left'">
<div>Click the Notes icon - then click location on map to add new map note. When a new phone number is
entered dojo's ValidationTextBox is used to make sure a properly formatted phone number is entered.</div>
<div id="editorDiv"></div>
<div></div>
</div>
</div>
</body>
</html>