Show Menu
SUJETS×

Ajout d’une action personnalisée à la vue Liste des ressources

Présentation

La solution Correspondence Management vous permet d’ajouter des actions personnalisées à l’interface utilisateur de gestion des actifs.
Vous pouvez ajouter une action personnalisée à la vue Liste des ressources pour :
  • Un ou plusieurs types de ressources ou de lettres
  • Exécution (l’action/la commande devient active) dans la sélection des ressources/des lettres simples et multiples ou en l’absence de sélection
Cette personnalisation est illustrée par un scénario qui ajoute une commande « Télécharger un PDF aplati » dans la vue Liste des ressources de lettres. Ce scénario de personnalisation permet aux utilisateurs de télécharger un PDF aplati d’une seule lettre sélectionnée.

Conditions préalables

Pour suivre le scénario ci-après ou un scénario similaire, vous devez disposer des connaissances suivantes :
  • CRX
  • JavaScript
  • Java

Scénario : Ajoutez une commande à l’interface utilisateur des listes Lettres pour envoyer la version PDF aplatie d’une lettre

Les étapes ci-dessous ajoutent une commande « Télécharger un PDF aplati » à la vue Liste des ressources de lettres et permettent à vos utilisateurs de télécharger le PDF aplati de la lettre sélectionnée. Le suivi de ces étapes à l’aide du code et des paramètres appropriés permet d’ajouter une autre fonctionnalité pour une ressource différente, telle que des dictionnaires de données ou des textes.
Pour personnaliser Correspondence Management et permettre aux utilisateurs de télécharger un fichier PDF aplati ou des lettres, suivez les étapes ci-après :
  1. Go to https://'[server]:[port]'/[ContextPath]/crx/de and login as Administrator.
  2. Dans le dossier d’applications, créez un dossier nommé éléments avec un chemin/une structure similaires au dossier d’éléments situé dans le dossier de sélection, en procédant comme suit :
    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
      Ce chemin est spécifique à la création d’une action qui fonctionne avec la sélection d’une ou plusieurs ressources/lettres. Si vous souhaitez créer une action qui se déroule sans sélection, vous devez créer un nœud de recouvrement pour le chemin suivant et suivre les étapes restantes :
      /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/default/items
    2. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
      Chemin : /libs/fd/cm/ma/gui/content/massets/jcr:content/body/content/header/items/selection/items
      Emplacement : /apps/
      Faire correspondre les types de noeud : Sélectionné
    3. Cliquez sur OK . La structure du dossier est créée dans le dossier des applications.
      Cliquez sur Enregistrer tout .
  3. Dans le dossier d’éléments nouvellement créé, ajoutez un noeud pour le bouton/l’action personnalisé(e) d’une ressource particulière (exemple : downloadFlatPDF) en procédant comme suit :
    1. Right-click the items folder and select Create > Create Node .
    2. Assurez-vous que la boîte de dialogue de création du nœud possède les valeurs suivantes et cliquez sur OK  :
      Nom : downloadFlatPDF (ou le nom que vous souhaitez donner à cette propriété)
      Type : nt:unstructured
    3. Cliquez sur le nouveau nœud que vous avez créé (ici downloadFlatPDF). CRX affiche les propriétés du nœud.
    4. Ajoutez les propriétés suivantes au nœud (ici downloadFlatPDF) et cliquez sur Enregistrer tout  :
      Nom Type Valeur et description
      catégorie Chaîne foundation-collection-action
      foundation-collection-action Chaîne
      {"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 peut être un ou plusieurs (entrées multiples séparées par des virgules) des éléments suivants : LETTRE, TEXTE, LISTE, CONDITION, DATADICTIONNAIRE
      icône Chaîne icône-téléchargement Icône affichée par Correspondence Management sur le côté gauche de la commande/du menu. Pour connaître les icônes et paramètres disponibles, voir la documentation relative aux icônes CoralUI .
      jcr:primaryType Nom nt:unstructured
      rel Chaîne download-flat-pdf-button
      sling:resourceType Chaîne granite/ui/components/endor/actionbar/button
      text Chaîne Télécharger le PDF aplati (ou tout autre libellé) Commande affichée dans l’interface de liste des ressources
      titre Chaîne Téléchargez un document PDF aplati de la lettre sélectionnée (ou de tout autre libellé/texte de remplacement) Le titre correspond au texte affiché par Correspondence Management lorsque l’utilisateur passe sa souris sur la commande personnalisée.
  4. Dans le dossier d’applications, créez un dossier nommé js avec un chemin/une structure similaires au dossier d’éléments situé dans le dossier d’administration, en procédant comme suit :
    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. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
      Chemin : /libs/fd/cm/ma/gui/components/admin/clientlibs/admin/js
      Emplacement : /apps/
      Faire correspondre les types de noeud : Sélectionné
    3. Cliquez sur OK . La structure du dossier est créée dans le dossier des applications. Cliquez sur Enregistrer tout .
  5. Dans le dossier js, procédez comme suit pour créer un fichier nommé formaction.js avec le code de traitement d’action du bouton :
    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
      Nommez le fichier formaction.js.
    2. Double-cliquez sur le fichier pour l’ouvrir dans CRX.
    3. Dans le fichier formaction.js (sous la branche /apps), copiez le code à partir du fichier formaction.js à l’emplacement suivant :
      /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>';
      
      
      Le code que vous ajoutez dans cette étape remplace le code dans le dossier libs. Vous devez donc copier le code précédent vers le fichier formaction.js dans la branche /apps. La copie du code de la branche /libs vers la branche /apps garantit que la fonctionnalité précédente marche également.
      Le code ci-dessus correspond au traitement des actions spécifiques aux lettres de la commande créée dans cette procédure. Pour le traitement des actions d’autres ressources, modifiez le code javascript.
  6. Dans le dossier d’applications, créez un dossier nommé éléments avec un chemin/une structure similaires au dossier d’éléments situé dans le dossier actionhandlers. Pour ce faire, procédez comme suit :
    1. Right-click the items folder at the following path and select Overlay Node :
      /libs/fd/cm/ma/gui/content/commons/actionhandlers/items/
    2. Assurez-vous que la boîte de dialogue du nœud de recouvrement possède les valeurs suivantes :
      Chemin : /libs/fd/cm/ma/gui/content/commons/actionhandlers/items/
      Emplacement : /apps/
      Faire correspondre les types de noeud : Sélectionné
    3. Cliquez sur OK . La structure du dossier est créée dans le dossier des applications.
    4. Cliquez sur Enregistrer tout .
  7. Sous le noeud d’éléments nouvellement créé, ajoutez un noeud pour le bouton/l’action personnalisé(e) dans une ressource particulière (exemple : letterpdfdownloader) à l’aide des étapes suivantes :
    1. Cliquez avec le bouton droit sur le dossier éléments et sélectionnez Créer > Créer un nœud .
    2. Assurez-vous que la boîte de dialogue de création du nœud possède les valeurs suivantes et cliquez sur OK  :
      Nom : letterpdfdownloader (ou le nom que vous souhaitez donner à cette propriété), doit être unique. Si vous utilisez un autre nom ici, spécifiez également le même dans la variable ACTION_URL du fichier formaction.js.)
      Type : nt:unstructured
    3. Cliquez sur le nouveau nœud que vous avez créé (ici downloadFlatPDF). CRX affiche les propriétés du nœud.
    4. Ajoutez la propriété suivante au nœud (ici letterpdfdownloader) et cliquez sur Enregistrer tout  :
      Nom
      Type
      Valeur
      sling:resourceType
      Chaîne
      fd/cm/ma/gui/components/admin/clientlibs/admin
  8. Créez un fichier nommé POST.jsp avec le code de traitement d’action de la commande à l’emplacement suivant :
    /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
      Nommez le fichier POST.jsp. (Le nom du fichier doit être POST.jsp uniquement.)
    2. Double-cliquez sur le fichier POST.jsp pour l’ouvrir dans CRX.
    3. Ajoutez le code suivant au fichier POST.jsp et cliquez sur Enregistrer tout  :
      Ce code est spécifique au service de rendu de la lettre. Pour toute autre ressource, ajoutez les bibliothèques Java de la ressource à ce code. Pour plus d’informations sur les API AEM Forms, voir API AEM Forms .
      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.");
          }
      %>
      
      

Télécharger le PDF aplati à partir d’une lettre à l’aide de la fonction personnalisée

Après avoir ajouté une fonctionnalité personnalisée pour télécharger le PDF aplati de vos lettres, vous pouvez suivre les étapes suivantes pour télécharger la version PDF aplatie de la lettre que vous sélectionnez :
  1. Accédez à https://'[server]:[port]'/[ContextPath]/projects.html et connectez-vous.
  2. Sélectionnez Formulaires > Lettres . Correspondence Management répertorie les lettres disponibles dans le système.
  3. Click Select and then click a letter to select it.
  4. Select More > <Download Flat PDF> (The custom functionality created using the instructions this article). La boîte de dialogue Télécharger la lettre en tant que PDF s’affiche.
    The menu item name, functionality, and alt-text is according to the customization created in Scenario: Add a command to the Letters list user interface to download flat PDF version of a letter.
  5. Dans la boîte de dialogue Télécharger la lettre en tant que PDF, sélectionnez le code XML approprié à partir duquel vous souhaitez renseigner les données du PDF.
    Before downloading the letter as a flat PDF, you can create the XML file with the data in the letter using the Create Report option.
    La lettre est téléchargée sur votre ordinateur au format PDF aplati.