Scenario: Customizing the Create Correspondence user interface

Update the value of variable CM_APPLICATION_CONTEXT in the following files:

• CorrespondenceManagementSolutionTemplate/CreateCorrespondence/src/com/adobe/solutions/cmg/ccr/presentation/CCRApplication.as

• CorrespondenceManagementSolutionTemplate/ManageAssets/src/com/adobe/solutions/cmg/manage\presentation/AMApplication.as

Modify the new toolbarSkin.mxml file and set the "includeInLayout" and "visible" property of the indentation buttons to "false" so that the indentation buttons are not displayed.

<s:HGroup gap="-1" > 
    <s:Button  id="rightIndentBtn" styleName="increaseIndentButton" toolTip="{resourceManager.getString('Iccuser interfaceStrings','increaseIndentBtnToolTip')}" height="23" width="29" visible="false" includeInLayout="false"/> 
    <s:Button  id="leftIndentBtn" styleName="decreaseIndentButton" toolTip="{resourceManager.getString('Iccuser interfaceStrings','decreaseIndentBtnToolTip')}"  height="23" width="29" visible="false" includeInLayout="false"/> 
</s:HGroup>

Create a Solution Template style sheet to use the customized skin file at CreateCorrespondence > src > CSS, for example, custom_styles.css. Add the following entry in the CreateCorrespondence > src > CSS > custom_styles.css so the toolbar class uses the customized skin.

@namespace ccrpresentation "com.adobe.solutions.acm.ccr.presentation.*"; 
 
ccrpresentation|toolbar 
{ 
    backgroundGradientStartColor : #656565; 
    backgroundGradientEndColor    : #353535;     
    borderContainerBgColor : #525252; 
    borderColor : #222222; 
    skinClass: ClassReference("com.adobe.solutions.cmg.ccr.skins.toolbarSkin"); 
}

Add the new CSS file in CreateCorrespondence > src > (default package) > index.mxml:

<fx:Style source="/css/custom_styles.css"/>

Create an ActionScript class here say CustomModuleItemRenderer.as which extends the com.adobe.solutions.acm.ccr.presentation.contentcapture.ModuleItemRenderer class. Override the commitProperties function in it to disable the edit button based on the user group. The source code shown below assumes that there is a user group defined such as"EditText". Also, the Edit button is enabled only for those users which are a part of this group.

package com.adobe.solutions.cmg.ccr.presentation 
{ 
    import com.adobe.icc.services.ServiceProvider; 
    import com.adobe.icc.services.user.ISSOManager; 
    import com.adobe.solutions.acm.ccr.presentation.contentcapture.ModuleItemRenderer; 
     
    import mx.collections.IList; 
     
    import spark.components.Button; 
     
    public class CustomModuleItemRenderer extends ModuleItemRenderer 
    { 
        public var userManager:ISSOManager = ServiceProvider.getUserService(); 
        public function enableTextEditBtnBasedOnUserGroup():void 
        { 
            if(userManager && userManager.currentUser) 
            {     
                var listGroups:IList = userManager.currentUser.groups; 
                //If the EditText group is not assigned to the user disable the Edit button. 
                if(listGroups.getItemIndex("EditText") == -1) 
                    textEditBtn.enabled = false;     
            }     
        } 
         
        override protected function commitProperties():void 
        { 
            super.commitProperties() 
            if(textEditBtn && textEditBtn.visible) 
            { 
                enableTextEditBtnBasedOnUserGroup(); 
            } 
            invalidateDisplayList(); 
        } 
    } 
}

Navigate to CreateCorrespondence > src > com.adobe.solutions.cmg.ccr > skins.Create skin file TargetAreaRendererSkin.mxml as a copy of the skin file com.adobe.solutions.acm.ccr.skins.contentcapture.TargetAreaRendererSkin.mxml. Modify the moduleViewList in the new TargetAreaRendererSkin.mxml file to use the CustomModuleItemRenderer as follows:

<s:List id="moduleViewList" contentBackgroundAlpha="1.0" 
    alternatingItemColors="[0xffffff, 0xf8f8f8]" contentBackgroundColor="0xf8f8f8" 
    itemRenderer="com.adobe.solutions.cmg.ccr.presentation.CustomModuleItemRenderer" 
    width="100%" minHeight="0" > 
    <s:layout > 
         <s:VerticalLayout horizontalAlign="contentJustify" variableRowHeight="true" gap="0" paddingTop="0" paddingBottom="0"/> 
    </s:layout> 
</s:List>

Create a style sheet to use the customized files (such as custom_styles.css). Add the following entries in the CreateCorrespondence > src > CSS > custom_styles.css:

/* CSS file */ 
@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 
@namespace contentcapture "com.adobe.solutions.acm.ccr.presentation.contentcapture.*"; 
@namespace presentation "com.adobe.solutions.cmg.ccr.presentation.*"; 
 
contentcapture|TargetAreaRenderer 
{ 
    backgroundGradientStartColor : #656565; 
    backgroundGradientEndColor    : #353535;     
    borderContainerBgColor : #454545; 
    borderColor : #222222; 
    skinClass: ClassReference("com.adobe.solutions.cmg.ccr.skins.TargetAreaRendererSkin"); 
} 
 
presentation|CustomModuleItemRenderer 
{ 
    backgroundGradientStartColor : #656565; 
    backgroundGradientEndColor    : #353535;     
    borderContainerBgColor : #454545; 
    borderColor : #222222; 
    skinClass: ClassReference("com.adobe.solutions.acm.ccr.skins.contentcapture.ModuleItemRendererSkin"); 
}

Update index.mxml file to include this custom CSS file, include after including all other CSS files:

<fx:Style source="/css/custom_styles.css"/>

Navigate to CreateCorrespondence > src > com.adobe.solutions.cmg.ccr > presentation and add a custom filter target area filter function in the CCRApplication.as file:

import com.adobe.icc.dc.domain.IModuleInstance; 
            import com.adobe.icc.dc.domain.TargetInstance; 
            import com.adobe.icc.dc.domain.VariableInstance; 
                import com.adobe.icc.dc.domain.TextModuleInstance; 
 
        /** 
         * Returns true if the target area needs to displayed, 
         * false if it is not to be displayed 
         */ 
        private function customTargetInstanceFilterFunction(item:Object):Boolean 
        { 
            if(! (item is TargetInstance)) 
                return false; 
            var targetInstance:TargetInstance = item as TargetInstance; 
            //Show the target area if it allows free text 
            if(targetInstance.allowFreeText) 
                return true; 
            if(!targetInstance.contents || targetInstance.contents.length < 1) 
                return false; 
            //If the order is not fixed show the target area 
            if(!targetInstance.ordered) 
                return true; 
            //Check if there is any optional content in the target area 
            for(var i:int=0; i<targetInstance.contents.length; i++) 
            { 
                var moduleInst:IModuleInstance = targetInstance.contents[i] as IModuleInstance; 
                if(moduleInst.optional) 
                    return true; 
                //If there is a TextModule which is editable show the target area 
                if(moduleInst is TextModuleInstance && moduleInst.editable) 
                    return true; 
            } 
             
            //Check if there are any editable content variables in the target area 
            if(targetInstance.contentVariables && targetInstance.contentVariables.length > 0) 
            {     
                for(var i:int=0; i<targetInstance.contentVariables.length; i++) 
                { 
                    var varInst:VariableInstance = targetInstance.contentVariables[i] as VariableInstance; 
                    if(varInst.editable) 
                        return true; 
                } 
            }     
            return false; 
        };

Modify partAdded function in the CCRApplication.as file and set the custom target area filter function for the contentCapturePod.

else if(instance == contentCapturePod) 
{ 
    //Set the custom filter function here 
    contentCapturePod.targetInstanceFilterFunction = customTargetInstanceFilterFunction; 
 
    BindingUtils.bindSetter(updateContentCaptureProvider, this, ["letterInstance", "targetInstances"]); 
    BindingUtils.bindSetter(updateContentCaptureVariableList, this, ["letterInstance", "variableInstances"]); 
    contentCapturePod.addEventListener("libraryInsertEvent", handleLibraryInsertEvent); 
    contentCapturePod.addEventListener("textEditEvent", handleTextEditEvent); 
    contentCapturePod.addEventListener("activeContentChange", contentCapturePod.handleActiveContentEvent); 
    addEventListener("ItemMoveUpClickEvent", handleItemMoveUpClick); 
    addEventListener("ItemMoveDownClickEvent", handleItemMoveDownClick); 
    addEventListener("ItemDeleteClickEvent", handleItemDeleteClick); 
    addEventListener("LeftIndentClickEvent", handleLeftIndentClick); 
    addEventListener("RightIndentClickEvent", handleRightIndentClick); 
}

Open the file CCRApplication.as and append the source code below.

import com.adobe.dct.event.DCTServiceEvent; 
import com.adobe.dct.model.DataDictionaryInstanceModel; 
import com.adobe.dct.service.DataDictionaryUtilService; 
import com.adobe.dct.transfer.DataDictionaryElement; 
import com.adobe.icc.services.render.ILetterRenderService; 
import com.adobe.icc.util.Map; 
import com.adobe.icc.vo.Field; 
import com.adobe.icc.vo.Variable; 
import flash.events.MouseEvent; 
import mx.collections.ArrayCollection;     
import mx.rpc.remoting.RemoteObject; 
import mx.rpc.IResponder; 
import spark.components.FormItem; 
import spark.components.TextInput; 
 
        [SkinPart(required="false")] 
        /** 
         * The data capture form. 
         */ 
        public var dataCaptureForm:spark.components.Form; 
         
        [SkinPart(required="false")] 
        /** 
         * Submit button which the agent will press to submit the form. 
         */ 
        public var submitBtn:Button; 
         
        private var _dataDictionaryInstance:DataDictionaryInstanceModel = null; 
        private var fieldList:IList = null; 
        private var phList:IList = null; 
        private var ddeList:IList = null; 
         
        private var textInputFieldList:ArrayCollection = new ArrayCollection(); 
        private var textInputDDEList:ArrayCollection = new ArrayCollection(); 
        private var textInputVariableList:ArrayCollection = new ArrayCollection(); 
         
        /** 
         * Wrapper function which invokes the getLetterDataElements of the LetterService 
         * running on the server 
         */ 
        public function letterServiceGetLetterDataElements(letterId:String):AsyncToken 
        { 
            var _service:RemoteObject; 
            _service = com.adobe.icc.services.ServiceLocator.getInstance().getRemoteObject("lc.icc.dbservices.letterService"); 
            var operationToken:AsyncToken = _service.getLetterDataElements(letterId); 
            return operationToken;     
        } 
         
        protected function getLetterDataElements(invokeParams:InvokeParams):void 
        { 
            var operationToken:AsyncToken = letterServiceGetLetterDataElements(invokeParams.letterId); 
            var responder:IResponder = new Responder( 
                function(event:ResultEvent):void 
                { 
                    Debug.info("getLetterDataElements success"); 
                    var dataElem:Map = Map.fromObject(event.result as Object); 
                     
                    if(dataElem.hasKey("Field")) 
                    { 
                        fieldList = dataElem.value("Field"); 
                        if(fieldList != null && fieldList.length > 0) 
                        { 
                            for(var i:int = 0; i<fieldList.length; i++) 
                            { 
                                var fd:Field = fieldList[i]; 
                                var dataCaptureFormItem:FormItem = new FormItem(); 
                                dataCaptureFormItem.label = fd.displayName + " Field " + fd.type; 
                                var ti:TextInput = new TextInput(); 
                                textInputFieldList.addItemAt(ti, i); 
                                dataCaptureFormItem.addElement(ti); 
                                dataCaptureForm.addElementAt(dataCaptureFormItem, i); 
                            }     
                        }     
                    } 
                    if(dataElem.hasKey("DDE")) 
                    { 
                        ddeList = dataElem.value("DDE"); 
                        if(ddeList != null && ddeList.length > 0) 
                        { 
                            for(var j:int = 0; j<ddeList.length; j++) 
                            { 
                                var dde:DataDictionaryElement = ddeList[j]; 
                                var dataCaptureFormItem:FormItem = new FormItem(); 
                                dataCaptureFormItem.label = dde.displayName + " DDE " + dde.elementType; 
                                var ti:TextInput = new TextInput(); 
                                 
                                textInputDDEList.addItemAt(ti, j); 
                                dataCaptureFormItem.addElement(ti); 
                                dataCaptureForm.addElementAt(dataCaptureFormItem, i+j); 
                            }     
                        }     
                    } 
                    if(dataElem.hasKey("PH")) 
                    { 
                        phList = dataElem.value("PH"); 
                        if(phList != null && phList.length > 0) 
                        { 
                            for(var k:int = 0; j<phList.length; k++) 
                            { 
                                var ph:Variable = phList[k]; 
                                var dataCaptureFormItem:FormItem = new FormItem(); 
                                dataCaptureFormItem.label = ph.name + " PH " + ph.dataType; 
                                var ti:TextInput = new TextInput(); 
                                textInputVariableList.addItemAt(ti, k); 
                                dataCaptureFormItem.addElement(ti); 
                                dataCaptureForm.addElementAt(dataCaptureFormItem, i+j+k); 
                            }     
                        }     
                    } 
                }, 
                function(faultEvent:FaultEvent):void 
                { 
                    Debug.error("Error in getLetterDataElements", faultEvent); 
                } 
            ); 
            operationToken.addResponder(responder);     
        } 
         
        /** 
         * Wrapper function which invokes the serializeDataElementsToXML of the LetterRenderService 
         * running on the server 
         */ 
        public function letterRenderServiceSerializeDataElementsToXML(ddiDataAsXml:String, phValues:Object,fieldValues:Object):AsyncToken 
        { 
            var _service:RemoteObject; 
            _service = com.adobe.icc.services.ServiceLocator.getInstance().getRemoteObject("lc.icc.renderlib.letterRenderService"); 
            var operationToken:AsyncToken = _service.serializeDataElementsToXML(ddiDataAsXml, phValues, fieldValues); 
            return operationToken;     
        } 
         
        private function serializeDataElementsToXML(ddi:String, mapVar:Map, mapField:Map) 
        { 
            var operationToken:AsyncToken = letterRenderServiceSerializeDataElementsToXML(ddi, mapVar.toObject(), mapField.toObject()); 
            var responder:IResponder = new Responder( 
                function(event:ResultEvent):void 
                { 
                    Debug.info("serializeDataElementsToXML success"); 
                    var serializedXML:String = event.result as String; 
                    trace(serializedXML); 
                    var letterRenderService:ILetterRenderService = ServiceProvider.getLetterRenderService(); 
                    letterRenderService.renderLetterToFile(invocationParams.letterId, true, serializedXML, false, false).addHandlers( 
                        function(event:ResultEvent):void 
                        { 
                            Debug.info("renderLetter success"); 
                        }, 
                        function(faultEvent:FaultEvent):void 
                        { 
                            Debug.error("Error in renderLetter", faultEvent); 
                        } 
                    )     
                }, 
                function(faultEvent:FaultEvent):void 
                { 
                    Debug.error("Error in serializeDataElementsToXML", faultEvent); 
                } 
            ); 
            operationToken.addResponder(responder); 
        }         
         
        private function onSubmitBtnClick(e:Event) 
        { 
            var mapField:Map = new Map(); 
            var mapVar:Map = new Map(); 
            for(var i:int=0;i<textInputFieldList.length; i++) 
            { 
                var textInput:TextInput = textInputFieldList.getItemAt(i) as TextInput; 
                if(textInput) 
                    trace(textInput.text); 
                mapField.assign((fieldList[i] as Field).path, textInput.text); 
            } 
            for(var i:int=0;i<textInputVariableList.length; i++) 
            { 
                var textInput:TextInput = textInputVariableList.getItemAt(i) as TextInput; 
                if(textInput) 
                    trace(textInput.text); 
                mapVar.assign((phList[i] as Variable).name, textInput.text); 
            } 
            for(var i:int=0;i<textInputDDEList.length; i++) 
            { 
                var textInput:TextInput = textInputDDEList.getItemAt(i) as TextInput; 
                if(textInput) 
                    trace(textInput.text); 
                if(textInput.text  && textInput.text != "") 
                    _dataDictionaryInstance.setValue((ddeList[i] as DataDictionaryElement).referenceName, textInput.text); 
            } 
             
             
            var dDEUtilservice:DataDictionaryUtilService = DCTServiceProvider.getUtilService(); 
            dDEUtilservice.serializeDDItoXML(_dataDictionaryInstance.vo, 
                function(event:DCTServiceEvent):void 
                { 
                    Debug.info("serializeDDItoXML success"); 
                    trace(event.data as String) 
                    serializeDataElementsToXML(event.data as String, mapVar, mapField); 
                }, 
                function(faultEvent:FaultEvent):void 
                { 
                    Debug.error("Error in serializeDDItoXML", faultEvent); 
                } 
            )     
        }

Add the click handler for the submit button in the partAdded function as follows:

 else if(instance == submitBtn) 
    submitBtn.addEventListener(MouseEvent.CLICK, onSubmitBtnClick); 

Navigate to CreateCorrespondence > src > com.adobe.solutions.cmg.Create Correspondence > skins. Open the file CCRApplicationSkin.mxml. Replace the entire content of this file with the source code below to create a form with the data elements and a Submit button. Alternatively you can create a skin file. Provide the reference of newly created skin file in the CreateCorrespondence > src > CSS > CSS_styles.css.

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx" 
             width="100%" height="100%" > 
     
    <fx:Metadata> 
        [HostComponent("com.adobe.solutions.cmg.ccr.presentation.CCRApplication")] 
    </fx:Metadata> 
     
     
     
    <fx:Script> 
        <![CDATA[ 
            import mx.collections.ArrayCollection; 
            import mx.core.user interfaceComponent; 
             
        ]]> 
    </fx:Script> 
     
    <s:states> 
        <s:State name="initializing" /> 
        <s:State name="normal" /> 
        <s:State name="review" /> 
        <s:State name="disabled"/>         
    </s:states> 
     
    <s:Rect left="0" right="0" top="0" bottom="0"  > 
        <s:fill> 
            <s:SolidColor id="bgColor" color="0xeeeeee" alpha="1.0" /> 
        </s:fill> 
    </s:Rect> 
     
    <s:Group width="100%" height="100%" > 
        <s:layout> 
            <s:VerticalLayout gap="0" /> 
        </s:layout> 
        <s:Scroller width="100%" height="100%" > 
            <s:VGroup gap="0" width="100%" > 
                <s:Form id="dataCaptureForm" width="100%" height="100%" > 
                    <!-- dataCaptureItems here dynamically --> 
                </s:Form> 
            </s:VGroup> 
        </s:Scroller> 
        <s:Button id="submitBtn" width="50" height="20" label="Submit"/> 
    </s:Group> 
     
</s:SparkSkin>