Extend the LetterEditor

Create a new HostComponent to extend the LetterEditor class, such as: ExtendedLetterEditor. Extend the class from existing LetterEditor class: com.adobe.solutions.acm.authoring.presentation.letter.LetterEditor:

package com.adobe.customizations 
{ 
    import com.adobe.icc.editors.model.LetterModel; 
    import com.adobe.solutions.acm.authoring.presentation.letter.LetterEditor; 
 
    import flash.events.Event; 
 
    import mx.binding.utils.BindingUtils; 
 
    import spark.components.supportClasses.ListBase; 
 
    public class ExtendedLetterEditor extends LetterEditor 
    { 
        public function ExtendedLetterEditor() 
        { 
            super(); 
        } 
 
        [SkinPart(required="false")] 
        public var geographicalLocationListDisplay:ListBase; 
 
        [SkinPart(required="false")] 
        public var productLineListDisplay:ListBase; 
 
        //retrieve the list of all geographical locations and product lines, and populate the drop down. The binding is done to pre-populate the 
        // the drop downs when an existing asset is viewed/edited. 
        override protected function partAdded(partName:String, instance:Object) : void 
        { 
            super.partAdded(partName, instance); 
            if(instance == geographicalLocationListDisplay) 
            { 
                geographicalLocationListDisplay.addEventListener(Event.CHANGE, geographicalLocationDisplayValueChanged); 
                geographicalLocationListDisplay.dataProvider = GeographicalLocationManager.getInstance().getAllGeo(); 
                BindingUtils.bindSetter(updateGeographicalLocationDisplay, this, ["letterModel","extendedProperties","geographicalLocation"]); 
            } 
 
            else if(instance == productLineListDisplay) 
            { 
                productLineListDisplay.addEventListener(Event.CHANGE, productLineDisplayValueChanged); 
                productLineListDisplay.dataProvider = ProductLineManager.getInstance().getAllProductLines(); 
                BindingUtils.bindSetter(updateProductLineDisplay, this, ["letterModel","extendedProperties","productLine"]); 
            } 
        } 
 
        // This method helps to initialize the extendedProperties map (which is otherwise null) 
        override public function set letterModel(letterModel:LetterModel):void{ 
 
            if(letterModel!=null) 
                if(letterModel.extendedProperties == null) 
                    letterModel.extendedProperties = new Object(); 
            super.letterModel = letterModel; 
        } 
 
        // This method removes the event listeners when the editor is closed. 
        override protected function partRemoved(partName:String, instance:Object) : void 
        { 
            super.partRemoved(partName, instance); 
            if(instance == geographicalLocationListDisplay) 
            { 
                geographicalLocationListDisplay.removeEventListener(Event.CHANGE, geographicalLocationDisplayValueChanged); 
            } 
 
            else if(instance == productLineListDisplay) 
            { 
                productLineListDisplay.removeEventListener(Event.CHANGE, productLineDisplayValueChanged); 
            } 
 
        } 
 
        //the method is called through binding when the letterModel object's geographicalLocation property  is updated, and updates the Letter Editor UI 
        protected function updateGeographicalLocationDisplay(value:String=null):void 
        { 
            if(geographicalLocationListDisplay) 
            { 
                if(letterModel.extendedProperties!=null) 
                    if(letterModel) 
                    { 
                        if(geographicalLocationListDisplay.selectedItem == letterModel.extendedProperties.geographicalLocation) 
                            return; 
 
                        geographicalLocationListDisplay.selectedItem = letterModel.extendedProperties.geographicalLocation; 
                    } 
                    else 
                        geographicalLocationListDisplay.selectedItem = null; 
            } 
        } 
 
        //the method is called through binding when the letterModel object's productLine property  is updated, and updates the Letter Editor UI 
        protected function updateProductLineDisplay(value:String=null):void 
        { 
            if(productLineListDisplay) 
            { 
                if(letterModel.extendedProperties!=null) 
                    if(letterModel) 
                    { 
                        if(productLineListDisplay.selectedItem == letterModel.extendedProperties.productLine) 
                            return; 
 
                        productLineListDisplay.selectedItem = letterModel.extendedProperties.productLine; 
                    } 
                    else 
                        productLineListDisplay.selectedItem = null; 
            } 
        } 
 
        //Update the domain object when the user changes the geographicalLocation in UI 
        protected function geographicalLocationDisplayValueChanged(event:Event):void 
        { 
            if(letterModel) 
            { 
                letterModel.extendedProperties.geographicalLocation = geographicalLocationListDisplay.selectedItem as String; 
letterModel.dirty = true; 
            } 
        } 
 
        //Update the domain object when the user changes the productLine in UI 
        protected function productLineDisplayValueChanged(event:Event):void 
        { 
            if(letterModel) 
            { 
                letterModel.extendedProperties.productLine = productLineListDisplay.selectedItem as String; 
letterModel.dirty = true; 
            } 
        } 
    } 
}

Create the ExtendedLetterEditorSkin MXML skin for the host component com.adobe.customizations.ExtendedLetterEditor, and creating a copy of: com.adobe.solutions.acm.authoring.skins.letter.LetterEditorSkin. In the generated code, add two new DropDownList for the new properties:

<s:Rect height="{formSpacer}" /> 
<s:Label id="geographicalLocationLabelDisplay" text="Geographical Location" styleName="dialogForm" /> 
<s:DropDownList id="geographicalLocationListDisplay" 
    enabled.View="false" 
    width="205" height="24" /> 
 
<s:Rect height="{formSpacer}" /> 
<s:Label id="productLineLabelDisplay" text="Product Line" styleName="dialogForm" /> 
<s:DropDownList id="productLineListDisplay" 
    enabled.View="false" 
    width="205" height="24" />