Hinzufügen benutzerdefinierter Aktionen zur Ansicht „Asset-Auflistung“ add-custom-action-to-the-asset-listing-view

CAUTION
AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

Übersicht overview

Mit der Correspondence Management-Lösung können Sie benutzerdefinierte Aktionen zur Benutzeroberfläche "Assets verwalten"hinzufügen.

Sie können der Ansicht "Asset-Auflistung"eine benutzerdefinierte Aktion hinzufügen für:

  • Ein oder mehrere Asset-Typen oder Briefe
  • Ausführung (Aktion/Befehl wird aktiv) bei Auswahl einzelner, mehrerer Assets/Briefe oder ohne Auswahl

Diese Anpassung wird mit dem Szenario veranschaulicht, das der Ansicht "Asset-Auflistung"für Briefe den Befehl "Einfache PDF herunterladen"hinzufügt. Mit diesem Anpassungsszenario können Ihre Benutzer eine einfache PDF eines einzelnen ausgewählten Briefs herunterladen.

Voraussetzungen prerequisites

Um das folgende Szenario oder ein ähnliches Szenario abzuschließen, benötigen Sie Kenntnisse über:

  • CRX
  • JavaScript
  • Java

Szenario: Fügen Sie der Benutzeroberfläche der Liste "Briefe"einen Befehl hinzu, um eine einfache PDF-Version eines Briefs herunterzuladen. addcommandtoletters

Im Folgenden wird der Befehl "Einfache PDF herunterladen"zur Ansicht "Asset-Auflistung für Briefe"hinzugefügt, mit dem Ihre Benutzer einfache PDF des ausgewählten Briefs herunterladen können. Mithilfe dieser Schritte mit dem entsprechenden Code und den entsprechenden Parametern können Sie weitere Funktionen für ein anderes Asset hinzufügen, z. B. Datenwörterbücher oder Texte.

Führen Sie die folgenden Schritte aus, um Correspondence Management so anzupassen, dass Ihre Benutzer eine einfache PDF mit Briefen herunterladen können:

  1. Wechseln Sie zu https://[server]:[port]/[ContextPath]/crx/de und melden Sie sich als Administrator an.

  2. Erstellen Sie im Programmordner einen Ordner mit dem Namen „items“ mit einem ähnlichen Pfad/einer ähnlichen Struktur wie der Ordner „items“, der sich im Auswahlordner befindet, indem Sie folgende Schritte durchführen:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner items unter dem folgenden Pfad und wählen Sie Überlagerungsknoten:

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

      note note
      NOTE
      Dieser Pfad ist spezifisch für das Erstellen einer Aktion, die mit der Auswahl eines oder mehrerer Assets/Briefe funktioniert. Wenn Sie eine Aktion erstellen möchten, die ohne Auswahl funktioniert, müssen Sie stattdessen einen Überlagerungsknoten für den folgenden Pfad erstellen und die verbleibenden Schritte entsprechend ausführen:
      /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/default/items

      Knoten erstellen

    2. Stellen Sie sicher, dass das Dialogfeld „Überlagerungsknoten“ die folgenden Werte enthält:

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

      Speicherort: /apps/

      Knotentypen abgleichen: Ausgewählt

      Überlagerungsknoten

    3. Klicken Sie auf OK. Die Ordnerstruktur wird im Apps-Ordner erstellt.

      Klicken Sie auf Alle speichern.

  3. Fügen Sie unter dem neu erstellten Ordner „items“ einen Knoten für die benutzerdefinierte Schaltfläche/Aktion in einem bestimmten Asset hinzu (Beispiel: downloadFlatPDF), indem Sie folgende Schritte durchführen:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner items und wählen Sie Erstellen > Knoten erstellen.

    2. Stellen Sie sicher, dass das Dialogfeld „Knoten erstellen“ folgende Werte aufweist und klicken Sie auf OK:

      Name: downloadFlatPDF (oder der Name, den Sie dieser Eigenschaft geben möchten)

      Typ: nt:unstructured

    3. Klicken Sie auf den von Ihnen erstellten Knoten (hier: downloadFlatPDF). CRX zeigt die Eigenschaften des Knotens an.

    4. Fügen Sie dem Knoten (hier: downloadFlatPDF) die folgenden Eigenschaften hinzu und klicken Sie auf Alle speichern:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 html-authored no-header
    Name Typ Wert und Beschreibung
    Klasse Zeichenfolge foundation-collection-action
    foundation-collection-action Zeichenfolge

    {"target": ".cq-manageasset-admin-childpages", "activeSelectionCount": "single","type": "LETTER"}


    activeSelectionCount kann sich auf einzelne oder mehrere Assets beziehen, und es können ein einzelnes oder mehrere Assets für die Durchführung von benutzerdefinierten Aktionen ausgewählt werden.

    type  kann einen oder mehrere der folgenden Typen enthalten (mehrere Einträge werden durch Komma getrennt): LETTER,TEXT,LIST,CONDITION,DATADICTIONARY

    Symbol Zeichenfolge icon-download

    Das Symbol, das Correspondence Management auf der linken Seite Ihres Befehls/Menüs anzeigt. Informationen zu den verfügbaren Symbolen und Einstellungen finden Sie in der CoralUI Icons-Dokumentation.
    jcr:primaryType Name nt:unstructured
    rel Zeichenfolge download-flach-pdf-button
    sling:resourceType Zeichenfolge granite/ui/components/endor/actionbar/button
    text Zeichenfolge Einfache PDF herunterladen (oder eine andere Bezeichnung)

    Der Befehl, der in der Benutzeroberfläche "Asset-Auflistung"angezeigt wird
    title Zeichenfolge Herunterladen einer flachen PDF des ausgewählten Briefs (oder einer anderen Beschriftung/Alternativtext)

    Der Titel ist der Alternativtext, den Correspondence Management anzeigt, wenn der Benutzer den Mauszeiger über den benutzerdefinierten Befehl bewegt.
  4. Erstellen Sie im Programmordner einen Ordner mit dem Namen „js“ mit einem ähnlichen Pfad/einer ähnlichen Struktur zum Ordner „items“, der sich im Administratorordner befindet, indem Sie folgende Schritte durchführen:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner js unter dem folgenden Pfad und wählen Sie Überlagerungsknoten: "

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

    2. Stellen Sie sicher, dass das Dialogfeld „Überlagerungsknoten“ die folgenden Werte enthält:

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

      Speicherort: /apps/

      Übereinstimmende Knotentypen: Ausgewählt

    3. Klicken Sie auf OK. Die Ordnerstruktur wird im Apps-Ordner erstellt. Klicken Sie auf Alle speichern.

  5. Erstellen Sie im Ordner „js“ eine Datei mit dem Namen „formaction.js“ mit dem Code für Aktionsbearbeitung der Schaltfläche, indem Sie folgende Schritte durchführen:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner js mit dem folgenden Pfad und wählen Sie Erstellen > Datei erstellen:

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

      Benennen Sie die Datei als „formaction.js“.

    2. Doppelklicken Sie auf die Datei, um sie in CRX zu öffnen.

    3. Kopieren Sie in der Datei „formaction.js“ (unter der /apps-Verzweigung), den Code aus der Datei „formaction.js“ am folgenden Speicherort:

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

      Hängen Sie dann den folgenden Code an das Ende der Datei „formaction.js“ (unter der /apps-Verzweigung) an und klicken Sie auf Alle speichern:

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

      Der Code, den Sie in diesem Schritt hinzufügen, überschreibt den Code im Ordner "libs". Kopieren Sie daher den vorherigen Code in die Datei "formaction.js"in der Verzweigung /apps . Durch das Kopieren des Codes aus der /libs-Verzweigung in die /apps-Verzweigung wird sichergestellt, dass auch die vorherigen Funktionen funktionieren.

      Der obige Code dient der briefspezifischen Aktionsbearbeitung des in diesem Verfahren erstellten Befehls. Für die Aktionsbearbeitung anderer Assets ändern Sie den JavaScript-Code.

  6. Erstellen Sie im Programmordner einen Ordner mit dem Namen „items“ mit einem ähnlichen Pfad/einer ähnlichen Struktur wie der Ordner „items“, der sich im Ordner „actionhandlers“ befindet, indem Sie folgende Schritte durchführen:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner items unter dem folgenden Pfad und wählen Sie Überlagerungsknoten:

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

    2. Stellen Sie sicher, dass das Dialogfeld „Überlagerungsknoten“ die folgenden Werte enthält:

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

      Speicherort: /apps/

      Übereinstimmende Knotentypen: Ausgewählt

    3. Klicken Sie auf OK. Die Ordnerstruktur wird im Apps-Ordner erstellt.

    4. Klicken Sie auf Alle speichern.

  7. Fügen Sie unter dem neu erstellten Ordner „items“ einen Knoten für die benutzerdefinierte Schaltfläche/Aktion in einem bestimmten Asset hinzu (Beispiel: letterpdfdownloader), indem Sie folgende Schritte durchführen:

    1. Klicken Sie mit der rechten Maustaste auf den Ordner „items“ und wählen Sie Erstellen > Knoten erstellen.

    2. Stellen Sie sicher, dass das Dialogfeld „Knoten erstellen“ folgende Werte aufweist und klicken Sie auf OK:

      Name: letterpdfdownloader (oder der Name, den Sie dieser Eigenschaft geben möchten – muss eindeutig sein. Wenn Sie hier einen anderen Namen verwenden, geben Sie denselben Namen auch in der Variablen ACTION_URL der Datei „formaction.js“ an.)

      Typ: nt:unstructured

    3. Klicken Sie auf den von Ihnen erstellten Knoten (hier: downloadFlatPDF). CRX zeigt die Eigenschaften des Knotens an.

    4. Fügen Sie dem Knoten (hier: letterpdfdownloader) die folgenden Eigenschaften hinzu und klicken Sie auf Alle speichern:

      table 0-row-3 1-row-3
      Name Typ Wert
      sling:resourceType Zeichenfolge fd/cm/ma/gui/components/admin/clientlibs/admin
  8. Erstellen Sie eine Datei mit dem Namen „POST.jsp“ mit dem Code für die Aktionsbearbeitung des Befehls im folgenden Speicherort:

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

    1. Klicken Sie mit der rechten Maustaste auf den Ordner admin unter dem folgenden Pfad und wählen Sie Erstellen > Datei erstellen:

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

      Benennen Sie die Datei als „POST.jsp“. (Der Dateiname darf nur „POST.jsp“ lauten.)

    2. Doppelklicken Sie auf die Datei POST.jsp, um sie in CRX zu öffnen.

    3. Fügen Sie der Datei „POST.jsp“ folgenden Code hinzu und klicken Sie auf Alle speichern:

      Dieser Code ist spezifisch für den Brief-Renderdienst. Fügen Sie diesem Code für jedes andere Asset die Java-Bibliotheken dieses Assets hinzu. Weitere Informationen zu AEM Forms-APIs finden Sie unter AEM Forms-API.

      Weitere Informationen zu AEM-Bibliotheken finden Sie unter den AEM-Komponenten.

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

Herunterladen einer einfachen PDF eines Briefs mithilfe von benutzerdefinierten Funktionen download-flat-pdf-of-a-letter-using-the-custom-functionality

Nachdem Sie eine benutzerdefinierte Funktion zum Herunterladen einer einfachen PDF Ihrer Briefe hinzugefügt haben, können Sie eine einfache PDF-Version des von Ihnen ausgewählten Briefs herunterladen, indem Sie folgende Schritte durchführen:

  1. Wechseln Sie zu https://[server]:[port]/[ContextPath]/projects.html und melden Sie sich an.

  2. Wählen Sie Formulare > Briefe. Correspondence Management listet die im System verfügbaren Briefe auf.

  3. Klicken Sie auf Auswählen und dann auf einen Brief, um diesen auszuwählen.

  4. Wählen Sie Mehr > <Einfache PDF herunterladen> (die anhand der Informationen in diesem Artikel erstellte benutzerdefinierte Funktion). Das Dialogfeld „Brief als PDF herunterladen“ wird angezeigt.

    Der Name des Menüelements, die Funktionalität und der Alternativtext entsprechen der Anpassung, die im Szenario: Hinzufügen eines Befehls zur Benutzeroberfläche der Liste „Briefe“, um eine einfache PDF-Version eines Briefs herunterzuladen erstellt wurde.

    Benutzerdefinierte Funktion: Einfache PDF herunterladen

  5. Wählen Sie im Dialogfeld „Brief als PDF herunterladen“ die entsprechende XML-Datei aus, anhand derer die Daten in der PDF ausgefüllt werden sollen.

    note note
    NOTE
    Vor dem Herunterladen des Briefs als einfache PDF können Sie mithilfe der Option Bericht erstellen die XML-Datei mit den Daten für den Brief erstellen.

    Brief als PDF herunterladen

    Der Brief wird als einfache PDF auf Ihren Computer heruntergeladen.

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da