在创建对应UI中添加自定义操作/按钮

概述

Correspondence Management解决方案允许您向Create Correspondence用户界面添加自定义操作。

本文档中的方案说明了如何在“创建通信用户界面”中创建按钮,以共享信件作为附加到电子邮件的审阅PDF。

前提条件

要完成此方案,您需要:

  • CRX和JavaScript知识
  • LiveCycle Server

方案:在“创建对应用户界面”中创建按钮,以发送信件以供审阅

在“创建通信用户界面”中添加包含操作的按钮(此处发送信函以供审阅)包括:

  1. 将按钮添加到“创建对应用户界面”
  2. 向按钮添加操作处理
  3. 添加LiveCycle进程以启用操作“处理”

将该按钮添加到“创建对应”用户界面

  1. 转到https://[server]:[port]/[ContextPath]/crx/de并以管理员身份登录。

  2. 在apps文件夹中,创建一个名为defaultApp的文件夹,其路径/结构与defaultApp文件夹(位于config文件夹中)类似。 使用以下步骤创建文件夹:

    • 右键单击以下路径的​defaultApp​文件夹,然后选择​叠加节点:

      /libs/fd/cm/config/defaultApp/

      叠加节点

    • 确保“叠加节点”对话框具有以下值:

      路径 :/libs/fd/cm/config/defaultApp/

      叠加位置 :/apps/

      匹配节点类型:已选

      叠加节点

    • 单击​确定

    • 单击​保存全部

  3. 复制/apps分支下的acmExtensionsConfig.xml文件(位于/libs分支下)。

    • 转到“/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml”

    • 右键单击acmExtensionsConfig.xml文件,然后选择​复制

      复制acmExtensionsConfig.xml

    • 右键单击“/apps/fd/cm/config/defaultApp/”处的​defaultApp​文件夹,然后选择​粘贴

    • 单击​保存全部

  4. 多次,单击您在apps文件夹中新创建的acmExtentionsConfig.xml的副本。 将打开文件进行编辑。

  5. 找到以下代码:

    <?xml version="1.0" encoding="utf-8"?>
    <extensionsConfig>
        <modelExtensions>
            <modelExtension type="LetterInstance">
      <customAction name="Preview" label="loc.letterInstance.preview.label" tooltip="loc.letterInstance.preview.tooltip" styleName="previewButton"/>
                <customAction name="Submit" label="loc.letterInstance.submit.label" tooltip="loc.letterInstance.submit.tooltip" styleName="submitButton" permissionName="forms-users"/>
                <customAction name="SaveAsDraft" label="loc.letterInstance.saveAsDraft.label" tooltip="loc.letterInstance.saveAsDraft.tooltip" styleName="submitButton" permissionName="forms-users"/>
                <customAction name="Close" label="loc.letterInstance.close.label" tooltip="loc.letterInstance.close.tooltip" styleName="closeButton"/>
            </modelExtension>
        </modelExtensions>
    </extensionsConfig> 
    
  6. 要发送电子邮件,您可以使用LiveCycleForms Workflow。 在acmExtensionsConfig.xml中的modelExtension标签下添加customAction标签,如下所示:

     <customAction name="Letter Review" label="Letter Review" tooltip="Letter Review" styleName="" permissionName="forms-users" actionHandler="CM.domain.CCRCustomActionHandler">
          <serviceName>Forms Workflow -> SendLetterForReview/SendLetterForReviewProcess</serviceName>
        </customAction>
    

    customAction标签

    modelExtension标签包含一组customAction子标签,用于配置操作按钮的操作、权限和外观。 以下是customAction配置标记的列表:

    名称 描述
    name 要执行的操作的字母数字名称。 此标签的值是必需的,必须是唯一的(在modelExtension标签中),并且必须用字母表开始。
    标签 要在操作按钮上显示的标签
    工具 按钮的工具提示文本,当用户悬停在按钮上时将显示该文本。
    styleName 应用于操作按钮的自定义样式的名称。
    permissionName 仅当用户具有permissionName指定的权限时,才会显示相应的操作。 将permissionName指定为forms-users时,所有用户都可访问此选项。
    actionHandler 当用户单击按钮时调用的ActionHandler类的完全限定名称。

    除了上述参数之外,还可能有与customAction关联的其他配置。 这些附加配置通过CustomAction对象提供给处理函数。

    名称 描述
    serviceName 如果customAction包含一个名为serviceName的子标记,则单击相关按钮/链接后,将调用一个由serviceName标记表示的名称的进程。 确保此过程与Letter PostProcess具有相同的签名。 在服务名中添加“Forms Workflow->”前缀。
    标记名称中包含cm_前缀的参数 如果customAction包含以名称cm_开头的子标签,则在后期处理(无论是字母后期处理还是由serviceName标签表示的特殊进程)中,这些参数在删除了cm_前缀的相关标签下的输入XML代码中可用。
    actionName 只要发布过程需要单击,提交的XML就会在标记下包含一个特殊标记,该标记具有用户操作的名称。
  7. 单击​保存全部

在/apps分支中创建一个包含属性文件的区域设置文件夹

ACMExtensionsMessages.properties文件包含“创建对应”用户界面中各个字段的标签和工具提示消息。 要使自定义的操作/按钮正常工作,请在/apps分支中复制此文件。

  1. 右键单击以下路径的​locale​文件夹,然后选择​叠加节点:

    /libs/fd/cm/config/defaultApp/locale

  2. 确保“叠加节点”对话框具有以下值:

    路径 :/libs/fd/cm/config/defaultApp/locale

    叠加位置 :/apps/

    匹配节点类型:已选

  3. 单击​确定

  4. 单击​保存全部

  5. 右键单击以下文件,然后选择​复制:

    /libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties

  6. 右键单击以下路径的​locale​文件夹,然后选择​粘贴:

    /apps/fd/cm/config/defaultApp/locale/

    ACMExtensionsMessages.properties文件被复制在区域设置文件夹中。

  7. 要本地化新添加的自定义操作/按钮的标签,请为/apps/fd/cm/config/defaultApp/locale/中的相关区域设置创建ACMExtensionsMessages.properties文件。

    例如,要本地化本文中创建的自定义操作/按钮,请使用以下条目创建一个名为ACMExtensionsMessages_fr.properties的文件:

    loc.letterInstance.letterreview.label=Revue De Lettre

    同样,您也可以在此文件中添加更多属性,如工具提示和样式。

  8. 单击​保存全部

重新启动Adobe Asset Composer构建块包

在进行每个服务器端更改后,重新启动Adobe Asset Composer构建块捆绑。 在此方案中,服务器端上的acmExtensionsConfig.xml和ACMExtensionsMessages.properties文件将进行编辑,因此Adobe Asset Composer构建块捆绑需要重新启动。

注意

您可能需要清除浏览器缓存。

  1. 转到 https://[host]:[port]/system/console/bundles. 如有必要,请以管理员身份登录。

  2. 找到Adobe资产书写器构建块捆绑。 重新启动包:单击“停止”,然后单击“开始”。

    Adobe资产书写器构建块

重新启动Adobe Asset Composer构建块捆绑后,自定义按钮将显示在“创建对应用户界面”中。 您可以在“创建对应用户界面”中打开一个字母来预览自定义按钮。

将操作处理添加到按钮

默认情况下,“创建对应”用户界面在cm.domain.js文件中的以下位置实现了ActionHandler:

/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccr/js/cm.domain.js

对于自定义操作处理,请在CRX的/apps分支中创建cm.domain.js文件的叠加。

在单击操作/按钮时处理操作/按钮包括以下逻辑:

  • 使新添加的动作可见/不可见:通过覆盖actionVisible()函数完成。
  • 启用/禁用新添加的操作:通过覆盖actionEnabled()函数完成。
  • 用户单击按钮时实际操作:通过覆盖handleAction()函数的实现完成。
  1. 转到 https://[server]:[port]/[ContextPath]/crx/de. 如有必要,请以管理员身份登录。

  2. 在apps文件夹中,在CRX的/apps分支中创建一个名为js的文件夹,其结构类似于以下文件夹:

    /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

    使用以下步骤创建文件夹:

    1. 右键单击以下路径的​js​文件夹,然后选择​叠加节点:

      /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

    2. 确保“叠加节点”对话框具有以下值:

      路径 :/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

      叠加位置 :/apps/

      匹配节点类型:已选

    3. 单击​确定

    4. 单击​保存全部

  3. 在js文件夹中,使用以下步骤创建一个名为ccrcustomization.js的文件,其中包含用于按钮操作处理的代码:

    1. 右键单击以下路径的​js​文件夹,然后选择​创建>创建文件:

      /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

      将文件命名为ccrcustomization.js。

    2. 多次 — 单击crcustomization.js文件以在CRX中打开它。

    3. 在文件中,粘贴以下代码并单击​保存全部:

      /* for adding and handling custom actions in Extensible Toolbar.
        * One instance of handler will be created for each action.
        * CM.domain.CCRCustomActionHandler is actionHandler class.
        */
      var CCRCustomActionHandler;
          CCRCustomActionHandler = CM.domain.CCRCustomActionHandler = new Class({
              className: 'CCRCustomActionHandler',
              extend: CCRDefaultActionHandler,
              construct : function(action,model){
              }
          });
          /**
           * Called when user user click an action
           * @param extraParams additional arguments that may be passed to handler (For future use)
           */
          CCRCustomActionHandler.prototype.handleAction = function(extraParams){
              if (this.action.name == CCRCustomActionHandler.SEND_FOR_REVIEW) {
                  var sendForReview = function(){
                      var serviceName = this.action.actionConfig["serviceName"];
                      var inputParams = {};
                      inputParams["dataXML"] = this.model.iccData.data;
                      inputParams["letterId"] = this.letterVO.id;
                      inputParams["letterName"] = this.letterVO.name;
                      inputParams["mailId"] = $('#email').val();
                      /*function to invoke the LivecyleService */
                      ServiceDelegate.callJSONService(this,"lc.icc.renderlib.serviceInvoker.json","invokeProcess",[serviceName,inputParams],this.onProcessInvokeComplete,this.onProcessInvokeFail);
                      $('#ccraction').modal("hide");
                  }
                  if($('#ccraction').length == 0){
                      /*For first click adding popup & setting letterName.*/
                      $("body").append(popUp);
                      $("input[id*='letterName']").val(this.letterVO.name);   
                      $(document).on('click',"#submitLetter",$.proxy( sendForReview, this ));
                  }
                  $('#ccraction').modal("show");
              }
          };
          /**
           * Should the action be enabled in toolbar
           * @param extraParams additional arguements that may be passed to handler (For future use)
           * @return flag indicating whether the action should be enabled
           */
         CCRCustomActionHandler.prototype.actionEnabled = function(extraParams){
                  /*can be customized as per user requirement*/
                  return true;
          };
          /**
           * Should the action be visible in toolbar
           * @param extraParams additional arguments that may be passed to handler (For future use)
           * @return flag indicating whether the action should be enabled
           */
          CCRCustomActionHandler.prototype.actionVisible = function(extraParams){
              /*Check can be enabled for Non-Preview Mode.*/
              return true;
          };
          /*SuccessHandler*/
          CCRCustomActionHandler.prototype.onProcessInvokeComplete = function(response) {
              ErrorHandler.showSuccess("Letter Sent for Review");
          };
          /*FaultHandler*/
          CCRCustomActionHandler.prototype.onProcessInvokeFail = function(event) {
              ErrorHandler.showError(event.message);
          };
          CCRCustomActionHandler.SEND_FOR_REVIEW  = "Letter Review";
      /*For PopUp*/
          var popUp = '<div class="modal fade" id="ccraction" tabindex="-1" role="dialog" aria-hidden="true">'+
          '<div class="modal-dialog modal-sm">'+
              '<div class="modal-content">' +
                  '<div class="modal-header">'+
                      '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                      '<h4 class="modal-title"> Send Review </h4>'+
                  '</div>'+
                  '<div class="modal-body">'+
                      '<form>'+
                          '<div class="form-group">'+
                              '<label class="control-label">Email Id</label>'+
                              '<input type="text" class="form-control" id="email">'+
                          '</div>'+
                          '<div class="form-group">'+
                              '<label  class="control-label">Letter Name</label>'+
                              '<input id="letterName" type="text" class="form-control" readonly>'+
                          '</div>'+
                          '<div class="form-group">'+
                              '<input id="letterData" type="text" class="form-control hide" readonly>'+
                          '</div>'+
                      '</form>'+
                  '</div>'+
                  '<div class="modal-footer">'+
                     '<button type="button" class="btn btn-default" data-dismiss="modal"> Cancel </button>'+
                     '<button type="button" class="btn btn-primary" id="submitLetter"> Submit </button>'+
                  '</div>'+
              '</div>'+
          '</div>'+
      '</div>';
      

添加LiveCycle进程以启用操作处理

在此方案中,请启用以下组件,这些组件是附加的components.zip文件的一部分:

  • DSC组件jar(DSCSample.jar)
  • 发送信函以供审阅流程LCA(SendLetterForReview.lca)

下载并解压缩components.zip文件,获取DSCSample.jarSendLetterForReview.lca文件。 按照以下过程中的指定使用这些文件。

获取文件

配置LiveCycle服务器以运行LCA进程

注意

仅当您处于“ OSGI设置”并且要实现的自定义类型需要LC集成时,才需要此步骤。

LCA进程在LiveCycle服务器上运行,并需要服务器地址和登录凭据。

  1. 转到https://[server]:[port]/system/console/configMgr并以管理员身份登录。

  2. 找到Adobe LiveCycle客户端SDK配置,然后单击​编辑(编辑图标)。 “配置”面板将打开。

  3. 输入以下详细信息,然后单击​保存:

    • 服务器Url:操作处理程序代码使用的Send For Review服务的LC服务器的URL。
    • 用户名:LC服务器的管理员用户名
    • 密码:管理员用户名的口令

    Adobe LiveCycle客户端SDK配置

安装LiveCycle存档(LCA)

启用电子邮件服务流程所需的LiveCycle流程。

注意

要视图此流程的功能或创建您自己的类似流程,您需要Workbench。

  1. 以管理员身份登录到位于https:/[lc server]/:[lc port]/adminui的Livecycle Server adminui。

  2. 导航到​“主页”>“服务”>“应用程序和服务”>“应用程序管理”

  3. 如果SendLetterForReview应用程序已存在,请跳过此过程中的其余步骤,否则继续执行后续步骤。

    UI中的SendLetterForReview应用程序

  4. 单击​导入

  5. 单击​选择文件,然后选择​SendLetterForReview.lca

    选择SendLetterForReview.lca文件

  6. 单击​预览

  7. 选择​在导入完成​时将资源部署到运行时。

  8. 单击​导入

将ServiceName添加列入允许列表到列表服务

在AEM服务器中提到要访问AEM服务器的LiveCycle服务。

  1. 以管理员身份登录到https:/[host]/:[port]/system/console/configMgr

  2. 找到并单击​“Adobe LiveCycle客户端SDK配置”。 出现“Adobe LiveCycle Client SDK Configuration”(客户端SDK配置)面板。

  3. 在“服务名称”列表中,单击+图标,并添加一个serviceName SendLetterForReview/SendLetterForReviewProcess

  4. 单击​保存

配置电子邮件服务

在此方案中,要使Corresponce Management能够发送电子邮件,请在LiveCycle服务器中配置电子邮件服务。

  1. 使用管理员凭据登录到位于https:/[lc server]:[lc port]/adminui的Livecycle Server adminui。

  2. 导航到​“主页”>“服务”>“应用程序和服务”>“服务管理”

  3. 找到并单击​EmailService

  4. 在​SMTP主机​中,配置电子邮件服务。

  5. 单击​保存

配置DSC服务

要使用Corresponce Management API,请下载DSCSample.jar(作为components.zip的一部分附加到此文档中)并将其上传到LiveCycle服务器。 将DSCSample.jar文件上传到LiveCycle服务器后,AEM服务器使用DSCSample.jar文件访问renderLetter API。

有关详细信息,请参阅将AEM Forms与Adobe LiveCycle连接

  1. 更新DSCSample.jar中cmsa.properties中的AEM服务器URL,它位于以下位置:

    DSCSample.jar\com\adobe\livecycle\cmsa.properties

  2. 在配置文件中提供以下参数:

    • crx.serverUrl=https:/[ host]/:[port]/[context path][/ URL]
    • crx.username= AEM用户名
    • crx.password= AEM密码
    • crx.appRoot=/content/apps/cm
    注意

    每次您在服务器端进行任何更改时,请重新启动LiveCycle服务器。 有关创建您自己的LiveCycle组件的信息,请参阅通过自定义DSC开发扩展LiveCycle ES软件

    DSCSample.jar文件使用renderLetter API。 有关renderLetter API的详细信息,请参阅接口LetterRenderService

将DSC导入LiveCyle

DSCSample.jar 文件使用 renderLetter API从C作为输入提供的XML数据将字母渲染为PDF字节。有关renderLetter和其他API的详细信息,请参阅Letter Render Service

  1. 开始 Workbench并登录。

  2. 选择​窗口>显示视图>组件。 组件视图将添加到Workbench ES2。

  3. 右键单击​组件​并选择​安装组件

  4. 通过文件浏览器选择DSCSample.jar文件,然后单击​打开

  5. 右键单击​RenderWrapper​并选择​开始组件。 如果组件开始,则组件名称旁边将显示绿色箭头。

发送信函以供审阅

在配置了用于发送信函以供审阅的操作和按钮之后:

  1. 清除浏览器缓存。

  2. 在创建通信UI中,单击​信件审阅​并指定审阅人的电子邮件ID。

  3. 单击​提交

sendreview

审阅者从系统收到一封电子邮件,信件作为PDF附件。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now