Edit feature data

Learn how to add, update, and delete data in a hosted feature layer.

Prerequisites

Steps

Create a feature layer

For this tutorial, you will use the Santa Monica Parcels dataset to create a private hosted feature layer in your portal.

1. In your web browser, go to the Santa Monica Parcels item.

2. Click the Download button to download the zip file locally. Do not unzip this file.

3. Import the shapefile into ArcGIS.

   1. Sign in to your ArcGIS portal.

   2. In the top navigation bar, click Content.

   3. Click New item. To upload the Santa Monica Parcels shapefile, you can either:

      • Drag and drop the file.
      • Or, click Your device and navigate to the file path.

   4. Select Add Santa Monica Parcels.zip to publish the file as a hosted feature layer.

   5. In Fields, leave all fields at their default settings and click Next.

   6. In Location settings, leave the default settings and click Next.

   7. Set the following information in the item details pane:

      • Title: Santa Monica Parcels
      • Tags: Santa Monica Parcels.
      • Summary: Parcels in the Santa Monica Mountains.

   8. Click Next to create the new feature layer and feature service.

   9. In the feature service item page, make sure the Share setting is set to Owner.

   10. Scroll down to the URL section and copy the URL into a safe location. You will use this in a later step. The URL will look something like:

   Use dark colors for code blocksCopy

   1
   https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Parcels/FeatureServer

4. In the feature layer item page, go to Settings.

5. Under Feature layer (hosted), check the Enable editing box.

6. Save your changes.

Create a new app

1. Open a terminal and create a new folder for your project.

   Use dark colors for code blocksCopy

   1
   2
   mkdir edit-feature-data
   cd edit-feature-data

2. Initialize a new Node.js project. This creates a package.json file.

   Use dark colors for code blocksCopy

   1
   npm init

3. Install the required packages.

   Use dark colors for code blocksCopy

   1
   npm install @esri/arcgis-rest-request @esri/arcgis-rest-feature-service --save

4. Create a new JavaScript file named index.js.

   Use dark colors for code blocksCopy

   1
   touch index.js

Get an access token

Create a new API key credential with the correct privileges to get an access token.

1. Go to the Create an API key tutorial and create an API key with the following privilege(s):
   
   • Item access
     • Note: If you are using your own custom data layer for this tutorial, you need to grant the API key credentials access to the layer item. Learn more in Item access privileges.
2. Copy the API key access token to your clipboard when prompted.

Make a request

1. Open your index.js file and import the library.

   index.js

   Use dark colors for code blocks

   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
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   
   import { ApiKeyManager } from "@esri/arcgis-rest-request";
   import { addFeatures, updateFeatures, deleteFeatures } from "@esri/arcgis-rest-feature-service";
   
   

2. Paste in your access token.

   index.js

   Use dark colors for code blocks

   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
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   
   import { ApiKeyManager } from "@esri/arcgis-rest-request";
   import { addFeatures, updateFeatures, deleteFeatures } from "@esri/arcgis-rest-feature-service";
   
   const accessToken = "YOUR_ACCESS_TOKEN";
   const authentication = ApiKeyManager.fromKey(accessToken);
   
   

3. Add a new feature to your layer and print the results to the console.

   index.js

   Expand

   Use dark colors for code blocks

   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
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   const featureServiceLayerUrl = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/my_points/FeatureServer/0";
   
   const featureToAdd = {
     attributes: {
       id: 101,
       name: "editing test",
       rating: "2"
     },
     geometry: {
       x: -118.807,
       y: 34.002,
       spatialReference: {
         wkid: 4326
       }
     }
   };
   
   addFeatures({
     url: featureServiceLayerUrl,
     features: [featureToAdd],
     authentication
   }).then(async (response) => {
     console.log(JSON.stringify(response, null, 2));
   
     if (!response.addResults[0].success) {
       return;
     }
   
   });

4. Update the feature you just added and print the results to the console.

   index.js

   Expand

   Use dark colors for code blocks

   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
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
     const featureToUpdate = {
       attributes: {
         objectId: response.addResults[0].objectId,
         name: "new name",
         rating: "3"
       }
     };
   
     const updateResponse = await updateFeatures({
       url: featureServiceLayerUrl,
       features: [featureToUpdate],
       authentication
     });
   
     console.log(updateResponse);
   
     if (!updateResponse.updateResults[0].success) {
       return;
     }
   

   Expand

5. Delete the updated feature and print the results to the console.

   index.js

   Expand

   Use dark colors for code blocks

   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
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
     const featureToDelete = [updateResponse.updateResults[0].objectId];
   
     const deleteResponse = await deleteFeatures({
       url: featureServiceLayerUrl,
       objectIds: [featureToDelete],
       authentication
     });
   
     console.log(deleteResponse);
   

   Expand

6. Save the file, then run it from the terminal.

   Use dark colors for code blocksCopy

   1
   node index.js

You should now see the results printed in your console.

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
[
  {
    "addResults": [
      {
        "objectId": 5948,
        "uniqueId": 5948,
        "globalId": null,
        "success": true
      }
    ]
  },
  {
    "updateResults": [
      {
        "objectId": 5948,

What's next?

Learn how to use additional location services in these tutorials: