Adding managed data fields

The organization chart control manages a list of fields displayed by the default item renderers.
To add fields and display them using the default item renderers, you need to subclass the main classes.
The following example adds a managed salary field.
To add a managed salary field:
  1. Subclass the OrgChartFields class that holds the field data mapping
    package
    {
      import ilog.orgchart.OrgChartFields;
      import flash.events.Event;
    
      /**
       * This sample class shows how to add field mappings.
       */  
      public class ExtendedFields extends OrgChartFields
      {
        private var _salaryField:String = "salary";
    
        /**
         * @private
         */    
        public function set salaryField(value:String):void {
          if (_salaryField != value) {
            _salaryField = value;
            dispatchEvent(new Event(Event.CHANGE));
          }
        }
    
        [Inspectable (category="OrgChart", defaultValue="salary")]    
        /**
         * The name of the property chosen to determine the salary
         * of a person, if the <code>salaryFunction</code> is not set.
         * 
         * @default "salary"
         */     
        public function get salaryField():String {
          return _salaryField;
        }  
        
        private var _salaryFunction:Function = null;
        
        /**
         * @private
         */ 
        public function set salaryFunction(value:Function):void {
          if (_salaryFunction != value) {
            _salaryFunction = value;
            dispatchEvent(new Event(Event.CHANGE));
          }
        }
         
        /**
         * The function used to determine the salary of a person.
         * It must have the following signature:
         * <pre>
         * salaryFunction(<i>item:Object</i>):String
         * </pre>
         * This returns the salary from the
         * <code>item</code> provided by the data provider.
         * 
         * @default null
         */     
        public function get salaryFunction():Function {
          return _salaryFunction;
        }      
      }
    }
  2. Subclass the OrgChartItem class to provide the item renderers with access to the data.
    package
    {
      import ilog.orgchart.OrgChartItem;
      import mx.core.IUIComponent;
    
      /** 
       * This sample data item shows how to add a data field to the
       * <code>OrgChartItem</code>.
       */
      public class ExtendedDataItem extends OrgChartItem
      {
        public function ExtendedDataItem(owner:IUIComponent, item:Object,
                                         data:Object) {
          super(owner, item, data);
        }
       
        public function get salary():String {
          var fields:ExtendedFields = orgChart.fields as ExtendedFields;
          return getFieldValue(fields.salaryField, null,
                               fields.salaryFunction) as String;
        }
       }
     }
    
  3. Subclass the OrgChart class to create ExtendedDataItem instances and pass them to the item renderers.
    package
    {
      import ilog.orgchart.OrgChart;
      import ilog.orgchart.OrgChartItem;
    
      /** 
       * This sample OrgChart shows how to use an OrgChartItem subclass.
       */
      public class ExtendedOrgChart extends OrgChart
      {
        override protected function createOrgChartItem(item:Object):OrgChartItem {
          var collection:IHierarchicalCollectionView = dataProvider as 
                                                       IHierarchicalCollectionView;
          var hData:IHierarchicalData = collection.source;
          return new ExtendedDataItem(this, item, hData.getData(item));
        }
      }
     }
    
  4. Subclass the two default item renderers to display the new field.
    The following example shows the subclass of OrgChartItemRenderer.
    package
    {
      import ilog.orgchart.OrgChartItemRenderer;
      import ilog.orgchart.OrgChartItem;
      import mx.core.FlexTextField;
    
     /**
      * This sample item renderer shows how to add a field label to the
      * OrgChartItemRenderer
      */
      public class ExtendedItemRenderer extends OrgChartItemRenderer
      {
        
        private var _salaryLabel:FlexTextField;
        
        override protected function getFieldLabels():Array {
          var labels:Array = super.getFieldLabels();
          labels.push(_salaryLabel); 
          return labels;
        }
        
        override protected function applyData(data:OrgChartItem):void {
          _salaryLabel = setLabelProperty(_salaryLabel, "salary");
          super.applyData(data);            
        }
      }
    The following example shows the subclass of OrgChartDetailedItemRenderer.
    package
    {
      import ilog.orgchart.OrgChartDetailedItemRenderer;
      import mx.core.FlexTextField;
      import ilog.orgchart.OrgChartItem;
    
      /**
       * This sample item renderer shows how to add a field label to the
       * OrgChartDetailedItemRenderer 
       */  
      public class ExtendedDetailedItemRenderer extends OrgChartDetailedItemRenderer
      {        
        private var _salaryLabel:FlexTextField;
        private var _salaryLeftLabel:FlexTextField;
        
        override protected function createChildren():void {
          _salaryLeftLabel = new FlexTextField();
          addChild(_salaryLeftLabel);
          super.createChildren();      
        }
        
        override protected function setLeftLabelsText():void {
          super.setLeftLabelsText();
          if (_salaryLeftLabel != null) {
            _salaryLeftLabel.text = "Salary";                
          }
        }
        
        override protected function getFieldLabels():Array {
          var labels:Array = super.getFieldLabels();
          labels.push(_salaryLabel); 
          return labels;
        }
        
        override protected function getFieldValueLabels():Array {
          var labels:Array = super.getFieldValueLabels();
          labels.push(_salaryLeftLabel); 
          return labels;
        }
        
        override protected function applyData(data:OrgChartItem):void {
          _salaryLabel = setLabelProperty(_salaryLabel, "salary");
          super.applyData(data);
                
        }
      }
    }
The following MXML sample shows how to use all the components.
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:ilog="http://www.ilog.com/2007/ilog/flex"
                xmlns:local="*"
                layout="absolute">

    <local:ExtendedOrgChart id="chart" width="100%" height="100%" >
      <mx:XML>
        <employee name="Employee 1" email="e1@company.com" salary="123456" >
          <employee name="Employee 2" email="e1@company.com" salary="123456" />
          <employee name="Employee 3" email="e1@company.com" salary="123456" />
        </employee>
      </mx:XML>
      <local:fields>
        <local:ExtendedFields />
      </local:fields>
      <local:itemRenderer>
        <mx:Component>
          <local:ExtendedItemRenderer />
        </mx:Component>
      </local:itemRenderer>
    </local:ExtendedOrgChart>

</mx:Application>