nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

AutoPopulate field

NickErlacker

When one is editing a Feature Layer in the JavaScript viewer and they add a new feature. Is there a way to auto populate a particular field?
I know you can set a default value in the database for that field. But I want the value to be based off of the Day and time in one string of numbers. I read that you can use the before-apply-edits event? How ? is there an example out there that shows this ? Or any example that shows how to auto populate a field with the editor widget?

Thank you
Nick

Find more posts tagged with

Accepted answers

JeffPace1

I do this to autopopulate the editor field with the logged in user name

(i use the attribute Inspector)
so the "USER_" field, which is listed as a noneditableField (so they cant override it), gets populated

var attInspector = new AttributeInspector({             layerInfos:layerInfos           }, "attributesDiv");            attInspector.on("attribute-change", function(evt) {                var feature = evt.feature; //keep all fields the same from the input                feature.attributes[evt.fieldName] = evt.fieldValue; //override the USER_ field with the userId from the credentials object                feature.attributes.USER_ = esri.id.credentials[0].userId; //apply attribute update                feature.getLayer().applyEdits(null, [feature], null); //refresh to show the 'behind the scenes' edit                attInspector.refresh();           });

All comments

HectorChapa

I am adding a updated version of the code using AMD for anyone that is interested using. The one I provided was Legacy Dojo using dojo.connects.

I just wrote this five minutes ago. With this one you don't have to worry were the listener goes inside the function. This is a working exmaple.

The way it works once you click on the map to add a point then before apply edits executes and in there you tell javascript to edit a particular field automatic. It auto populates that field. Look for the listener that say before-apply-edits and I apply it to a particular attribute.

My Contact information:

email: hchapa@lrgvdc911.org

phone: 956-682-3481 ext. 143

<!DOCTYPE html>

<html>

<head>

<title>Edit rivers and waterbodies</title>

<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; }

</style>

var map;

require([

"esri/map",

"esri/tasks/GeometryService",

"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",

"dijit/layout/BorderContainer", "dijit/layout/ContentPane",

"dojo/domReady!"

], function(

Map, GeometryService,

ArcGISTiledMapServiceLayer, FeatureLayer,

Color, SimpleMarkerSymbol, SimpleLineSymbol,

Editor, TemplatePicker,

esriConfig, jsapiBundle,

arrayUtils, parser, keys

) {

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/3/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("https://utility.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("https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");

map.addLayer(labels);

var responsePoints = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ['*']

});

var responsePolys = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/2", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ['*']

});

map.addLayers([responsePolys, responsePoints]);

responsePoints.on("before-apply-edits", function(evt){

console.log(evt);

if(evt.adds[0])

{

//Here you choose which attribute to update...

evt.adds[0].attributes.description = "Testing this one out works fine";

}

});

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]),

null

);

map.enableSnapping({

snapPointSymbol: symbol,

tolerance: 20,

snapKey: keys.ALT

});

myEditor.startup();

}

});

</script>

</head>

Edit Hydrography

</div>

</div>

</div>

</body>

</html>

LindaDunklee

Can someone clarify inside of the sample provided where Hector's code goes? This would be hugely helpful!

Thanks!

MatthewGoulet1

Yes, it's the code to auto-populate a field.

MatthewGoulet1

No, I don’t unfortunately.

HectorChapa

Do you have teamviewer?

HectorChapa

Hey Matthew what code do you need.

I have to code to autoPopulate a field.

MatthewGoulet1

Hi, Hector. I would love to see that code! I am struggling w/ the same problem as above.

HectorChapa

Are you using template picker. if yes could I see your full snippet of code.

Thanks,

HectorChapa

I have a feature class that I put points on the map. When I put a point on the map a info window appears to input the values.
One of the fields from that info window I would like to autopopulate that information that is what I am asking. But the problem is that I have no clue how to do it. Could you help me.

NickErlacker

I am not sure what you are asking? but I used the event for the feature class called 'update' to trigger the function as seen in my previous post to run and get the first id in the editior infowindow and enter in a value.

Is this what you are asking?

HectorChapa

This is exactly what I am trying to do. I am learning javascript api but I done couple of great things with it but I need help.

This is my code that I am using for the map. I dont know how to implemented on my feature class I want to auto populate what
ever I wanted to say.
Could you please help me to add this to my feature class check out my code let me know how could I implement this.

require([
        "esri/map", 
        "esri/tasks/GeometryService",
        "esri/toolbars/edit",
   "esri/graphic",
        "esri/Color",
        
        "esri/dijit/HomeButton",
        "esri/dijit/BasemapGallery",
        "esri/dijit/LocateButton",
  "esri/dijit/Geocoder",

       "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",

        "esri/dijit/editing/Editor",
        "esri/dijit/editing/TemplatePicker",

        "esri/config",
        "dojo/i18n!esri/nls/jsapi",
  "dojo/on",

        "dojo/_base/array", "dojo/parser", "dojo/keys",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
        "dojo/domReady!"
      ], function(
        Map, GeometryService, Edit,
  Graphic, Color,
        HomeButton, BasemapGallery, LocateButton,
  Geocoder,
        ArcGISDynamicMapServiceLayer, FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol, 
        Editor, TemplatePicker,
        esriConfig, jsapiBundle,
  on,
        arrayUtils, parser, keys
      ) {
        parser.parse();       

      
        //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: "streets",
          center: [-98.185272, 26.282376],
          logo: false,
          sliderStyle: 'large',
          zoom: 9,
        });
        
        
        
         var home = new HomeButton({
          map: map
        }, "HomeButton");
        home.startup();
        
         geoLocate = new LocateButton({
        map: map
      }, "LocateButton");
      geoLocate.startup();
   
   var geocoder = new Geocoder({
          arcgisGeocoder: false,
          autoComplete: true,
    zoomScale:1000,
          geocoders: [ {
            url: "http://maps.lrgvdc911.org:6080/arcgis/rest/services/Public_Outreach/SDE_ADDRESS_POINTS_130917_Create2/GeocodeServer",
            name: "LRGVDC ",
            placeholder: "Locate",
            outFields: "*",
            singleLineFieldName: "SingleLine"

          }], 
          map: map
        }, "search");
        
     geocoder.on('select', function (candidate) {
       for(var i = 0; i< 20; i++)
       {
          var geom = candidate.result.feature.geometry;
          var symbol = new SimpleMarkerSymbol();
          
          symbol.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
          symbol.setColor(new Color([155, 0, 61, 0.75]));
          var graphic = new Graphic(geom, symbol);
          map.graphics.clear();
          map.graphics.add(graphic);
          
       }
        
    })
 
 
    geocoder.on('clear', function(){
      map.graphics.clear();
    })
  
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();
        
        basemapGallery.on("error", function(msg) {
          console.log("basemap gallery error:  ", msg);
        }); 
        
        
        

        map.on("layers-add-result", initEditor);
       
        //add boundaries and place names 
        var dynamic = new ArcGISDynamicMapServiceLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/STEAR/STEAR_DYNAMIC/MapServer");
        map.addLayer(dynamic);

        var events = new FeatureLayer("http://maps.lrgvdc911.org:6080/arcgis/rest/services/Public_Outreach/EVENTS/FeatureServer/0",{
          mode: FeatureLayer.MODE_ONDEMAND, 
          outFields: ['EVENT_NAME', 'date','address', 'psap']
        });

        

        map.addLayers([events]);

        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: 1
          }, "draggable");
          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();
        }
      });

NickErlacker

Thank you I see make sense.
After looking at it I tried using the DOM and used on a update event

on(editLayer, 'update', function (evt) {
                               populateNumber();
                           });
                       });

 function populateNumber(){
 var input = document.getElementById('dijit_form_TextBox_0');

 if(input.value.length == 0)
    input.value = "Empty";

It takes the first input in the Editior widget and assigns it an Empty if it is blank

Thank you for your post

JeffPace1

var attInspector = new AttributeInspector({             layerInfos:layerInfos           }, "attributesDiv");            attInspector.on("attribute-change", function(evt) {                var feature = evt.feature; //keep all fields the same from the input                feature.attributes[evt.fieldName] = evt.fieldValue; //override the USER_ field with the userId from the credentials object                feature.attributes.USER_ = esri.id.credentials[0].userId; //apply attribute update                feature.getLayer().applyEdits(null, [feature], null); //refresh to show the 'behind the scenes' edit                attInspector.refresh();           });

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.