This sample demonstrates how to add the Editor widget to a web application. Once the widget loads, click on the template to add and draw a feature's geometry. Once the feature sketch is complete, update any necessary attribute information. If wanting to create more than one feature at a time, continue adding new geometries while updating their associated attributes. Once all feature creates are added, click Create and any feature creates will be applied back to the feature service.
Select a feature using the Editor's select tool to update an existing feature. The corresponding form will display for any editable fields.
For additional information on these Editor updates and any limitations, please refer to the Editor API reference documentation.
How it works
Instantiate the layers and specify their LayerInfos
The application loads a webmap and iterates through all of its editable layers and instantiates each.
After layers are set, each layer's layerInfo is set. 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.
Based on the editing functionality set on a feature layer, you can select an existing feature to update or create new feature(s). The widget will take whatever editing capabilities are set on the service.
It is possible to override some of these capabilities by setting specific properties within the widget's layerInfos. Properties such as enabled, updateEnabled, deleteEnabled, attributeUpdatesEnabled, attachmentsOnUpdateEnabled, geometryUpdatesEnabled, and attachmentsOnCreateEnabled can be specified to further constrain edits per layer and specific workflow.
It is not possible to override read-only permissions set on the feature service. For example, if a service is set up to restrict edits on a layer, it is not possible to override these restrictions via the API to allow them.
Use dark colors for code blocksCopy
1
2
3
4
5
// Begin Editor constructorconst editor = new Editor({
view: view,
layerInfos: [pointInfos, lineInfos, polyInfos]
}); // End Editor constructor
The Editor uses the same coding pattern as other widgets, i.e. you must specify the view to be used by the widget.
Lastly, we add the widget to the application using the View's UI.
Use dark colors for code blocksCopy
1
2
// Add the widget to the viewview.ui.add(editor, "top-right");