topic Re: AutoPopulate field in ArcGIS JavaScript Maps SDK Questions

AutoPopulate field

NickErlacker — Mon, 12 May 2014 19:47:01 GMT

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

Re: AutoPopulate field

JeffPace — Mon, 12 May 2014 20:42:46 GMT

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

Re: AutoPopulate field

NickErlacker — Sat, 11 Dec 2021 23:38:40 GMT

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

Re: AutoPopulate field

HectorChapa — Sat, 11 Dec 2021 23:38:42 GMT

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

Re: AutoPopulate field

NickErlacker — Thu, 15 May 2014 12:50:30 GMT

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?

Re: AutoPopulate field

HectorChapa — Fri, 16 May 2014 12:11:31 GMT

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.

Re: AutoPopulate field

HectorChapa — Fri, 16 May 2014 23:23:04 GMT

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

Thanks,

Re: AutoPopulate field

MatthewGoulet1 — Fri, 24 Oct 2014 20:52:13 GMT

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

Re: AutoPopulate field

HectorChapa — Fri, 24 Oct 2014 20:55:51 GMT

Hey Matthew what code do you need.

I have to code to autoPopulate a field.

Re: AutoPopulate field

HectorChapa — Fri, 24 Oct 2014 20:56:03 GMT

Do you have teamviewer?

Re: AutoPopulate field

MatthewGoulet1 — Fri, 24 Oct 2014 20:58:06 GMT

No, I don’t unfortunately.

Re: AutoPopulate field

MatthewGoulet1 — Fri, 24 Oct 2014 20:58:31 GMT

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

Re: AutoPopulate field

HectorChapa — Fri, 24 Oct 2014 20:59:54 GMT

This is what I did.

map.addLayers([events]);

	function initEditor(evt) {
	var featureLayer = evt.layers[0].layer;

	dojo.connect(featureLayer,'onBeforeApplyEdits',function(adds,deletes,updates){
	dojo.forEach(adds,function(add){

	if(add.attributes['psap'] === null){
	add.attributes['psap'] = psap;
	}
	});
	});

Re: AutoPopulate field

HectorChapa — Fri, 24 Oct 2014 21:00:38 GMT

here is my email if you need more help hchapa@lrgvdc911.org

Email me and I give you my work number so you can see what I did.

Re: AutoPopulate field

MatthewGoulet1 — Mon, 27 Oct 2014 13:44:01 GMT

Hector, you solution worked great! Thanks a lot.

The only thing that tripped me up was the placement of the code. In my case, the .connect functions were not firing until I moved them out of initEditor(evt) function. I put the onBeforeApplyEdits hook just before the .addLayers calls, and it worked perfectly.

Thanks again!

Re: AutoPopulate field

HectorChapa — Mon, 27 Oct 2014 13:48:11 GMT

I am glad I could help. I have develop many applications and I created libraries for many of the questions I ask and I have solved. Please email me I provided my contact information I am glad to help in the future.

Re: AutoPopulate field

LindaDunklee — Tue, 29 Mar 2016 18:59:51 GMT

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

Thanks!

Re: AutoPopulate field

HectorChapa — Tue, 17 May 2016 13:10:08 GMT

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>