Edit Widget Questions

[JasonNielsen]

Is there a way to change the order of the attribute fields in the edit widget so they are not alphabetical but rather following the order they are in the xml file?

My second question is 2.0 didn't support snapping but it was mentioned that it would be something later on. Can somebody let me know when they think this would be implemented?

Thanks,

Jason

[SarthakDatt]

Hey Jason,

The Edit Widget is using the out-of-box Editor component. The Editor component uses AttributeInspector(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/Editor.html#attributeInspector) to show/edit the attribute fields.

You can order the fields by using AttributeInspectot.formItemsOrder(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/AttributeInspector.html#formIte...) property

Here's a sample of how it is done using the API(you could do something similar in the Edit Widget's code, In this case the fields are ordered using the fieldInspector) :
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=AttributeInspectorOutsideMap

As far as snapping is concerned, it is not there right now, but we still have plans to add it sometime in a future release.

Hope that helps.

[JasonNielsen]

Thanks for the quick reply. I will take a look at the AttributeInspector and see what i can come up with.

[JoeyStone]

Have you had any luck getting your attributes in order, I am having the same problem.

[xiaoyizhang]

Hi Datt,

Is there anyway we can make the attributeInspector as floating widget. Right now, If I add a point and the attribute window extented to the outside of buttom map and I cannot move it.

Thanks,

xiaoyi zhang

Hey Jason,

The Edit Widget is using the out-of-box Editor component. The Editor component uses AttributeInspector(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/Editor.html#attributeInspector) to show/edit the attribute fields.

You can order the fields by using AttributeInspectot.formItemsOrder(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/AttributeInspector.html#formIte...) property

Here's a sample of how it is done using the API(you could do something similar in the Edit Widget's code, In this case the fields are ordered using the fieldInspector) :
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=AttributeInspectorOutsideMap

As far as snapping is concerned, it is not there right now, but we still have plans to add it sometime in a future release.

Hope that helps.

[xiaoyizhang]

Hi Sarthak,

Can you point to me where I need to make a change to set field order?

I tried

1.

private function basewidget_creationCompleteHandler(event:FlexEvent):void
            {
                editor.attributeInspector.setStyle("skinClass", EditWidgetAttributeInspectorSkin);
    editor.attributeInspector.formItemsOrder = "none";
    // The order of the form items. Possible values are "none" (no order), "label" (order by label value) and "fieldInspector" (order by the field inspector definition sequence).
   
                map.infoWindow.label = attributesLabel;
                editor.attributeInspector.addEventListener("attachmentGroupClicked", attachmentGroupClickedHandler);
                editor.attributeInspector.addEventListener("okButtonClicked", okButtonClickHandler);
   }

2.

            private function populateEditor(array:Array):void
            {
    featureLayers = [];

                if (oplList && oplList.length > 0)
                {
                    for (var j:int = 0; j < oplList.length; j++)
                    {
                        var opLayerType:String = oplList.type

                        var doNotAddFeatureLayer:Boolean = false;
                        if (opLayerType.toLowerCase() == "feature")
                        {
                            // loop through all the excludeLayers
                            for (var n:int = 0; n < excludeLayers.length; )
                            {
                                if (oplList.layer.name == excludeLayers)
                                {
                                    doNotAddFeatureLayer = true;
                                    break;
                                }
                                else
                                {
                                    n++;
                                }
                            }

                            if (!doNotAddFeatureLayer)
                            {
                                // always turn the layer on by default
                                oplList.visible = true;
                                ViewerContainer.dispatchEvent(new AppEvent(AppEvent.MAP_LAYER_VISIBLE, oplList));

                                oplList.layer.removeEventListener(FeatureLayerEvent.SELECTION_COMPLETE, featureLayer_selectionComplete);
                                oplList.layer.addEventListener(FeatureLayerEvent.SELECTION_COMPLETE, featureLayer_selectionComplete, false, 1);

                                //store the infoWindowRendere foe each feature layer
                                dictionary[oplList.layer] = oplList.layer.infoWindowRenderer;
                                oplList.layer.infoWindowRenderer = null; // assign it to null, as editor overtakes now

                                featureLayers.push(oplList.layer);
                            }
                        }
                    }
                }

                // always call deactive first
                deactivateEditor();
                if (featureLayers.length > 0)
                {
                    editor.map = map;
                    editor.featureLayers = featureLayers;
     editor.attributeInspector.formItemsOrder = "none";
     // The order of the form items. Possible values are "none" (no order), "label" (order by label value) and "fieldInspector" (order by the field inspector definition sequence).

                }
            }


Both places did not change the field order.

Thank you in advance

xiaoyi zhang

Hey Jason,

The Edit Widget is using the out-of-box Editor component. The Editor component uses AttributeInspector(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/Editor.html#attributeInspector) to show/edit the attribute fields.

You can order the fields by using AttributeInspectot.formItemsOrder(http://help.arcgis.com/en/webapi/flex/apiref/com/esri/ags/components/AttributeInspector.html#formIte...) property

Here's a sample of how it is done using the API(you could do something similar in the Edit Widget's code, In this case the fields are ordered using the fieldInspector) :
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=AttributeInspectorOutsideMap

As far as snapping is concerned, it is not there right now, but we still have plans to add it sometime in a future release.

Hope that helps.

[StephenLuzny]

Xiaoyi Zhang,

I'm trying to return the attributes to their original order, too, but I haven't been successful so far.

It may be worth noting that the attributeInspector property of public class Editor is read-only (i.e. we can 'get' editor.attributeInspector, but we can not 'set' it). The public class AttributeInspector allows us to 'set' properties such as formItemsOrder. We can see that in action in the example at http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=AttributeInspectorInfoWindowEditable

I'm not sure how to apply the sample code to the ArcGIS Viewer for Flex 2.1.

[DavidTreat]

Here is an approach that worked for me.  I created the function below and called it at the end of the existing basewidget_creationCompleteHandler function in EditWidget.mxml.  You will have to substitute in your own feature service name instead of my "Draft Conservation Land," as well as your own field names. In addition to controlling the order of the attributes this puts user friendly labels on them.  And omits some attributes from the editing window.

I am sure there is a more elegant coding approach to this, but I have not yet had time to optimize it.  Hope it helps!

Dave

// This function establishes the attribute edit environment.
// In particular, the order in which fields are presented,
// and the labels attached to those fields.  Lastly, fields
// that should not be user editable are made not visible.

private function createFieldInspectors():void
{
 editor.attributeInspector.formItemsOrder = "fieldInspector";
 var layer:Layer;
 var fLayer:FeatureLayer;
 layer = map.getLayer("Draft Conservation Land");
 fLayer = layer as FeatureLayer;
 
 var field0:FieldInspector = new FieldInspector();
 field0.featureLayer = fLayer;
 field0.fieldName = "NAME";
 field0.label = "Parcel Name";
 editor.attributeInspector.fieldInspectors.push(field0);
   
 var field0a:FieldInspector = new FieldInspector();
 field0a.featureLayer = fLayer;
 field0a.fieldName = "P_RSIZE";
 field0a.label = "Parcel Size (acres)";
 editor.attributeInspector.fieldInspectors.push(field0a);
    
 var field0b:FieldInspector = new FieldInspector();
 field0b.featureLayer = fLayer;
 field0b.fieldName = "RSIZE";
 field0b.label = "Tract Size (acres)";
 editor.attributeInspector.fieldInspectors.push(field0b);
    
 var field1:FieldInspector = new FieldInspector();
 field1.featureLayer = fLayer;
 field1.fieldName = "PPTYPE";
 field1.label = "Primary Protection Type";
 editor.attributeInspector.fieldInspectors.push(field1);
    
 var field2:FieldInspector = new FieldInspector();
 field2.featureLayer = fLayer;
 field2.fieldName = "PPAGENCY";
 field2.label = "Primary Protection Agency";
 editor.attributeInspector.fieldInspectors.push(field2);
    
 var field3:FieldInspector = new FieldInspector();
 field3.featureLayer = fLayer;
 field3.fieldName = "PROGRAM";
 field3.label = "Protection Program";
 editor.attributeInspector.fieldInspectors.push(field3);
    
 // fields to omit from user editing
 var fieldx1:FieldInspector = new FieldInspector();
 fieldx1.featureLayer = fLayer;
 fieldx1.fieldName = "TID";
 fieldx1.visible = false;
 editor.attributeInspector.fieldInspectors.push(fieldx1);
    
 var fieldx2:FieldInspector = new FieldInspector();
 fieldx2.featureLayer = fLayer;
 fieldx2.fieldName = "PID";
 fieldx2.visible = false;
 editor.attributeInspector.fieldInspectors.push(fieldx2);
    
 var fieldx3:FieldInspector = new FieldInspector();
 fieldx3.featureLayer = fLayer;
 fieldx3.fieldName = "CSIZE";
 fieldx3.visible = false;
 editor.attributeInspector.fieldInspectors.push(fieldx3);
    
 var fieldx4:FieldInspector = new FieldInspector();
 fieldx4.featureLayer = fLayer;
 fieldx4.fieldName = "P_CSIZE";
 fieldx4.visible = false;
 editor.attributeInspector.fieldInspectors.push(fieldx4);
}

[StephenLuzny]

Thanks, Dave. Your code sample is very helpful 🙂

[StephenLuzny]

Dave,

I have modified your code to allow for configuration from the EditWidget XML configuration file.

Add the following to EditWidget.xml:

<editablelayer>
 <layername>Sample Layer</layername>
 <fieldnames>FIELD1,FIELD2</fieldnames>
 <fieldlabels>Field1,Field2</fieldlabels>
 <hiddenfields>FIELD3</hiddenfields>
</editablelayer>

Within the EditWidget.mxml file:

[Bindable]
private var showAttributesText:String;

/* MODIFICATION -- setup variables for FieldInspector values from configXML */
private var editableLayerName:String;
private var editableLayerFieldNames:Array;
private var editableLayerFieldLabels:Array;
private var editableLayerHiddenFields:Array;
/* MODIFICATION --  END */

private function basewidget_widgetConfigLoaded(event:Event):void
{
 // hide map infowindow if any
 map.infoWindow.hide();
 
 if (configXML)
 {
  
  // MODIFICATION --  load configuration values for FieldInspector into variables
  editableLayerName = configXML.editablelayer.layername;
  
  if (configXML.editablelayer.fieldnames.length() > 0)
  {
   // add field names to array
   editableLayerFieldNames = [];
  
    const tempFieldArray:Array = configXML.editablelayer.fieldnames.split(",");
    for (var count1:Number = 0; count1 < tempFieldArray.length; count1++)
    {
     editableLayerFieldNames.push(tempFieldArray[count1]);
    }
  }
  
  if (configXML.editablelayer.fieldlabels.length() > 0)
  {
   // add field labels to array
   editableLayerFieldLabels = [];
   
   const tempLabelArray:Array = configXML.editablelayer.fieldlabels.split(",");
   for (var counter2:Number = 0; counter2 < tempLabelArray.length; counter2++)
   {
    editableLayerFieldLabels.push(tempLabelArray[counter2]);
   }
  }

  if (configXML.editablelayer.fieldlabels.length() > 0)
  {
   // add names of hidden fields to array
   editableLayerHiddenFields = [];
   
   const tempHiddenFieldArray:Array = configXML.editablelayer.hiddenfields.split(",");
   for (var count3:Number = 0; count3 < tempHiddenFieldArray.length; count3++)
   {
    editableLayerHiddenFields.push(tempHiddenFieldArray[count3]);
   }
  }
  // MODIFICATION -- END
  
  geometryService.url = configXML.geometryservice;
  
  const configToolbarVisible:Boolean = configXML.toolbarvisible == "true";
  editor.toolbarVisible = configToolbarVisible;
  
  const configToolbarCutVisible:Boolean = configXML.toolbarcutvisible == "true";
  editor.toolbarCutVisible = configToolbarCutVisible;
  
  const configToolbarMergeVisible:Boolean = configXML.toolbarmergevisible == "true";
  editor.toolbarMergeVisible = configToolbarMergeVisible;
  
  const configToolbarReshapeVisible:Boolean = configXML.toolbarreshapevisible == "true";
  editor.toolbarReshapeVisible = configToolbarReshapeVisible;
  
  if (configXML.createoptions.length() > 0)
  {
   createOptions.polygonDrawTools = new Array();
   createOptions.polylineDrawTools = new Array();
   
   if (configXML.createoptions.polygondrawtools.length() > 0)
   {
    const polygonDrawToolsList:Array = configXML.createoptions.polygondrawtools.split(",");
    for (var i:Number = 0; i < polygonDrawToolsList.length; i++)
    {
     createOptions.polygonDrawTools.push(polygonDrawToolsList);
    }
   }
   
   if (configXML.createoptions.polylinedrawtools.length() > 0)
   {
    const polylineDrawToolsList:Array = configXML.createoptions.polylinedrawtools.split(",");
    for (var j:Number = 0; j < polylineDrawToolsList.length; j++)
    {
     createOptions.polylineDrawTools.push(polylineDrawToolsList);
    }
   }
   editor.createOptions = createOptions;
  }
  //excludeLayers
  excludeLayers = [];
  var layers:XMLList = configXML.excludelayer as XMLList;
  for (var n:Number = 0; n < layers.length(); n++)
  {
   excludeLayers.push(layers.toString());
  }
  
  //deleteFeatures
  if (configXML.deletefeatures.length() > 0)
  {
   deleteFeatures = configXML.deletefeatures == "true";
  }
  editor.deleteEnabled = attachmentInspector.deleteEnabled = deleteFeatures;
  
  
  //labels
  if (configXML.labels.attributeslabel[0])
  {
   attributesLabel = configXML.labels.attributeslabel[0];
  }
  if (configXML.labels.attachmentslabel[0])
  {
   attachmentsLabel = configXML.labels.attachmentslabel[0];
  }
  
  // featurelayernotvisibletext
  EditWidgetTemplatePickerSkin.featureLayerNotVisibleText = configXML.featurelayernotvisibletext || "feature layer is either not visible or out of scale range";
  // showattachmentstext
  EditWidgetAttributeInspectorSkin.showAttachmentsText = configXML.showattachmentstext || "Show Attachments";
  // showattributestext
  showAttributesText = configXML.showattributestext || "Show Attributes";
 }
 
 // MODIFICATION -- call function to setup FieldInspector
 createFieldInspectors();
 // MODIFICATION -- END
 
 map.infoWindow.addEventListener(Event.CLOSE, infoWindowCloseHandler);
 ViewerContainer.dispatchEvent(new AppEvent(AppEvent.DATA_OPT_LAYERS, null, getOplayers));
}

And add the following function to EditWidget.mxml as well:

// This function establishes the attribute edit environment.
// In particular, the order in which fields are presented,
// and the labels attached to those fields.  Lastly, fields
// that should not be user editable are made not visible.
private function createFieldInspectors():void
{
 editor.attributeInspector.formItemsOrder = "fieldInspector";
 var layer:Layer;
 var fLayer:FeatureLayer;

 layer = map.getLayer(editableLayerName);
 fLayer = layer as FeatureLayer;
 
 var field:FieldInspector;
 var fieldHidden:FieldInspector;
 
 // Setup FieldInspectors for visible fields
 // Assumption: both editableLayerFieldNames and editableLayerFieldLabels will have the same number of elements
 for (var i:Number = 0; i < editableLayerFieldNames.length; i++)
 {
  field = new FieldInspector();
  field.featureLayer = fLayer;
  field.fieldName = editableLayerFieldNames;
  field.label = editableLayerFieldLabels;
  editor.attributeInspector.fieldInspectors.push(field);
 }
 
 // Setup FieldInspectors for hidden fields
 for (var j:Number = 0; j < editableLayerHiddenFields.length; j++)
 {
  fieldHidden = new FieldInspector();
  fieldHidden.featureLayer = fLayer;
  fieldHidden.fieldName = editableLayerHiddenFields;
  fieldHidden.visible = false;
  editor.attributeInspector.fieldInspectors.push(fieldHidden);
 }
}