Editor widget with configurations

Explore in the sandboxView live

This sample demonstrates how to add an Editor widget to a web application. In addition to adding the Editor widget, it also shows how to add the SnappingControls widget to work in conjunction with the Editor. Both of these widgets used together can be useful as it provides a way to streamline the editing experience within an application while taking advantage of snapping functionality. It also demonstrates the use of various editor configurations, particularly restricting editing capabilities via the Editor's layerInfos property and working with FeatureTemplate grouping.

For a more basic sample, see Edit features with the Editor widget.

How it works

The widget automatically recognizes if there are any editable feature layer(s) within the map. If there are available layers, they will display within the widget. 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 the fieldConfig[] property within the layerInfos property. This sample makes use of this since there are only a few attribute fields that need to be updated.

                                          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// Loop through webmap layers and set an EditConfig for each
view.map.layers.forEach((layer) => {
  if (layer.title === "Police Routes") {
    editConfigPoliceLayer = {
      layer: layer,
      // Set it so that only one field displays within the form
      fieldConfig: [
        {
          name: "PatrolType",
          label: "Patrol Type"
        }
      ]
    };
  } else {
    // Specify a few of the fields to edit within the form
    editConfigCrimeLayer = {
      layer: layer,
      fieldConfig: [
        {
          name: "fulladdr",
          label: "Full Address"
        },
        {
          name: "neighborhood",
          label: "Neighborhood"
        },
        {
          name: "ucrdesc",
          label: "UCR Description"
        },
        {
          name: "crimecategory",
          label: "Category"
        },
        {
          name: "casestatus",
          label: "Status"
        }
      ]
    };
  }
});

The Editor widget encapsulates the functionality seen in the FeatureTemplates, FeatureForm, and Sketch widgets. It is possible to customize some of these widgets' properties by setting the supportingWidgetDefaults property. In addition to customizing how the fields display within the Editor, you can also customize how the default FeatureTemplates display. By default, the Editor widget 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 FeatureTemplates widget is customized to work with this custom grouping function.

                          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// Create a custom group to separate the different areas of crime.
// This function takes a 'grouping' object containing a feature template and 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;
}

Like other widgets, the Editor widget uses the same type of coding pattern, i.e. you must set the view referenced by the widget. After this, the other properties can be set as the application's requirements dictate.

           
1
2
3
4
5
6
7
8
9
10
11
const editor = new Editor({
  view: view,
  // Pass in the configurations.
  layerInfos: [editConfigCrimeLayer, editConfigPoliceLayer],
  // Override the default template behavior of the Editor widget
  supportingWidgetDefaults: {
    featureTemplates: {
      groupBy: customGroup
    }
  },
});

Configure snapping

Snapping is configured in the Editor's constructor via its snappingOptions. This is where you would configure how snapping should be used within the application. There are two modes for snapping: self and feature snapping. In order for either of these modes to work, the global, enabled property must also be set to true. The sample is written to have both enabled.

The SnappingControls widget works by associating its snappingOptions property to whatever is set on the Editor via the Editor.snappingOptions.

By default, snapping is turned off. These following lines of code set the global snapping to true, therefore the SnappingControls UI will automatically display it turned on and snapping will be enabled. In addition, the SnappingControls widget will automatically display all layers within the map that support snapping but will not be checked on and enabled. In this sample, both the crime and police layers are set within the Editor.snappingOptions.featureSources and therefor checked on upon loading the widget.

         
1
2
3
4
5
6
7
8
9
//Toggling snapping on/off can be achieved via the CTRL key.
snappingOptions: { // autocasts to SnappingOptions
  enabled: true,
  featureSources: [
    {layer: editConfigCrimeLayer.layer},
    {layer: editConfigPoliceLayer.layer}
  ] // layer sources for feature snapping
}
}); // End Editor constructor

Known Limitations

For a comprehensive list of limitations regarding snapping, please refer to the SnappingOptions API Reference documentation.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.