Add custom action to the Asset Listing view

Go to https://'[server]:[port]'/[ContextPath]/crx/de and login as Administrator.

In the apps folder, create a folder named items with path/structure similar to the items folder in selection folder using the following steps:

1. Right-click the items folder at the following path and select Overlay Node:

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

   NOTE

   This path is specific to creating an action that works with selection of one of more assets/letters. If you want to create an action that works without selection, create an overlay node for the following path instead and complete the remaining steps accordingly:

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

   

2. Ensure that the Overlay Node dialog has the following values:

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

   Location: /apps/

   Match Node Types: Selected

   

3. Click OK. The folder structure is created in the apps folder.

   Click Save All.

Under the newly created items folder, add a node for the custom button/action in a particular asset (Example: downloadFlatPDF) using the following steps:

1. Right-click the items folder and select Create > Create Node.

2. Ensure that the Create Node dialog has the following values and click OK:

   Name: downloadFlatPDF (or the name you want to give to this property)

   Type: nt:unstructured

3. Click the new node that you have created (here downloadFlatPDF). CRX displays the node’s properties.

4. Add the following properties to the node (here downloadFlatPDF) and click Save All:

   Name	Type	Value and Description
   class	String	foundation-collection-action
   foundation-collection-action	String	{"target": ".cq-manageasset-admin-childpages", "activeSelectionCount": "single","type": "LETTER"} activeSelectionCount can be single or multiple to allow selections of single or multiple assets on which the custom action is performed. type can be one or more (comma separate multiple entries) of the following: LETTER,TEXT,LIST,CONDITION,DATADICTIONARY
   icon	String	icon-download The icon that Correspondence Management displays to the left side of your command/menu. For different icons and settings available, see CoralUI Icons documentation.
   jcr:primaryType	Name	nt:unstructured
   rel	String	download-flat-pdf-button
   sling:resourceType	String	granite/ui/components/endor/actionbar/button
   text	String	Download Flat PDF (Or any other label) The command that appears in the Asset Listing interface
   title	String	Download a flat PDF of the selected letter (Or any other label/Alt text) The title is the alt text that Correspondence Management displays when the user hovers over the custom command.

In the apps folder, create a folder named js with path/structure similar to the items folder in admin folder using the following steps:

1. Right-click the js folder at the following path and select Overlay Node:

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

2. Ensure that the Overlay Node dialog has the following values:

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

   Location: /apps/

   Match Node Types: Selected

3. Click OK. The folder structure is created in the apps folder. Click Save All.

In the js folder, create a file named formaction.js with the code for action handling of the button using the following steps:

1. Right-click the js folder at the following path and select Create > Create File:

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

   Name the file as formaction.js.

2. Double-click the file to open it in CRX.

3. In the formaction.js file (under the /apps branch), copy the code from the formaction.js file at the following location:

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

   Then append the following code at the end in the formaction.js file (under the /apps branch) and click Save All:

   /* 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>';
   

   The code you add in this step overrides the code under the libs folder, so copy the previous code to formaction.js file in the /apps branch. Copying the code from the /libs branch to the /apps branch ensures that the previous functionality also works.

   The above code is for letters-specific action handling of the command created in this procedure. For action handling of other assets, modify the JavaScript code.

In the apps folder, create a folder named items with path/structure similar to the items folder in actionhandlers folder using the following steps:

1. Right-click the items folder at the following path and select Overlay Node:

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

2. Ensure that the Overlay Node dialog has the following values:

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

   Location: /apps/

   Match Node Types: Selected

3. Click OK. The folder structure is created in the apps folder.

4. Click Save All.

Under the newly created items node, add a node for the custom button/action in a particular asset (Example: letterpdfdownloader) using the following steps:

1. Right-click the items folder and select Create > Create Node.

2. Ensure that the Create Node dialog has the following values and click OK:

   Name: letterpdfdownloader (Or the name you want to give to this property - must be unique. If you use a different name here, also specify the same in the formaction.js file’s ACTION_URL variable.)

   Type: nt:unstructured

3. Click the new node you have created (here downloadFlatPDF). CRX displays the node’s properties.

4. Add the following property to the node (here letterpdfdownloader) and click Save All:

   Name	Type	Value
   sling:resourceType	String	fd/cm/ma/gui/components/admin/clientlibs/admin

Create a file named POST.jsp with the code for action handling of the command at the following location:

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

1. Right-click the admin folder at the following path and select Create > Create File:

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

   Name the file as POST.jsp. (The filename needs to be POST.jsp only.)

2. Double-click the POST.jsp file to open it in CRX.

3. Add the following code to POST.jsp file and click Save All:

   This code is specific to the letter render service. For any other asset, add that asset’s Java™ libraries to this code. For more information on AEM Forms APIs, see AEM Forms API.

   For more information on AEM libraries, see AEM Components.

   /*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"%>
   <!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.");
       }
   %>