将自定义操作添加到资产列表视图

概述

Correspondence Management解决方案允许您向“管理资产”用户界面添加自定义操作。

您可以为以下项向资产列表视图添加自定义操作:

  • 一个或多个资源类型或字母
  • 在选择单个、多个资源/字母时或不进行选择时执行(动作/命令变为活动状态)

通过向字母的资产列表视图添加“下载平面PDF”命令的方案演示了此自定义。 此自定义方案允许用户下载单个选定字母的平面PDF。

前提条件

要完成以下或类似方案,您需要了解:

  • CRX
  • JavaScript
  • Java

方案:向字母列表用户界面添加命令以下载字母的平面PDF版本

以下步骤将“下载简单PDF”命令添加到字母的资产列表视图,并允许用户下载所选字母的简单PDF。 通过使用这些步骤和相应的代码和参数,您可以为其他资产添加一些其他功能,如数据字典或文本。

要自定义Correspondence Management以允许用户下载简单的PDF字母,请完成以下步骤:

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

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

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

      /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/selection/items

      注意

      此路径专门用于创建与选择多个资源/字母之一配合的操作。 如果要创建不进行选择的操作,您需要为以下路径创建一个叠加节点,然后相应地完成其余步骤:

      /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/default/items

      创建节点

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

      路径 :/libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/selection/items

      位置: /apps/

      匹配节点类型:已选

      叠加节点

    3. 单击​确定。文件夹结构将在apps文件夹中创建。

      单击​保存全部

  3. 在新创建的项目文件夹下,为特定资产中的自定义按钮/操作添加一个节点(示例:下载FlatPDF),步骤如下:

    1. 右键单击​items​文件夹,然后选择​创建 > 创建节点

    2. 确保“创建节点”对话框具有以下值,然后单击​确定:

      名称: downloadFlatPDF(或要给此属性的名称)

      类型: nt:unstructured

    3. 单击您创建的新节点(此处为downloadFlatPDF)。 CRX显示节点的属性。

    4. 将以下属性添加到节点(此处为downloadFlatPDF),然后单击​保存全部:

      名称 类型 值和说明
      class 字符串 foundation-collection-action
      foundation-collection-action 字符串

      {"目标":"。cq-manageasset-admin-childpages"、"activeSelectionCount":"single","type":"LETTER"}


      activeSelectionCount可以是单个或多个,以允许选择执行自定义操作的一个或多个资产。

      Typecan 为以下项中的一个或多个(逗号分隔多个条目):字母、文本、列表、条件、自动词

      图标 字符串 icon-download

      Correndence Management在命令/菜单左侧显示的图标。 有关可用的不同图标和设置,请参阅CoralUI图标文档
      jcr:primaryType 名称 nt:unstructured
      rel 字符串 下载 — flat-pdf-button
      sling:resourceType 字符串 granite/ui/components/endor/actionbar/button
      文本 字符串 下载平面PDF(或任何其他标签)

      资产列表界面中显示的命令
      页面 字符串 下载所选字母的平面PDF(或任何其他标签/Alt文本)

      标题是当用户悬停在自定义命令上方时Corresponce Management显示的替代文本。
  4. 在apps文件夹中,使用以下步骤创建一个名为js的文件夹,其路径/结构与管理文件夹中的items文件夹类似:

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

      /libs/fd/cm/ma/gui/components/admin/clientlibs/admin/js

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

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

      位置: /apps/

      匹配节点类型:已选

    3. 单击​确定。文件夹结构将在apps文件夹中创建。 单击​保存全部

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

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

      /apps/fd/cm/ma/gui/components/admin/clientlibs/admin/js

      将文件命名为formaction.js。

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

    3. 在formaction.js文件(/apps分支下)中,从位于以下位置的formaction.js文件复制代码:

      /libs/fd/cm/ma/gui/components/admin/clientlibs/admin/js/formaction.js

      然后,在formaction.js文件(/apps分支下)的末尾附加以下代码,并单击​保存全部:

      /* Action url for xml file to be added.*/
      var ACTION_URL = "/apps/fd/cm/ma/gui/content/commons/actionhandlers/items/letterpdfdownloader.html";
      
      /* File upload handling*/
      var fileSelectedHandler = function(e){
          if(e && e.target && e.target.value)
              $(".downloadLetterPDFBtn").removeAttr('disabled');
          else
              $(".downloadLetterPDFBtn").attr('disabled','disabled');
      }
      
      /*Handing of Download button in pop up.*/
      var downloadClickHandler = function(){
          $('#downloadLetterPDFDilaog').modal("hide");
          var element = $('.foundation-selections-item');
          var path = $(element).data("path");
          $("#fileUploadForm").attr('action', ACTION_URL + "?letterId="+path).submit();
      }
      
      /*Click handling on action button.*/
      $(document).on("click",'.download-flat-pdf-button',function(e){
          $("#uploadSamepledata").val("");
           if($('#downloadLetterPDFDilaog').length == 0){
              $(document).on("click",".downloadLetterPDFBtn",downloadClickHandler);
              $(document).on("change","#uploadSamepledata",fileSelectedHandler);
              $("body").append(downloadLetterPDFDilaog);
          }
            $('#downloadLetterPDFDilaog').modal("show");
      });
      
      /*Download popup.*/
      var downloadLetterPDFDilaog = '<div id="downloadLetterPDFDilaog" class="coral-Modal notice " role="dialog"  aria-hidden="true">'+
          '<form id="fileUploadForm" method="POST" enctype="multipart/form-data">'+
              '<div class="coral-Modal-header">'+
                  '<h2 class="coral-Modal-title coral-Heading coral-Heading--2" id="modal-header1443020790107-label" tabindex="0">Download Letter as PDF.</h2>'+
                  '<button type="button" class="coral-MinimalButton coral-Modal-closeButton" data-dismiss="modal">×</button>'+
              '</div>'+
              '<div class="coral-Modal-body" id="modal-header1443020790107-message" role="document" tabindex="0">'+
                  '<div class="coral-Modal-message">'+
                      '<p></p>'+
                  '</div>'+
                  '<div class="coral-Modal-uploader">'+
                      '<p>Select sample data for letter.</p>'+
                      '<input type="file" id="uploadSamepledata" name="file" accept=".xml" size="70px">'+
                  '</div>'+
              '</div>'+
           '</form>'+
              '<div class="coral-Modal-footer">'+
                  '<button type="button" class="coral-Button" data-dismiss="modal">Cancel</button>'+
                  '<button type="button" class="coral-Button coral-Button--primary downloadLetterPDFBtn" disabled="disabled">Download</button>'+
              '</div>'+
      '</div>';
      

      在此步骤中添加的代码将覆盖libs文件夹下的代码,因此将上一个代码复制到/apps分支中的formaction.js文件。 将代码从/libs分支复制到/apps分支可确保以前的功能也能正常工作。

      上述代码用于对在此过程中创建的命令执行字母特定的操作处理。 要对其他资源执行操作处理,请修改JavaScript代码。

  6. 在apps文件夹中,使用以下步骤创建一个名为items的文件夹,其路径/结构与actionhandlers文件夹中的items文件夹类似:

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

      /libs/fd/cm/ma/gui/content/commons/actionhandlers/items/

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

      路径 :/libs/fd/cm/ma/gui/content/commons/actionhandlers/items/

      位置: /apps/

      匹配节点类型:已选

    3. 单击​确定。文件夹结构将在apps文件夹中创建。

    4. 单击​保存全部

  7. 在新创建的项目节点下,为特定资产中的自定义按钮/操作添加一个节点(示例:letterpdfdownloader)。

    1. 右键单击项目文件夹,然后选择​创建>创建节点

    2. 确保“创建节点”对话框具有以下值,然后单击​确定:

      名称: letterpdfdownloader(或要为此属性指定的名称 — 必须唯一。如果在此处使用其他名称,请在formaction.js文件的ACTION_URL变量中指定相同的名称。)

      类型: nt:unstructured

    3. 单击您创建的新节点(此处为downloadFlatPDF)。 CRX显示节点的属性。

    4. 将以下属性添加到节点(此处为letterpdfdownloader),然后单击​保存全部:

      名称 类型
      sling:resourceType 字符串 fd/cm/ma/gui/components/admin/clientlibs/admin
  8. 使用以下位置创建一个名为POST.jsp的文件,其中包含用于命令操作处理的代码:

    /apps/fd/cm/ma/gui/components/admin/clientlibs/admin

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

      /apps/fd/cm/ma/gui/components/admin/clientlibs/admin

      将文件命名为POST.jsp。 (文件名只需为POST.jsp。)

    2. 多次 — 单击​POST.jsp​文件以在CRX中打开它。

    3. 将以下代码添加到POST.jsp文件,然后单击​保存全部:

      此代码特定于字母渲染服务。 对于任何其他资源,将该资源的Java库添加到此代码。 有关AEM Forms API的详细信息,请参阅AEM Forms API

      有关AEM库的详细信息,请参阅AEM 组件

      /*Import libraries. Here we are downloading letter flat pdf with input xml data so we require letterRender Api. For any other Module functionality we need to first import that library. */
      <%@include file="/libs/foundation/global.jsp?lang=zh-Hans"%>
      <!DOCTYPE html lang="en" PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      <%@page import="com.adobe.icc.ddg.api.*"%>
      <%@page import="com.adobe.icc.dbforms.obj.*"%>
      <%@page import="com.adobe.icc.render.obj.*" %>
      <%@page import="com.adobe.icc.services.api.*" %>
      <%@page import="org.apache.sling.api.resource.*" %>
      <%@page import="java.io.File" %>
      <%@page import="java.util.*" %>
      <%@page import="com.adobe.livecycle.content.appcontext.AppContextManager"%>
      <%@page import=" com.adobe.icc.dbforms.exceptions.ICCException"%>
      <%@page import="java.io.InputStream" %>
      <%@page import="java.io.FileInputStream" %>
      <%@page import="org.apache.commons.io.IOUtils" %>
      <%@page session="false" contentType="text/html; charset=utf-8"%>
      <%@taglib prefix="sling" uri="https://sling.apache.org/taglibs/sling/1.0"%>
      <%@taglib prefix="cq" uri="https://www.day.com/taglibs/cq/1.0" %>
       <%@page session="false" contentType="text/html; charset=utf-8"%>
      <%
         AppContextManager.setCurrentAppContext("/content/apps/cm");
         /*Get letter id sent in js file.*/
          String letterId = request.getParameter("letterId");
          if(letterId.lastIndexOf("?") != -1)
              letterId = letterId.substring(0, letterId.indexOf("?"));
          String fileName = null;
          String letterName = null;
          InputStream inputStream = null;
          /*Get xml file data*/
          if (slingRequest.getRequestParameter("file") != null)
              inputStream = slingRequest.getRequestParameter("file").getInputStream();
          if(letterId != null){
              String xmlData = null;
              try{
                  xmlData = IOUtils.toString(inputStream, "UTF-8");
              }
              catch (Exception e) {
                  log.error("Xml data does not exists.");
              }
              /*letter Name from letter letter id.*/
              letterName = letterId.substring(letterId.lastIndexOf("/")+1);
              /*Invoking letter render services API.*/
              LetterRenderService letterRenderService = sling.getService(LetterRenderService.class);
              /*using CM renderLetter api to get pdfbytes.*/
              PDFResponseType  pdfResponseType= letterRenderService.renderLetter(letterId,xmlData,true,false,false,false);
              byte[] bytes = null;
              /*Downloading pdf bytes as pdf.*/
              if(pdfResponseType != null && pdfResponseType.getFile() != null){
                  bytes = pdfResponseType.getFile().getDocument();
                  /*set the response header to enable download*/
                  response.setContentType("application/OCTET-STREAM");
                  response.setHeader("Content-Disposition", "attachment;filename=\"" + letterName + ".pdf\"");
                  response.setHeader("Pragma", "cache");
                  response.setHeader("Cache-Control", "private");
                  out.clear();
                  response.getOutputStream().write(bytes);
              }
          }
          else{
              log.error("Letter id does not exists.");
          }
      %>
      

使用自定义功能下载字母的平面PDF

在添加自定义功能以下载您的字母的平面PDF后,您可以使用以下步骤下载您选择的字母的平面PDF版本:

  1. 转到https://'[server]:[port]'/[ContextPath]/projects.html并登录。

  2. 选择​Forms >字母。 Corresponence Management会列表系统中可用的信函。

  3. 单击​选择,然后单击字母将其选中。

  4. 选择​更多 > <下载平面PDF>(使用本文说明创建的自定义功能)。 将显示“PDF格式下载信函”对话框。

    菜单项名称、功能和Alt-text是根据在Scenario:向字母列表用户界面添加命令以下载字母的平面PDF版本。

    自定义功能:下载简单PDF

  5. 在“将信函下载为PDF”对话框中,选择要从中填充PDF中数据的相关XML。

    注意

    在将字母下载为平面PDF之前,可以使用​创建报告​选项创建包含字母中数据的XML文件。

    以PDF格式下载书信

    这封信将作为平面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