Attribute Inspector with custom widget | ArcGIS API for JavaScript 3.26

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.26/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.26/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.26/"></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>

	Site wide shortcuts
`?`	Bring up this help dialog
`esc`	Dismiss this help dialog
`gh`	Go to Home
`gg`	Go to Guide
`ga`	Go to API Reference
`gs`	Go to Sample Code
`gt`	Scroll to top of page
`spacebar`	Scroll page down
`shift spacebar`	Scroll page up
`gb`	Scroll to bottom of page

	Sample Code
`/`	Focus search
`es`	Explore in the Sandbox
`s`	Share in online code editor
`vl`	View live example

Explore in the sandbox Share View live sample Download as a zip file

Description

Code

Keyboard shortcuts

Explore in the sandbox Share
View live sample
Download as a zip file