This sample demonstrates how to add the Editor to a web application. It also demonstrates the use of various editor configurations, particularly restricting editing capabilities via the Editor’s layerInfos property and working with Feature Template grouping.
For a more basic sample, see Edit features with the Editor.
How it works
The Editor automatically recognizes if there are any editable feature layer(s) within the map. If there are available layers, they will display within the component. Based on the editing functionality set on the feature layer, you can update and/or create new features. These two workflows can be adjusted to what is needed within the application. For example, let’s say you have a feature layer that has full editing capabilities set on it. But for one specific application, you may not need or want the editor to create any new features. You can restrict this by setting addEnabled: false in the layerInfos property. This will disable feature creation.
In addition to this, it is also possible to limit what fields are displayed and how you wish to display them. You can do this by setting each layer’s layerInfo. This takes the layer and a form template with an array of field elements. These field elements specify what values should be updated by the Editor. This sample makes use of this since there are only a few attribute fields that need to be updated.
Starting at version 4.23, the Editor automatically includes Snapping Controls. It is no longer necessary to manually add snapping via the Editor’s API.
For additional information on these Editor updates and any limitations, please refer to the Editor API reference documentation.
viewElement.map.layers.forEach((layer) => { // Loop through the webmap's layers and set an edit configuration if (layer.title === "Police routes") { editConfigPoliceLayer = { layer, // autocastable to FormTemplate // Set it so that only one field displays within the form formTemplate: { elements: [ { // autocastable to FieldElement type: "field", fieldName: "PatrolType", label: "Patrol Type", }, ], }, }; } else { // Specify a few of the fields to edit within the form editConfigCrimeLayer = { layer, formTemplate: { // autocastable to FormTemplate elements: [ { // autocastable to FieldElement type: "field", fieldName: "fulladdr", label: "Full Address", }, { type: "field", fieldName: "neighborhood", label: "Neighborhood", }, { type: "field", fieldName: "ucrdesc", label: "UCR Description", }, { type: "field", fieldName: "crimecategory", label: "Category", }, { type: "field", fieldName: "casestatus", label: "Status", }, ], }, }; } });The Editor encapsulates the functionality seen in the Feature Templates, Feature Form, and SketchViewModel. It is possible to customize some of these component’s properties by setting the supportingWidgetDefaults property. In addition to customizing how the fields display within the Editor, you can also customize how the default Feature Templates display. By default, the Editor component shows all the layers’ templates in one group. To make it easier to distinguish, this sample makes use of a custom function created to help group these templates. In this example, the default behavior of the Feature Templates component is customized to work with this custom grouping function.
// Create a custom group to separate the different areas of crime. // This function takes a 'grouping' object which contains a feature template and a feature layer. function customGroup(grouping) { // If the layer is 'Police routes', do not group. let groupHeading = "Police Routes";
if (grouping.layer.title.toLowerCase() === "crime map") { switch (grouping.template.name) { case "Criminal Homicide": case "Rape": case "Robbery": case "Aggravated Assault": groupHeading = "Violent Crime"; break;
case "Arson": case "Burglary": case "Larceny": case "Motor Vehicle Theft": groupHeading = "Property Crime"; break;
default: groupHeading = "Quality of Life"; } }
return groupHeading; }