Thursday, September 15, 2011

Change the Date Format of the AttributeInspector (EditWidget.mxml)


/*
   This example provides a workaround for changing the date format of the AttributeInspector
   targeting the ArcGIS Viewer for Flex 2.4.
   Remarks: This workaround was developed to provide a way of changing the date format     
   of AttributeInspector for fields of type CalendarField. This type is associated with
   FormItems of DateFields of the AttributeInspector and isn't available for developers.

   Case Esri modifies or implements this feature in a better way than that implementation
   should be used.
                       
   The function msToDate is part of the ArcGIS Viewer for Flex 2.4. This method should be
   placed as a Util file to be shared across different classes.

   Author: José Sousa
   Date: 15-09-2011
*/


*/
   Locate the populateEditor private function and place inside of the statement
   if(featureLayers.length > 0) just below the declaration
   editor.attributeInspector.infoWindowLabel = attributesLabel; the code below  
   editor.attributeInspector.addEventListener(AttributeInspectorEvent.SHOW_FEATURE, 
   attributeInspector_showFeatureHandler);
   editor.attributeInspector.addEventListener(AttributeInspectorEvent.UPDATE_FEATURE,
   attributeInspector_updateFeatureHandler);
/*

 
// Place the following code below the function populateEditor
private var dateFormatter:DateFormatter = new DateFormatter();
private const newDateFormat:String = "DD/MM/YYYY";

private function attributeInspector_showFeatureHandler(event:AttributeInspectorEvent):void
{
   formatDateFieldDisplay(event);
}
private function attributeInspector_updateFeatureHandler(event:AttributeInspectorEvent):void
{
   formatDateFieldDisplay(event);
}
private function formatDateFieldDisplay(event:AttributeInspectorEvent):void
{
   if(!(event.featureLayer && event.feature && event.feature.attributes))
      return;
   // This ensures that we only validate when we are working at a field level
   (not an AttributeInspector level)
   if(event.field)
   {
      if(event.field.type == Field.TYPE_DATE)
      {
         if(event.newValue) // If it comes exclusively from an update ... format the display
         {
            // Change the date format as desired
            event.target.formatString = newDateFormat;
         }
      }
   }
   else if(event.type.toLowerCase() == "showfeature")
   {
      var formItems:* = editor.attributeInspector.form.getChildren();
     
      // Loop items and trigger update event
      for (var i:Number = 0; i < formItems.length; i++)
      {
         if(formItems[i].data && formItems[i].data is Field)
         {
            var field:Field = formItems[i].data;
            if(field.type == Field.TYPE_DATE &&
               field.name in event.feature.attributes &&    
               event.feature.attributes[field.name])
            {
               var event:AttributeInspectorEvent = new AttributeInspectorEvent("updateFeature",
                                                                 true,
                                                                 event.featureLayer,
                                                                 event.feature,
                                                                 field,
                                                                 event.feature.attributes[field.name],
                                                                 event.feature.attributes[field.name]);
               var formItem:* = formItems[i].getChildren();
               if(formItem && formItem.length > 0)
                  formItem[0].dispatchEvent(event);
            }
         }
      }
   }
}

// This function should be in a separate util file to be reused if necessary by other classes.
// This function comes with the ArcGIS Viewer for Flex 2.4.
// If Esri updates this function so should the developer.
private function msToDate(ms:Number, dateFormat:String, useUTC:Boolean):String
{
   var date:Date = new Date(ms);
   if (date.milliseconds == 999) // Workaround for REST bug
      date.milliseconds++;

   if (useUTC)
      date.minutes += date.timezoneOffset;
   if (dateFormat)
   {
      dateFormatter.formatString = dateFormat;
      var result:String = dateFormatter.format(date);
     
      if (result)
         return result;
      else
         return dateFormatter.error;
   }
   else
   {
      return date.toLocaleString();
   }
}