Arcgis on Josh Werts

Monkey-patching the ESRI JSAPI to mock services

Fri, 23 Mar 2018 13:41:03 -0400

Lately I’ve been working on a project where I’m unable to access the client’s ArcGIS Server services directly and don’t have the data/environment to publish locally. Working directly on the server is slow and I wanted a way to mock in a few services just to get started on some UI elements. There are some online services that help w/ mocking HTTP calls, but I didn’t really want to put the data out there in the cloud….

So how about some monkey-patching?

Concept

Here’s the basic concept - since nothing is really closed in JavaScript, we can intercept global functions, perform some action and then allow the function to continue as usual. Here’s a simple example - let’s say we want to log the url of all XHR requests to the console:

// place this anonymous closure somewhere in your code before any service calls.
// could be in a script tag in index.html for instance.
(function (open) {

  // REPLACE the open function with a new function
  XMLHttpRequest.prototype.open = function (method, url, async, user, password) {

    // log out the url
    console.log('XHR request to: ', url);

    // after we do our work, call the ORIGINAL open function so we continue normally.
    open.apply(this, arguments);
  };

  // pass the ORIGINAL function in as a parameter.
})(XMLHttpRequest.prototype.open);

Example output in Chrome console:

FeatureLayer (XHR) Example

Some of the JSAPI uses XHR to pass queries. For instance, this is an example of intercepting and mocking out service calls from a JSAPI 4.6 FeatureLayer. In this case, we’re just checking the URL on each call and changing it to our JSON (which is simply previous ArcGIS Server calls saved out into .json files). There are 3 steps here based on how ESRI has implemented the FeatureLayer:

When the FeatureLayer is instantiated, a call is made to the endpoint w/ f=json to retrieve the service’s schema.
At 4.x ESRI performs a returnCountOnly call to get the total count of features.
Then, the API tries to iterate through the objectIds with actual query calls to get all of the features, but we’re just returning a single response. There’s a major gotcha here: Make sure "exceededTransferLimit": false is set to false in the json or the API will just keep iterating indefinitely trying to get all of the features.

(function (open) {
  XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
    if (url === 'https://server/arcgis/rest/services/myservice/MapServer/5?f=json') {
      console.log('open', method, url, async, user, password);
      url = 'https://localhost:8080/app/mocks/ags/my_ags_service_info.json';
    }

    if (url.indexOf('https://server/arcgis/rest/services/myservice/MapServer/5/query') > -1) {
      if (url.indexOf('returnCountOnly') > -1) {
        console.log('open', method, url, async, user, password);
        url = 'https://localhost:8080/app/mocks/ags/my_ags_service_5_values_count.json';
      } else {
        console.log('open', method, url, async, user, password);
        url = 'https://localhost:8080/app/mocks/ags/my_ags_service_5_values.json';
      }
    }
    open.apply(this, arguments);
  };
})(XMLHttpRequest.prototype.open);

QueryTask (jsonp) Example

Other parts of the API use jsonp instead of XHR to handle requests so we can’t intercept via XMLHttpRequest. Here’s a slightly different approach to handle a QueryTask.execute call by patching the class’s execute function itself.

// NOTE: requires here are with a Webpack setup.
import QueryTask = require('esri/tasks/QueryTask');
import Point = require('esri/geometry/Point');
import FeatureSet = require('esri/tasks/support/FeatureSet');
import esriRequest = require('esri/request');

(function (execute) {
  QueryTask.prototype.execute = function (query, requestOptions?) {
    if (this.url.indexOf('https://server/arcgis/rest/services/myservice/MapServer/5?f=json') > -1) {

      // create a new Promise and do our own call to the local mocked json response.
      return new Promise((resolve, reject) => {
        esriRequest('https://localhost:8080/app/mocks/ags/my_features.json').then(response => {
          let featureSet = new FeatureSet(response.data);

          // In some cases geometries weren't correctly created and needed to fix.
          for (let f of featureSet.features) {
            f.geometry = new Point({
              x: f.geometry.x,
              y: f.geometry.y,
              spatialReference: {
                wkid: 4326
              }
            });
          }
          // resolve the promise with our mocked FeatureSet
          resolve(featureSet);
        }, error => reject(error));
      });
    }
  }
  return execute.apply(this, arguments);
})(QueryTask.prototype.execute);

There are probably better ways to accomplish this and I definitely wouldn’t suggest doing anything like this for a production app, but it can still be useful in some cases.

Group by query in a file geodatabase

Tue, 16 Jan 2018 13:51:36 -0500

File geodatabase feature classes and tables lack some of the more advanced ability to query that a true relational database supports. Sometimes these queries can be simulated with arcpy cursors; one good example is a SQL group by query.

Typical SQL:

SELECT field, count(*) from table group by field order by count(*) desc;

In arcpy:

from collections import Counter

def group_by_count(table_or_fc, fields):
    """ Returns dictionary containing count of unique items """
    counter = Counter()
    with arcpy.da.SearchCursor(table_or_fc, fields) as curs:
        for row in curs:
            # no need to store as a tuple if only 1 field, just store the value
            if len(row) == 1:
                row = row[0]
            counter[row] += 1
    return counter


def group_by_count_formatted(table_or_fc, fields):
    """ prints out counts of unique values """
    counter = group_by_count(table_or_fc, fields)
    # sort yields highest count records first (order by count(*) desc)
    for key, count in sorted(counter.items(), reverse=True, key=lambda item: item[1]):
        print("{}: {:,}".format(str(key), count))

Example usage in ArcMap Python console (single field):

>>> group_by_count('junctions', 'ImpedanceType')
Counter({u'SmallStreet': 455145, u'LargeStreet': 28714, u'Stream': 9375, u'RailRoad': 1742})

>>> group_by_count_formatted('junctions', 'ImpedanceType')
SmallStreet: 455,145
LargeStreet: 28,714
Stream: 9,375
RailRoad: 1,742

Example usage in ArcMap Python console (multiple fields):

>>> group_by_count('junctions', ['ImpedanceType', 'InfrastructureType'])
Counter({('SmallStreet', 'New'): 318834, ('LargeStreet', 'New'): 28710, ('Stream', 'New'): 18379, ('Stream', 'Aerial'): 5806, ('RailRoad', 'New'): 4043, ('Stream', 'Underground'): 3227, ('RailRoad', 'Aerial'): 1035, ('RailRoad', 'Underground'): 668})

>>> group_by_count_formatted('junctions', ['ImpedanceType', 'InfrastructureType'])
('SmallStreet', 'New'): 318,834
('LargeStreet', 'New'): 28,710
('Stream', 'New'): 18,379
('Stream', 'Aerial'): 5,806
('RailRoad', 'New'): 4,043
('Stream', 'Underground'): 3,227
('RailRoad', 'Aerial'): 1,035
('RailRoad', 'Underground'): 668

These functions aren’t going to be as efficient as a SQL query, but they can be quite useful sometimes for ad-hoc data exploration - especially in the Arcmap/Pro console.

ESRI Javascript API 4 with Angular 2 - Transition to Webpack

Sun, 08 Jan 2017 14:21:52 -0500

Since my first post on Angular 2 and the ESRI API, I’ve transitioned from SystemJS to Webpack which I’m enjoying thoroughly.

Sample App w/ Webpack setup:
Demo
Repo

IMO, Webpack has a few major advantages over SystemJS:

Development build step is much faster and lite-server does not bog down with memory leaks (not sure why that happened with the SystemJS setup but lite-server got slower and slower until restarted).
Webpack takes care of bundling code for you (everything expect the ESRI requires).
- This setup also bundles each components’ html and css in the main bundle.
Feels like less of a hack to use with esri - simply require in each module and that’s it. Setup is simply specifying ESRI as an “external”. Nothing really special there and it just works.
No need for a grunt/gulp step to minimize, etc. Webpack is pretty comprehensive.

This app is just a map with a custom coordinate display component (bottom left):

I’ve used a similar webpack configuration to this in a couple production apps over the last several months. Unit testing w/ this setup and Typescript is finally starting to feel natural (instead of a large very verbose burden w/ es5). I’ve found it fairly straightfoward to test domain classes and models w/ business logic where I feel you get the most bang for your buck from testing. What I haven’t quite figured out yet is how to test components (and when it’s actually worth the effort). This project contains a working test for the coordinate component… It works, but I’m not yet convinced it’s the best way to go about it. Please comment if you have experience here!

Coordinate Component test:

import { TestBed, ComponentFixture } from '@angular/core/testing';
import { DebugElement } from '@angular/core';

import { CoordinateComponent } from './coordinate.component';

let fixture: ComponentFixture<CoordinateComponent>;
let component: CoordinateComponent;
let de: DebugElement;
let el: HTMLElement;
let $mapDiv;
let mapDivEl: Element;
beforeEach(() => {
  // refine the test module by declaring the test component
  TestBed.configureTestingModule({
    declarations: [CoordinateComponent]
  });

  // create component and test fixture
  fixture = TestBed.createComponent(CoordinateComponent);
  el = fixture.nativeElement;

  // get test component from the fixture
  component = fixture.componentInstance;

  // add a div to the body
  $mapDiv = $('<div>', { id: 'mapDiv' }).appendTo('body');
  mapDivEl = $mapDiv[0];

  // mock required MapView props/functions
  component.mapView = <any>{
    container: mapDivEl,
    toMap: (point) => {
      return {
        longitude: 5,
        latitude: 10
      };
    },
    zoom: 7,
    scale: 500
  };

  // runs ngOnInit
  fixture.detectChanges();
});

describe('Coordinate', () => {
  it('should update lat/long on mousemove', () => {
    mapDivEl.dispatchEvent(new Event('mousemove', {
      bubbles: true,
      cancelable: true
    }));
    // pageX, pageY
    fixture.detectChanges();
    expect(el.querySelector('#longitude').innerHTML).toBe('5.000000');
    expect(el.querySelector('#latitude').innerHTML).toBe('10.000000');
    expect(el.querySelector('#zoom').innerHTML).toBe('7');
    expect(el.querySelector('#scale').innerHTML).toBe('500');
  });
});

Fun with Python Sets (and arcpy)

Thu, 21 Jul 2016 17:38:05 -0400

I often forget about the Python set, so this is a fun reminder to myself to keep it in mind. Here’s a neat example of using a set for deleting fields.

This function deletes all of the fields except the ones you specify:

def delete_all_fields_except(fc, keep_fields):
    """ deletes all fields except those specfied as keep_fields """ 
    # create set of all possible fields but exclude OBJECTID, SHAPE, etc.
    all_fields = set(f.name for f in arcpy.ListFields(fc) if not f.required)

    # get a list of fields in the featureclass but not in the list of fields to keep
    # using set.difference()
    
    delete_fields = list(all_fields.difference(keep_fields))
    
    # delete out all the fields
    arcpy.management.DeleteField(fc, delete_fields)

Usage:

# Assume our feature class has the following fields:
print([f.name for f in arcpy.ListFields(fc)])
# ['OBJECTID', 'Shape', 'field1', 'field2', 'field3', 'field4', 'field5']

keep_fields = ['field1', 'field3']
delete_all_fields_except(fc, keep_fields)

print([f.name for f in arcpy.ListFields(fc)])
# ['OBJECTID', 'Shape', 'field1', 'field3']

This is pretty simple example and you could obviously accomplish this without using set, but set is more elegant and more efficient (probably doesn’t matter much here). Perhaps I’ll update this post with more advanced usage now that this is here to remind me to think about sets!

ESRI Javascript API 4 with Angular 2 and Typescript

Tue, 17 May 2016 20:23:08 -0400

Update 1/8/2017: I’ve transitioned to Webpack since this post: link

This could really be a post about many things.

First, I’m a believer in client-side MV*. Second, I’m trying to incorporate better testing into my front-end JS code. Angular seemed like a natural fit given these 2 primary objectives. I’ve done a fair amount of work now with Angular 1 and the ESRI JSAPI 3.x library. There have been some solid success here, but Dojo require throughout the app and especially in unit tests have been a major headache. You could perhaps mock all dependencies from ESRI in the unit tests or try to keep ESRI in it’s own untested sandbox, but both of these strategies seems better in theory than practice.

Aside: ESRI does not make any of this easy. Sure, you can get it to work… kind of…. with a lot of headaches along the way. It all boils down to Dojo. Don’t get me wrong, the ESRI API does some amazing things and some of the new 4.0 features look incredibly promising (.watch() is brilliant), but there’s really no solid reason why we’re still forced to use Dojo.

Anyway, getting to what this post is really about….

The App

Live Demo

From a high level view, the app simply adds points to the map and shows a list of those points with their geometry and “index” attribute. Nothing too special - just there to test some concepts. As an added bonus, the app is served through lite-server and constantly updates as you code. Similarly, the unit tests run continuously.

Building upon experimental work by Rene Rubalcava and Tom Wayson, I was able to get an Angular 2 app properly loading dojo dependencies both in the browser and in Karma tests.

The app consists of a “model” (Angular service) to hold the points (or domain object of your choosing) - the thought being that business logic in this model would be testable without being concerned about the objects’ relation to the map. Ideally, this model wouldn’t contain ESRI dependencies, but with the JSAPI 4’s watch capabilities, it seems to make sense to use an esri/core/Collection as the underlying data structure in the model. Also ideally, we’d just have the collection in the model, but it seems the only way to achieve the map automagically updating is if we use the points from a GraphicsLayer (passing in our Collection as the graphics property to the GraphicsLayer constructor worked in 4.0beta3, but not in 4.0 final for some reason).

PointsModel (points.model.ts)

So here’s our PointsModel (in Typescript). We’ve simply wrapped a few Collection methods and then we can add some additional business logic like getIndexSum(). index is just a made up attribute for sake of testing.

import { Injectable } from '@angular/core';

import Graphic from 'esri/Graphic';
import GraphicsLayer from 'esri/layers/GraphicsLayer';
import Collection from 'esri/core/Collection';

@Injectable()
export class PointsModel {
  private points: Collection = new Collection();
  pointsLayer: GraphicsLayer;
  constructor() {
    this.pointsLayer = new GraphicsLayer();
    this.points = this.pointsLayer.graphics;
  }
  addPoint(pointGraphic: Graphic) {
    this.points.add(pointGraphic);
  }
  addPoints(pointsGraphics: Graphic[]) {
    this.points.addMany(pointsGraphics);
  }
  getPointGraphics() {
    return this.points;
  }
  clear() {
    this.points.removeAll();
  }
  getIndexSum() {
    let sum = 0;
    if (this.points !== null) {
      this.points.forEach(p => sum += p.attributes.index);
    }
    return sum;
  }
}

AttributeComponent (attribute.component.html)

When we add a point to the model, it not only shows up in the map, but also in the attribute list which is wired up through databinding:

<div>
  <h2>Points!</h2>
  <p>Index Sum: {{pointsModel.getIndexSum()}}
  <ul>
    <li *ngFor="let point of points.toArray()">
      <span>{{point.attributes.index}} ({{point.geometry.x | number:'.5-5'}},{{point.geometry.y | number:'.5-5'}})</span>
    </li>
  </ul>
</div>

MapService (map.service.ts)

Our map binding to our PointsModel (which is just a matter of adding pointsModel.pointsLayer (our GraphicsLayer) to the map):

import { Injectable } from '@angular/core';

import Map from 'esri/Map';
import GraphicsLayer from 'esri/layers/GraphicsLayer';

import { PointsModel } from './points.model';

@Injectable()
export class MapService {
  map: Map;
  pointGraphicsLayer: GraphicsLayer;
  constructor(pointsModel: PointsModel) {
    this.map = new Map({
      basemap: 'topo'
    });
    this.map.add(pointsModel.pointsLayer);
  }
}

PointsModel Tests (points.model.spec.ts)

import { PointsModel } from './points.model';

import Graphic from 'esri/Graphic';
import Point from 'esri/geometry/Point';

describe('PointsModel tests', () => {
  let mockPointGraphic = new Graphic({
    attributes: {
      index: 1
    },
    geometry: new Point({
      x: 1,
      y: 2,
      spatialReference: {
        wkid: 4326
      }
    })
  });

  let pointsModel;
  beforeEach(() => {
    pointsModel = new PointsModel();
  });

  it('should contstruct it', () => {
    expect(pointsModel).toBeDefined();
    expect(pointsModel.getPointGraphics()).toBeDefined();
  });

  describe('adding and removing points', () => {
    it('should add a point to collection', () => {
       pointsModel.addPoint(mockPointGraphic);
       pointsModel.addPoint(mockPointGraphic);
       expect(pointsModel.getPointGraphics().length).toEqual(2);
    });

    it('should add points to collection', () => {
      pointsModel.addPoints([mockPointGraphic, mockPointGraphic]);
      expect(pointsModel.getPointGraphics().length).toEqual(2);
    });

    it('should clear points', () => {
      pointsModel.addPoint(mockPointGraphic);
      pointsModel.addPoint(mockPointGraphic);
      pointsModel.clear();
      expect(pointsModel.getPointGraphics().length).toEqual(0);
    });
  });

  describe('calculations', () => {
    it('should calculate the sum of the index attributes', () => {
      pointsModel.addPoints([mockPointGraphic, mockPointGraphic]);
      let sum = pointsModel.getIndexSum();
      expect(sum).toEqual(2);
    });
  });

});

The nice thing here is that the tests didn’t balk at using the esri Collection that must be imported into the PointsModel (this has been an incredibly difficult thing to do w/ Angular 1 / Dojo).

Setup

Setup for this is non-trivial and is based heavily on esri/esri-system-js along with custom configuration in the Karma configuration and loading of dependencies locally using the esri bower jsapi repo. In short, the esri-system-js loader loads ALL esri dependencies at the start of the application so they’re available through import statements in Typescript files. This was already figured out for the browser portion by Tom and Rene as referenced previously, so check out their repo’s for more information there.

Getting it wired up for testing was a little more difficult but here are the key highlights. Note that I’ve broken out some different configs for browser vs tests.

dojoConfigTest.js

Fairly standard setup for loading from a local bower setup.

(function(window) {
  // set up your dojoConfig
  window.dojoConfig = {
    baseUrl: 'app/node_modules/',
    deps: ['app/main'],
    packages: [
      'app',
      'dijit',
      'dojo',
      'dojox',
      'dstore',
      'dgrid',
      'esri', {
        name: 'moment',
        location: 'moment',
        main: 'moment'
      }
    ]
  };
});

karma.conf.js

These are the changes that were added to the karma.conf.js configuration included in the angular2 quick start repo:

  ...

  files: [
    ... angular files, etc.
    // ********* esri load ***********
    // must be able to serve these files for dojo require
    // NOTE: karma gives a cryptic error when 
    // files can't be found  (msg || "").replace is not a function
    { pattern: 'bower_components/dojo/**/*.*', included: false, watched: false },
    { pattern: 'bower_components/dojox/**/*.*', included: false, watched: false },
    { pattern: 'bower_components/dstore/**/*.*', included: false, watched: false },     
    { pattern: 'bower_components/dgrid/**/*.*', included: false, watched: false },
    
    { pattern: 'bower_components/dijit/**/*.*', included: false, watched: false },
    { pattern: 'bower_components/esri/**/*.*', included: false, watched: false },    
    { pattern: 'bower_components/moment/**/*.js', included: false, watched: false },   

    // load dojoConfig so dojo knows where to "require" modules from
    'dojoConfigTest.js',
    
    // we need the actual dojo startup file for "requrire" to be defined
    'bower_components/dojo/dojo.js',
    
    // load in esri's systemJs util
    'node_modules/esri-system-js/dist/esriSystem.js',
    
    // load in our array of esri dependencies
    'esriLoadConfig.js',
    
    // bootstrap in the modules using esri-system-js
    'esriSystemLoadTest.js', 

    ... more angular files
]

esriLoadConfig.js

Contains ALL esri modules required by the application:

(function(window) {
  window.esriLoadConfig = {
      modules: [
      'esri/Map',
      'esri/views/MapView',
      'esri/core/Collection',
      'esri/layers/GraphicsLayer',
      'esri/Graphic',
      'esri/geometry/Point',
      'esri/geometry/SpatialReference',
      'esri/symbols/SimpleMarkerSymbol',
      'esri/Color'
    ]
  };
}(window))

esriSystemLoadTest.js

Called by Karma to pre-load the esri modules before the tests run.

// load esri modules needed by this application
// into a System.js module called esri
start = performance.now();
esriSystem.register(esriLoadConfig.modules, function () {
  end = performance.now();
  time = end - start;
  console.log('Loaded esri modules', time / 1000.0);
});

esriSystemLoadBrowser.js

Used in the browser code (called from index.html) to load in the esri modules AND bootstrap the application once those modules are available.

// load esri modules needed by this application
// into a System.js module called esri
console.log("Loading esri modules: ", esriLoadConfig.modules);
start = performance.now();
esriSystem.register(esriLoadConfig.modules, function () {
  // then bootstrap application
  end = performance.now();
  time = end - start;
  console.log('Loaded esri modules', time / 1000.0);
  System.import('app/main').then(function () {
    console.log('app/main imported');
  }, function (error) {
    console.log("System import error:", error);
  });
});

Conclusion

~~This is highly experimental and there’s a lot of moving parts, but it’s nice to know this is possible.~~ This is getting closer to production quality. I’ve left out a lot but the full repo’s here:

https://github.com/jwerts/jsapi4-angular2

There will likely be updates to the repo as I continue to explore this concept (and learn Angular 2… and learn Typescript).

It could really benefit from a final build process. Note that I’ve used CDN for most dependencies in index.html for the gh-pages demo to avoid loading local bower and node dependencies to Github.

Edit 2016-06-16: Updated Angular to 2.0.0.RC2
Edit 2016-06-24: Updated Angular to 2.0.0.RC3
Edit 2016-07-05: Updated Angular to 2.0.0.RC4
Edit 2016-07-07: Updated to use esri-system-js 1.0 beta which now preserves esri module names and works correctly with Typescript arcgis-js-api typings.
Edit 2016-09-22: Updated Angular to 2.0.0 final

Feature Service applyEdits on Multiple Layers

Tue, 10 Nov 2015 13:09:37 -0500

If you’ve worked with any of the esri web API’s over the last several years, chances are you’ve used a Feature Service to edit an SDE feature class at some point. Using the web API’s, the obvious way to do this would be to construct a FeatureLayer and call its applyEdits method. In reality, this is just a wrapper around the ArcGIS Server REST API’s applyEdits endpoint on an individual service layer.

Example:

https://[host]/arcgis/rest/services/[folder]/[service]/[layerid]/FeatureServer/applyEdits

But what happens if you want to applyEdits to multiple layers within the Feature Service instead of just one layer? You’ve got a few standard API options after constructing multiple feature layers:

Call applyEdits on each FeatureLayer with dojo/promise/all:

// construct FeatureLayers
flayer1 = new FeatureLayer("https://MyServer/arcgis/rest/services/MyServiceFolder/MyService/0");
flayer2 = new FeatureLayer("https://MyServer/arcgis/rest/services/MyServiceFolder/MyService/1");

// call applyEdits
var deferred1 = flayer.applyEdits(adds1, deletes1, updates1);
var deferred2 = flayer.applyEdits(adds2, deletes2, updates2);

// use dojo/All to respond to success or failure when both operations finish
all([deferred1, deferred2]).then(function(results) {
  // Do something with results.
  // Note that you'll still need to check each edit in each layer for "success"
}, function(error) {
  // uh oh, one of them failed.  
});

Chain promises for each FeatureLayer:

// construct FeatureLayers
flayer1 = new FeatureLayer("https://MyServer/arcgis/rest/services/MyServiceFolder/MyService/0");
flayer2 = new FeatureLayer("https://MyServer/arcgis/rest/services/MyServiceFolder/MyService/1");

// call applyEdits
flayer.applyEdits(adds1, deletes1, updates1).then(function(result1) {
  // do something with result
  // Note that you'll still need to check each edit for "success"
  flayer2.applyEdits(adds2, deletes2, updates2).then(function(result2) {
    // do something with result
    // Note that you'll still need to check each edit for "success"
  }, function(error) {
    // flayer 2 error
  });
}, function(error) {
  // flayer 1 error
});

Either of these options would work, but what if the 2 layer edits depended on each other?

Usually when I’m editing multiple layers at once, they have some sort of relation to each other. This may or may not be defined in the database, but at any rate - if one edit fails, I’d really like the other edit to also fail so we don’t end up with an inconsistency in the database. Additionally, wouldn’t it be nice to only send one request to the server, especially when there’s many layers?

One Request to Rule Them All

It turns out that the ArcGIS Server REST API also has an applyEdits endpoint on the Feature Service itself - it’s just not wrapped in the web API’s.

This makes it possible to send multiple edits in a single request AND make sure nothing gets stored on any layers if any one of the layer edits fails.

There’s nothing in the ESRI web API’s that directly hit this endpoint, so I give to you: FeatureService.js.

bower install featureservice-esri-jsapi

Usage:

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));
var dojoConfig = {
  async: true,
  packages: [
    {
      name: 'feature-service',
      location: package_path + '/js/lib/bower_components/featureservice-esri-jsapi/dist',
      main: 'FeatureService.min'
    }
  ]
};

require(
  [
    'feature-service'
  ], function(FeatureService) {
    'use strict';

    var service = new FeatureService("https://[server]/arcgis/rest/MyService");
    var edits = [
      {
        id: 2,  // id of layer in service
        adds: [
          addGraphic
        ],
        updates: [
          updateGraphic
        ],
        deletes: [
          1, 2  // just objectids of features to delete.
        ]
      },
      {
        id: 5,  // id of layer in service
        adds: [
          someGraphic,
          anotherGraphic,
          yetAnotherGraphic
        ]
      }
    ];

    var deferred = service.applyEdits(edits);
    deferred.then(function(result) {
      // result is an array
      // each array value contains an object with layer id and objectids of successful edits:
      /*
      [
        {
          id: int id of feature service layer
          adds: [oid, oid, oid, ...],
          updates: [oid, oid oid, ...],
          deletes: [oid, oid, oid, ...]
        },
        ...
      ]
      */
      // layer 2 results
      console.log(result[0].id);
      console.log(result[0].adds);
      console.log(result[0].updates);
      console.log(result[0].deletes);

      // layer 5 results
      console.log(result[1].id);
      console.log(result[1].adds);
      console.log(result[1].updates);
      console.log(result[1].deletes);

    }, function(error) {
      /* error callback can be called for 2 reasons
        1. Regular service faults (server 500 error, etc)
        2. One or more of the edits failed (but server still responded with 200)

        In case 1, the error is a standard esri error object with code and message.
        In case 2, the error is an object with code (200) and message plus an additional
        errors property which contains an array of error objects.
        Error object contains code, description, and id (layer id).
      */
      // case 2
      if (error.code === 200) {
        for (var i; i<error.errors.length; i++) {
          var err = error.errors[i];
          console.log(err.id);
          console.log(err.code);
          console.log(err.description);
        }
      }
    });
});

Currently only the applyEdits endpoint is implemented, but this is really the most useful. There are a couple of personal design decisions here:

The service always sends rollbackOnFailure as true. This seems to be the most likely use case.
If any single edit fails, the fault handler is triggered. This is different from the jsapi’s FeatureLayer, where even if there’s a failure, it will still trigger the success handler and you have to check each result for failures. This class does it for you.

If you find this useful, please leave a comment or feel free to fork!
https://github.com/jwerts/featureservice-esri-jsapi.git

As a side note, this could have been a separate post on “Unit testing esri Javascript API services with Karma/Mocha/Chai/Sinon”. Perhaps in the future…

arcpy: Reorder Fields

Thu, 17 Apr 2014 00:00:00 +0000

Here’s another handy function for re-ordering fields in a feature class. Like the rename_fields function previously posted, it recreates the existing field mappings and modifies as necessary. The output is a new feature class with fields in the order specified.

The only caveat is that required fields always get pushed to the front (so the featureclass will start with OBJECTID, Shape, rest of fields…). After required fields are out of the way, the rest of the fields are added in the order specified in the field_order list. If any fields are missing, they are added to the end of the feature class.

import arcpy

def reorder_fields(table, out_table, field_order, add_missing=True):
    """
    Reorders fields in input featureclass/table
    :table:         input table (fc, table, layer, etc)
    :out_table:     output table (fc, table, layer, etc)
    :field_order:   order of fields (objectid, shape not necessary)
    :add_missing:   add missing fields to end if True (leave out if False)
    -> path to output table
    """
    existing_fields = arcpy.ListFields(table)
    existing_field_names = [field.name for field in existing_fields]

    existing_mapping = arcpy.FieldMappings()
    existing_mapping.addTable(table)

    new_mapping = arcpy.FieldMappings()

    def add_mapping(field_name):
        mapping_index = existing_mapping.findFieldMapIndex(field_name)

        # required fields (OBJECTID, etc) will not be in existing mappings
        # they are added automatically
        if mapping_index != -1:
            field_map = existing_mapping.fieldMappings[mapping_index]
            new_mapping.addFieldMap(field_map)

    # add user fields from field_order
    for field_name in field_order:
        if field_name not in existing_field_names:
            raise Exception("Field: {0} not in {1}".format(field_name, table))

        add_mapping(field_name)

    # add missing fields at end
    if add_missing:
        missing_fields = [f for f in existing_field_names if f not in field_order]
        for field_name in missing_fields:
            add_mapping(field_name)

    # use merge with single input just to use new field_mappings
    arcpy.Merge_management(table, out_table, new_mapping)
    return out_table

Usage:

new_field_order = ["field2", "field3", "field1"]
reorder_fields(in_fc, out_fc, new_field_order)

I’ve tested this in 10.1.1+ - it may work in 10.0 as well and should work with any license level.