topic Re: Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the loc in ArcGIS JavaScript Maps SDK Questions

Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the locator

Den-GIS — Sat, 28 Oct 2023 17:04:57 GMT

Hello everyone,

I'm trying to automatically fill the input fields of Editor Widget with the address information. I use the locator to get the address and lat/long. The editor widget and locator work well separately in the application. All my previous attempts to add the results from the locator into the input fields of the form template of the editor widget have failed. My problem is that I cannot transfer the results from the locator to the ExpressionInfos and then further into the Field Elements.
I looked at the following examples e.g. (Editing with calculated field expressions | Sample Code | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers, Edit features with the Editor widget | Sample Code | ArcGIS Maps SDK for JavaScript 4.28 | ArcGIS Developers, ). Does anyone have any idea how can I solve this problem? I am very grateful for every hint!
Here is my code:

import MapView from "esri/views/MapView";

import EsriMap from "esri/Map";

import FeatureLayer from "esri/layers/FeatureLayer";

import Basemap from "esri/Basemap";

import VectorTileLayer from "esri/layers/VectorTileLayer";

import Editor from 'esri/widgets/Editor';

import FieldElement from 'esri/form/elements/FieldElement'

import FormTemplate from 'esri/form/FormTemplate'

import ExpressionInfo from 'esri/form/ExpressionInfo'

import locator from "esri/rest/locator";

const basemap = new Basemap({

baseLayers: [

new VectorTileLayer({

url: osm

})

title: "Basemap",

id: "basemap"

});

const map = new EsriMap({

basemap: basemap

})

const view = new MapView({

map: map,

container: "viewDiv",

center: [-78.50169, -0.21489],

zoom: 12

});

/**############################### Editing Layer ################################# */

let accidentsPointLayer = new FeatureLayer({

url: car_accidents,

title: "Car accidents",

visible: true,

opacity: 1.0,

popupTemplate: popupEditingLayers

})

map.add(accidentsPointLayer);

// ############## Locator #########################

const serviceUrl = "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";

view.on("click", function (evt) {

const params = {

location: evt.mapPoint

};

locator.locationToAddress(serviceUrl, params).then(

function (response) {

const res = response;

console.log(res);

const house_number = response.attributes.AddNum;

const street = response.attributes.Address;

const city = response.attributes.City;

const district = response.attributes.District;

const postal_code = response.attributes.Postal;

const lat = response.location.latitude;

const long = response.location.longitude;

showAddress(house_number, street, city, district, postal_code, lat, long);

}

);

});

function showAddress(house_number: string, street: string, city: string, district: string, postal_code: string, lat: number, long: number) {

console.log(house_number);

console.log(street);

console.log(city);

console.log(district);

console.log(postal_code);

console.log (lat);

console.log(long);

}

// ExpressionInfos for the Form Template

const houseNumberExpression = new ExpressionInfo({

expression: "",

title: "house_number",

returnType: "string"

});

const streetExpression = new ExpressionInfo({

expression: "",

title: "street",

returnType: "string"

});

const cityExpression = new ExpressionInfo({

expression: "",

title: "city",

returnType: "string"

});

const districtExpression = new ExpressionInfo({

expression: "",

title: "district",

returnType: "string"

});

const postalCodeExpression = new ExpressionInfo({

expression: "",

title: "postal_code",

returnType: "string"

});

const latExpression = new ExpressionInfo({

expression: "",

title: "latitude",

returnType: "number"

});

const longExpression = new ExpressionInfo({

expression: "",

title: "longitude",

returnType: "number"

});

// Field Elements for the Feature Form

const fieldElement1 = new FieldElement({

fieldName: "houseNR",

label: "House Number",

valueExpression: ''

});

const fieldElement2 = new FieldElement({

fieldName: "street",

label: "Street",

valueExpression: ''

});

const fieldElement3 = new FieldElement({

fieldName: "city",

label: "City",

valueExpression: ''

});

const fieldElement4 = new FieldElement({

fieldName: "district",

label: "District"

});

const fieldElement5 = new FieldElement({

fieldName: "postalCode",

label: "Postal Code"

});

const fieldElement6 = new FieldElement({

fieldName: "lat",

label: "X"

});

const fieldElement7 = new FieldElement({

fieldName: "long",

label: "Y"

});

const addressformTemplate = new FormTemplate({

title: "Data editing",

description: "Please enter all relevant information in the fields provided below",

elements: [fieldElement1, fieldElement2, fieldElement3, fieldElement4, fieldElement5, fieldElement6, fieldElement7],

expressionInfos: [houseNumberExpression, streetExpression, cityExpression, districtExpression, postalCodeExpression, latExpression, longExpression ]

});

viewMap.when(() => {

viewMap.map.editableLayers.forEach((layer) => {

if (layer.type === "feature" && layer.title === "Car accidents") {

layer.formTemplate = addressformTemplate;

}

});

const editor = new Editor({

view: viewMap,

container: document.getElementById("editor")

});

viewMap.ui.add("panelContent", "manual")

})

Re: Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the loc

Den-GIS — Thu, 02 Nov 2023 16:02:04 GMT

So, after taking a few days to read all the ArcGIS JS API documentation regarding the Editor Widget, Sketch Widget, Feature Form Widget, Feaure Templates and all their view models, methods and events, in the end I succeeded. If anyone else wants to use this advanced functionality of the Editor Widget (version ArcGIS JS API 4.28) (in the web app builder as part of the Smart Editor Widget), here is the code. I hope that this self-understanding functionality will be implemented as a standard "property" in the editor widget at some point. When new features are recorded, in addition to special data, the address, coordinates and date are usually recorded. Nowadays, app users expect that when they create a new object, they don't at least have to type in the address. By the way, this reduces typing errors and data administration. That's why I needed it and was important to me to implement. As I said, I hope this functionality will come standard in the next versions of the ArcGIS JS API. Nevertheless, I would like to give a lot of praise to the ESRI ArcGIS JS API development team because they always leave a “way” open to implement the desired functionality themselves if necessary, even if it is painful for days. 👏😊

viewMap.when(() => {

// Create the Editor

const editor = new Editor({

view: viewMap,

container: document.getElementById("editor")

});

// Starts monitoring when the user has clicked Feature Template in Editor Widget to draw (add) a new object to the map.

editor.viewModel.featureTemplatesViewModel.on("select", (evtTemplate) => {

// Get the current date and time for the date field (UTC time)

const datetime = Date.now();

// Monitoring when the sketch widget has started drawing the object

editor.viewModel.sketchViewModel.on("create", function (event) {

// When the drawing has reached the status of "complete", get the geometry

if (event.state === "complete") {

let geom = event.graphic.geometry;

//If the drawing is of type "polyline" or "polygon" get the coordinates (Point) from the center of the geometry.

//The point is required as a parameter for the locator

if (geom.type === "polyline" || geom.type === "polygon") {

let center = geom.extent.center;

console.log(center);

const params = {

location: center

};

// Get the address using the locator

locator.locationToAddress(locatorServiceURL, params).then(

function (response) {

const res = response;

const house_number = response.attributes.AddNum;

const street = response.attributes.Address;

const city = response.attributes.City;

const district = response.attributes.District;

const postal_code = response.attributes.Postal;

const lat = response.location.latitude;

const long = response.location.longitude;

//With the method setValue() of the FeatureFormViewModel,

//the results from the locator are added to the attribute fields (feature form) of the editor widget

editor.viewModel.featureFormViewModel.setValue('city', city);

editor.viewModel.featureFormViewModel.setValue('district', district)

editor.viewModel.featureFormViewModel.setValue('street', street);

editor.viewModel.featureFormViewModel.setValue('houseNr', house_number);

editor.viewModel.featureFormViewModel.setValue('date', datetime);

}

);

} else if (geom.type === "point") {

//If the drawing is of type "point" create (Point) from the geometry and pass it to Locator.

let point = new Point(geom);

const params = {

location: point

};

locator.locationToAddress(locatorServiceURL, params).then(

function (response) {

const res = response;

console.log(res);

const house_number = response.attributes.AddNum;

const street = response.attributes.Address;

const city = response.attributes.City;

const district = response.attributes.District;

const postal_code = response.attributes.Postal;

const lat = response.location.latitude;

const long = response.location.longitude;

editor.viewModel.featureFormViewModel.setValue('city', city);

editor.viewModel.featureFormViewModel.setValue('district', district)

editor.viewModel.featureFormViewModel.setValue('street', street);

editor.viewModel.featureFormViewModel.setValue('houseNr', house_number);

editor.viewModel.featureFormViewModel.setValue('date', datetime);

editor.viewModel.featureFormViewModel.setValue('lat', lat);

editor.viewModel.featureFormViewModel.setValue('long', long);

}

);

}

});

})

Re: Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the loc

BlakeTerhune — Thu, 02 Nov 2023 16:34:15 GMT

I really appreciate you posting the solution when you found it. Many people don't, and it's a shame. Could you format the code in a code block?

Re: Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the loc

Den-GIS — Fri, 03 Nov 2023 13:29:10 GMT

Yes I agree with you. here is the codepen ArcGIS Maps SDK for JS - Editor Widget with Locator (codepen.io)

Re: Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the loc

DavinShokes1 — Fri, 23 Feb 2024 20:51:07 GMT

Thank you for this sample @Den-GIS. I had a similar app need that would pull locator data based on the users address search. The features are created client side and displayed via popup. After seeing your sample, I might switch from a popup to a featureformviewmodel to allow for additional user input. Here is the code pen if it helps anyone. https://codepen.io/Treemapper/pen/abMgLNW

Re: Application with Editor Widget and TypeScript - automatically fill the input fields of the editor widget with the address information from the loc

ThomasRohleder — Fri, 21 Nov 2025 08:41:56 GMT

Thanks a lot for the great explanation and solution — super helpful!

I’m still having trouble figuring out how to tap into the event triggered when a feature is selected on the map via the Editor.

Any ideas on how to do that?