Aangepaste actie toevoegen aan de weergave Lijst met activa add-custom-action-to-the-asset-listing-view

Ga naar https://[server]:[port]/[ContextPath]/crx/de en aanmelden als beheerder.

Maak in de map apps een map met de naam items met een pad/structuur die lijkt op de map met items in de selectiemap en voer daarbij de volgende stappen uit:

1. Klik met de rechtermuisknop op de knop items map op het volgende pad en selecteer Overlay Node:

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

   note note
   NOTE
   Dit pad is specifiek voor het maken van een handeling die werkt met de selectie van een of meer elementen/letters. Als u een handeling wilt maken die zonder selectie werkt, moet u een overlayknooppunt maken voor het volgende pad en de overige stappen dienovereenkomstig uitvoeren:
   /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/default/items

   

2. Zorg ervoor dat het dialoogvenster Overlay-knooppunt de volgende waarden heeft:

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

   Location: /apps/

   Match Node Types: Geselecteerd

   

3. Klik op OK. De mapstructuur wordt gemaakt in de map apps.

   Klik op Save All.

Voeg onder de map met nieuw gemaakte items een knooppunt toe voor de aangepaste knop/handeling in een bepaald element (bijvoorbeeld: downloadFlatPDF) gebruikend de volgende stappen:

1. Klik met de rechtermuisknop op de knop items map en selecteer Create > Create Node.

2. Zorg ervoor dat het dialoogvenster Knooppunt maken de volgende waarden heeft en klik op OK:

   Name: downloadFlatPDF (of de naam die u aan deze eigenschap wilt geven)

   Type: nt:ongestructureerd

3. Klik op het nieuwe knooppunt dat u hebt gemaakt (hier downloadFlatPDF). CRX geeft de eigenschappen van het knooppunt weer.

4. Voeg de volgende eigenschappen toe aan het knooppunt (hier downloadFlatPDF) en klik Save All:

Maak in de map apps een map met de naam js met een pad/structuur die lijkt op de map met items in de map admin met de volgende stappen:

1. Klik met de rechtermuisknop op de knop js map op het volgende pad en selecteer Overlay Node: "

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

2. Zorg ervoor dat het dialoogvenster Overlay-knooppunt de volgende waarden heeft:

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

   Location: /apps/

   Match Node Types: Geselecteerd

3. Klik op OK. De mapstructuur wordt gemaakt in de map apps. Klik op Save All.

Maak in de map js een bestand met de naam formaction.js met de code voor de afhandeling van handelingen van de knop door de volgende stappen uit te voeren:

1. Klik met de rechtermuisknop op de knop js map op het volgende pad en selecteer Create > Create File:

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

   Geef het bestand een naam als formaction.js.

2. Dubbelklik op het bestand om het te openen in CRX.

3. Kopieer in het bestand formaction.js (onder de tak /apps) de code uit het bestand formaction.js op de volgende locatie:

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

   Voeg vervolgens de volgende code aan het einde toe in het bestand formaction.js (onder de tak /apps) en klik op Save All:

   code language-none

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

   De code die u in deze stap toevoegt, overschrijft de code onder de map libs. Kopieer daarom de vorige code naar het bestand formaction.js in de vertakking /apps. Het kopiëren van de code van de /libs tak aan de /apps tak zorgt ervoor dat de vorige functionaliteit ook werkt.

   De bovenstaande code is bedoeld voor handelingen met letters van de opdracht die in deze procedure wordt gemaakt. Wijzig de JavaScript-code voor de afhandeling van handelingen met andere elementen.

Maak in de map apps een map met de naam items met een pad/structuur die lijkt op de map met items in de map met actionhandlers. Ga hierbij als volgt te werk:

1. Klik met de rechtermuisknop op de knop items map op het volgende pad en selecteer Overlay Node:

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

2. Zorg ervoor dat het dialoogvenster Overlay-knooppunt de volgende waarden heeft:

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

   Location: /apps/

   Match Node Types: Geselecteerd

3. Klik op OK. De mapstructuur wordt gemaakt in de map apps.

4. Klik op Save All.

Voeg onder het nieuwe knooppunt Items een knooppunt toe voor de aangepaste knop/handeling in een bepaald element (bijvoorbeeld: letterpdfdownloader) met behulp van de volgende stappen:

1. Klik met de rechtermuisknop op de map met items en selecteer Create > Create Node.

2. Zorg ervoor dat het dialoogvenster Knooppunt maken de volgende waarden heeft en klik op OK:

   Name: letterpdfdownloader (Of de naam die u aan deze eigenschap wilt geven) moet uniek zijn. Als u hier een andere naam gebruikt, geeft u hetzelfde op in de variabele ACTION_URL van het bestand formaction.js.)

   Type: nt:ongestructureerd

3. Klik op het nieuwe knooppunt dat u hebt gemaakt (hier downloadFlatPDF). CRX geeft de eigenschappen van het knooppunt weer.

4. Voeg de volgende eigenschap toe aan het knooppunt (hier letterpdfdownloader) en klik op Save All:

   table 0-row-3 1-row-3
   Naam	Type	Waarde
   sling:resourceType	String	fd/cm/ma/gui/components/admin/clientlibs/admin

Maak een bestand met de naam POST.jsp met de code voor de afhandeling van handelingen van de opdracht op de volgende locatie:

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

1. Klik met de rechtermuisknop op de knop admin map op het volgende pad en selecteer Create > Create File:

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

   Geef het bestand een naam als POST.jsp. (De bestandsnaam moet alleen POST.jsp zijn.)

2. Dubbelklik op de knop POST.jsp bestand openen in CRX.

3. Voeg de volgende code aan POST.jsp- dossier toe en klik Save All:

   Deze code is specifiek voor de brief teruggeeft dienst. Voeg voor andere elementen de Java-bibliotheken van dat element aan deze code toe. Zie voor meer informatie over AEM Forms API's AEM Forms API.

   Zie AEM voor meer informatie over AEM bibliotheken Componenten.

   code language-xml

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

Ga naar https://[server]:[port]/[ContextPath]/projects.html en aanmelden.

Selecteer Forms > Letters. Correspondentiebeheer geeft een overzicht van de beschikbare letters in het systeem.

Klikken Select en klik vervolgens op een letter om deze te selecteren.

Selecteren More > <download flat="" pdf=""> (De aangepaste functionaliteit die is gemaakt met behulp van de instructies in dit artikel.) Het dialoogvenster Letter downloaden als PDF wordt weergegeven.

De naam, functionaliteit en alt-text van het menu-item zijn gebaseerd op de aanpassing die is gemaakt in Scenario: Voeg een opdracht toe aan de gebruikersinterface van de lijst Letters om de platte versie van een PDF van een letter te downloaden.

Selecteer in het dialoogvenster Letter downloaden als PDF de XML waaruit u de gegevens in de PDF wilt vullen.

De brief wordt gedownload aan uw computer als vlakke PDF.