topic Re: Easiest way to customize AttributeInspector associated with an active Editor in ArcGIS API for Flex Questions

Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Wed, 22 Dec 2010 20:46:01 GMT

I've got an app with Editor and default AttributeInspector but would like to basically do what this Attribute Inspector (edit) sample does in terms of a custom AttributeInspector. However, the sample only updates existing features and isn't wired to an Editor.

Is there a way to simply point existing Editor to a custom AttributeInspector?

I would like to remove (or possibly just disable) a couple fields from the Attribute Inspector and populate those programatically when a new feature is created or when an existing feature is updated.

Re: Easiest way to customize AttributeInspector associated with an active Editor

MehulChoksey — Sun, 12 Dec 2021 06:44:29 GMT

Royce,

You could get hold of the existing attribute inspector associated with the editor and assign your own "field" inspector to it.
Below is the code snippet. Hope this helps.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:esri="http://www.esri.com/2008/ags"
               initialize="application1_initializeHandler(event)"
               pageTitle="Using the Editor component">
    <!--
    This sample shows you how to use the editor component.
    -->
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        @namespace esri "http://www.esri.com/2008/ags";
        @namespace components "com.esri.ags.components.*";
        @namespace supportClasses "com.esri.ags.components.supportClasses.*";
        
        components|InfoWindow
        {
            background-color: #FFFFFF;
            border-thickness: 2;
        }
    </fx:Style>
    
    <fx:Script>
        <![CDATA[
            import com.esri.ags.components.AttributeInspector;
            import com.esri.ags.components.supportClasses.FieldInspector;
            
            import component.infoWindow;
            
            import mx.events.FlexEvent;
            
            protected function application1_initializeHandler(event:FlexEvent):void
            {
                myEditor.featureLayers = [ incidentsAreas ];
                var fieldInspector1:FieldInspector = new FieldInspector();
                fieldInspector1.featureLayer = incidentsAreas;
                fieldInspector1.fieldName = "description";
                fieldInspector1.label="DESCRIPTION"
                                
                var rendererFactory:ClassFactory = new ClassFactory(MYFieldRenderer);
                var fieldInspector2:FieldInspector = new FieldInspector();
                fieldInspector2.featureLayer = incidentsAreas;
                fieldInspector2.fieldName = "ftype";
                fieldInspector2.label="MyCustomComponent"
                    
                fieldInspector2.renderer = rendererFactory;
                var attributeInspector: AttributeInspector = myEditor.attributeInspector;
                attributeInspector.featureLayers = [incidentsAreas]
                attributeInspector.fieldInspectors = [fieldInspector2,fieldInspector1]
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <esri:GeometryService id="myGeometryService" url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"/>
    </fx:Declarations>
    
    <esri:Map id="myMap">
        <esri:extent>
            <esri:Extent id="socal"
                         xmin="-13471000" ymin="3834000" xmax="-12878000" ymax="4124000">
                <esri:SpatialReference wkid="102100"/>
            </esri:Extent>
        </esri:extent>
        <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
        <esri:FeatureLayer id="incidentsAreas"
                           mode="snapshot"
                           outFields="[ftype,description]"
                           url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2"/>
    </esri:Map>
    
    <esri:Editor id="myEditor"
                 width="100%" height="200"
                 geometryService="{myGeometryService}"
                 map="{myMap}"/>
</s:Application>

Code for MYFieldRenderer:

<?xml version="1.0" encoding="utf-8"?>
<s:HGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" 
          xmlns:esri="http://www.esri.com/2008/ags" width="100%" height="100%">
    <s:Button label="Custom Field Renderer"/>
</s:HGroup>

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Thu, 23 Dec 2010 17:46:27 GMT

Thanks.

I'll give it a try. Looks like the piece I was looking for was this, Which certainly seems straightforward enough:

               var attributeInspector: AttributeInspector = myEditor.attributeInspector;
                attributeInspector.featureLayers = [incidentsAreas]
                attributeInspector.fieldInspectors = [fieldInspector2,fieldInspector1]

Basically, just grab a reference to the default attributeInspector and reassign some new FieldInspectors.
Nice.

Will post back with results.
-r

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Thu, 23 Dec 2010 21:44:24 GMT

Mehul, that worked great. I was able to remove a couple fields from the AttributeInspector using similar method to your example... setting the visible property on the fieldInspectors to false.

Now, I'd like to programmatically populate the values of those "hidden" fields of newly created features before they get committed back to the database. What would be your suggestion for doing so?

Thanks,
-Royce

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Thu, 30 Dec 2010 14:26:11 GMT

Mehul, that worked great. I was able to remove a couple fields from the AttributeInspector using similar method to your example... setting the visible property on the fieldInspectors to false.

Now, I'd like to programmatically populate the values of those "hidden" fields of newly created features before they get committed back to the database. What would be your suggestion for doing so?

Thanks,
-Royce

Specifically, I've got users logging into the app and I have a field in the editable features that I'd like to pre-populate with the user's ID. I don't see a sample that does this kind of programmatic field population when new features are added. Has anyone performed this successfully?

Re: Easiest way to customize AttributeInspector associated with an active Editor

MehulChoksey — Thu, 30 Dec 2010 21:30:31 GMT

Royce,

Modify the attribute of the selected graphic on the Featurelayer's selectioncompleteEvent handler:
e.g.
protected function incidentsAreas_selectionCompleteHandler(event:FeatureLayerEvent):void
            {
                Graphic(event.features[0]).attributes['description'] = "MyDescription"
            }

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Mon, 03 Jan 2011 16:51:18 GMT

Royce,

Modify the attribute of the selected graphic on the Featurelayer's selectioncompleteEvent handler:
e.g.
protected function incidentsAreas_selectionCompleteHandler(event:FeatureLayerEvent):void
            {
                Graphic(event.features[0]).attributes['description'] = "MyDescription"
            }

Thanks Mehul,
I've done the above and have verified that the attributes are being populated on the new feature/graphic (both in the AttributeInspector as well as inspecting the event.features[0].attributes property during runtime, but the values never get committed back to the server. The user entered values do, just not the prepopulated ones.

Is there something I need to do after setting the attribute values on the graphic but before the feature is committed back to the server to get them to persist on the features?

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Sun, 12 Dec 2021 06:44:32 GMT

I'm having good success with:

fl.addEventListener(FeatureLayerEvent.EDITS_STARTING, editsStartingHandler);

private function editsStartingHandler(event:FeatureLayerEvent):void
   {
    if (event.adds)
    {
     event.adds[0].attributes['EDITEDBY']  = ...
                                        ...

Re: Easiest way to customize AttributeInspector associated with an active Editor

PhilipThompson — Wed, 18 May 2011 15:43:35 GMT

Thanks for updating your thread. For someone with not much Flex experience this as saved me a lot of hassle.

Re: Easiest way to customize AttributeInspector associated with an active Editor

PhilipThompson — Wed, 18 May 2011 16:59:02 GMT

As a matter of interest, which login mechanism did you use and where did you hold that information till it was needed at event.adds[0].attributes['EDITEDBY'] = ...

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Wed, 18 May 2011 20:07:34 GMT

As a matter of interest, which login mechanism did you use and where did you hold that information till it was needed at event.adds[0].attributes['EDITEDBY'] = ...

I'm not using secured services or any secure login mechanism at this point. What I am doing though, is... upon app load, the user is presented with a "login" form: First Name, Last name, agency, phone number, email address, etc... This info is then stored as a Flash cookie locally on their machine for quick login on subsequent sessions. The info is also sent back to an SDE table along with a boolean value for "isLoggedIn" and "isAway". These values are updated for that record every time the user leaves the page and/or kills the app. I then have a listView that the users can bring up in the app which shows who's logged in and whether they are "away" or not. When a user has this listView up, the sde table is queried every 10 seconds for records that have "isLoggedIn==true" and updates the listView. If "isAway==true" the listItem value becomes italicized. The user can hover over the list items and get detailed info about other "logged in users" via a tooltip.

By the same token, whenever a user adds, updates features, this info (user name), is programatically used as the value for the "EDITEDBY" field.

The downside to this is... as mentioned at the top of this post... it isn't secure. The site I have running this stuff is in prototype form and has yet to move forward with the next (security) steps.

Re: Easiest way to customize AttributeInspector associated with an active Editor

juan_isaacloya_garcia — Thu, 10 Nov 2011 17:38:32 GMT

simpsonr, i have the same problem ... i wanna do something like you.. save the user .. but i cant.. im new in flex... i have a question about your solution.. where you place the fl.addEventListener(FeatureLayerEvent.EDITS_STARTING, editsStartingHandler);
what is this "fl"

can you help me??? Thanks..

Re: Easiest way to customize AttributeInspector associated with an active Editor

RoyceSimpson — Thu, 10 Nov 2011 17:46:54 GMT

simpsonr, i have the same problem ... i wanna do something like you.. save the user .. but i cant.. im new in flex... i have a question about your solution.. where you place the fl.addEventListener(FeatureLayerEvent.EDITS_STARTING, editsStartingHandler);
what is this "fl"

can you help me??? Thanks..

Sure, "fl" would be a reference to a FeatureLayer object to which I'm adding an event listener.
It would have been created thusly:
var fl:FeatureLayer = _currentEditor.featureLayers[0];

Re: Easiest way to customize AttributeInspector associated with an active Editor

juan_isaacloya_garcia — Thu, 10 Nov 2011 18:03:06 GMT

i have this error:
"1120: Access of undefined property _currentEditor."
i thik i was doing all bad...

this is my code:
<fx:Script>
        <![CDATA[
              .
              .
              .
              public var usuario:String =FlexGlobals.topLevelApplication.parameters.usuario;
              public var fl:FeatureLayer = _currentEditor.featureLayers[0];
.
.
.
   private function editsStartingHandler(event:FeatureLayerEvent):void
   {
    if (event.adds)
    {
     event.adds[0].attributes['USUARIO'] = usuario;
    }
   }

Sure, "fl" would be a reference to a FeatureLayer object to which I'm adding an event listener.
It would have been created thusly:
var fl:FeatureLayer = _currentEditor.featureLayers[0];

Re: Easiest way to customize AttributeInspector associated with an active Editor

SimonRoss_User — Wed, 14 Aug 2013 12:45:44 GMT

Thanks for all of the useful information on this old thread - it has really helped progress a current project despite the age of the original post.

I'm hoping to extend this approach a little further and have a couple of additional issues we're currently trying to resolve

1. We've been able to populate fields with pre-defined values but these do not appear in the attribtue inspector when it opens, closing the inspector and reopening it then shows the values. We've tried both selection complete and edits starting and get the same behaviour

2. We'd like to extend the validation of fields to compare values between fields. For example we need the end date to alwasy be greater than the start date. I can see a way to do this working with a completely custom attribute inspector but would like to do this with the default attribute inspector associated with the editor. Any thoughts on the best approach for this would be welcome

Thanks in advance