Posted by: Jeff Germain | August 3, 2011

Validating Edit Operations with ArcGIS Flex API

FeatureLayer edits at ArcGIS Flex API 2.4 and below are live. That is, if you move a vertex or modify a field value the underlying FeatureClass is updated instantly. Here’s a quick and dirty way to validate edit operations forcing the user to accept or cancel their edit actions. Note a myriad of ways to implement edit validation exist out there, this is just one of them.

For this example I’ll handle delete operations and get confirmation from the user before the edits are committed to the server. I’ll also use some Esri sample services.

Workflow:  Select one or more fire perimeters and press the Delete button on the attribute inspector OR click Delete key. Choose Yes or No in the confirmation dialog. As shown in the following figure.

confirm_deletes

The code to make this work is pretty simple. Essentially, clicking delete raises the editsStarting event on the fire perimeters featurelayer. This event occurs before edits have been sent to the server. In this event handler we first clone the event, then cancel the event. We clone and cancel the event so that we can send the edits to the server ONLY if user OK’s the action. Then we pop a dialog to get user confirmation. Based on dialog result, we call applyEdits passing in the deleted features from the cloned event. Done.

See the code below for details.

ValidateEditsDemo.mxml (Download here)
   1: <?xml version="1.0" encoding="utf-8"?>

   2: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

   3:                xmlns:s="library://ns.adobe.com/flex/spark"

   4:                xmlns:esri="http://www.esri.com/2008/ags"

   5:                initialize="application_initializeHandler(event)"

   6:                pageTitle="Validate Edits Demo">    

   7:     <s:layout>

   8:         <s:HorizontalLayout/>

   9:     </s:layout>

  10:     

  11:     <fx:Style>

  12:         @namespace esri "http://www.esri.com/2008/ags";

  13:         

  14:         esri|InfoWindow

  15:         {

  16:             background-color : #FFFFFF;

  17:             border-thickness : 2;

  18:         }

  19:     </fx:Style>

  20:     

  21:     <fx:Script>

  22:         <![CDATA[

  23: import com.esri.ags.Graphic;

  24: import com.esri.ags.events.FeatureLayerEvent;

  25: import com.esri.ags.tasks.GeometryService;

  26:  

  27: import mx.controls.Alert;

  28: import mx.events.CloseEvent;

  29: import mx.events.FlexEvent;

  30:  

  31: protected function application_initializeHandler(event:FlexEvent):void

  32: {

  33:     myEditor.featureLayers = [ fireAreas ];

  34: }

  35:  

  36: private var _confirmDeletes:Boolean = true;

  37:  

  38: protected function fireAreas_editsStartingHandler(event:FeatureLayerEvent):void

  39: {

  40:     if(event.deletes && event.deletes.length > 0)

  41:     {

  42:         if(_confirmDeletes)

  43:         {

  44:             // Clone this event, then cancel it so we can get user 

  45:             // confirmation and apply edits later

  46:             const eventClone:FeatureLayerEvent = 

  47:                 event.clone() as FeatureLayerEvent;

  48:             

  49:             // Cancel event

  50:             event.preventDefault();

  51:             

  52:             // List OIDs

  53:             var oids:String = "";

  54:             var oid:String;

  55:             for each (var g:Graphic in event.deletes)

  56:             {

  57:                 oid = g.attributes.objectid.toString();

  58:                 oids = (oids.length == 0) 

  59:                     ? oid : oids + ", " + oid;

  60:             }

  61:             

  62:             // Confirm deletes

  63:             const msg:String = 

  64:                 "Are you sure you want to delete these features?\n" +

  65:                 "OBJECTIDs: " + oids;

  66:             const title:String = 

  67:                 (event.deletes.length > 1) ? "Confirm Deletes" : "Confirm Delete";

  68:             Alert.show(msg, title, 3, this, confirmHandler);

  69:             

  70:             function confirmHandler(closeEvent:CloseEvent):void

  71:             {

  72:                 if(closeEvent.detail == Alert.YES)

  73:                 {

  74:                     // Apply edits without confirmation

  75:                     _confirmDeletes = false;

  76:                     eventClone.featureLayer.applyEdits(null, null, eventClone.deletes);

  77:                 }

  78:             }

  79:         }

  80:         else

  81:         {

  82:             // Reset confirmation flag

  83:             _confirmDeletes = true;

  84:         }

  85:     }    

  86: }

  87:         ]]>

  88:     </fx:Script>

  89:     

  90:     <s:VGroup width="328" height="100%">

  91:         <esri:Editor id="myEditor"

  92:                      geometryService="{new GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer')}"

  93:                      map="{myMap}"

  94:                      toolbarVisible="true"/>

  95:         <s:Rect height="100%"/>

  96:     </s:VGroup>

  97:     <esri:Map id="myMap" wrapAround180="true">

  98:         <esri:extent>

  99:             <esri:Extent id="sheepfire"

 100:                          xmin="-13144000" ymin="4033000" xmax="-13066000" ymax="4099000">

 101:                 <esri:SpatialReference wkid="102100"/>

 102:             </esri:Extent>

 103:         </esri:extent>

 104:         <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>

 105:         <esri:FeatureLayer id="fireAreas"

 106:                            mode="snapshot"

 107:                            outFields="*"

 108:                            url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/2"

 109:                            editsStarting="fireAreas_editsStartingHandler(event)"/>

 110:     </esri:Map>

 111:     

 112: </s:Application>

ValidateEditsDemo.mxml (Download here)

Let me know what other ways you’ve implemented edit validation!

Advertisements

Responses

  1. Awesome! Just what we were looking for.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: