Adicionar ação personalizada à exibição de Listagem de Ativos

Visão geral

A solução Gerenciamento de correspondência permite adicionar ações personalizadas à interface do usuário Gerenciar ativos .

Você pode adicionar uma ação personalizada à exibição de Listagem de ativos para:

  • Um ou mais tipos de ativos ou letras
  • Execução (ação/comando torna-se ativo) na seleção de ativos/letras únicos ou diversos, ou sem seleção

Essa personalização é demonstrada com o cenário que adiciona um comando "Baixar PDF Simples" à exibição da Lista de Ativos para Cartas. Esse cenário de personalização permite que os usuários baixem um PDF simples de uma única carta selecionada.

Pré-requisitos

Para concluir o seguinte cenário ou semelhante, você precisa de conhecimento de:

  • CRX
  • JavaScript
  • Java

Cenário: Adicione um comando à interface do usuário da lista de letras para baixar a versão PDF simples de uma letra

As etapas abaixo adicionam um comando "Baixar PDF plano" à exibição de Lista de ativos para Cartas e permitem que os usuários baixem PDF simples da carta selecionada. Usando essas etapas com o código e os parâmetros apropriados, é possível adicionar alguma outra funcionalidade a um ativo diferente, como dicionários de dados ou textos.

Para personalizar o Gerenciamento de correspondência para permitir que os usuários baixem um PDF simples de letras, execute as seguintes etapas:

  1. Vá para https://'[server]:[port]'/[ContextPath]/crx/de e faça logon como Administrador.

  2. Na pasta apps , crie uma pasta nomeada items com caminho/estrutura semelhante à pasta items localizada na pasta de seleção usando as seguintes etapas:

    1. Clique com o botão direito do mouse na pasta items no seguinte caminho e selecione Sobrepor nó:

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

      OBSERVAÇÃO

      Esse caminho é específico para criar uma ação que funcione com a seleção de um ou mais ativos/letras. Se você quiser criar uma ação que funcione sem a seleção, será necessário criar um nó de sobreposição para o seguinte caminho e concluir as etapas restantes adequadamente:

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

      Criar nó

    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:

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

      Localização: /apps/

      Corresponder Tipos de Nó: Selecionado

      Nó de sobreposição

    3. Clique em OK. A estrutura de pastas é criada na pasta de aplicativos.

      Clique em Salvar tudo.

  3. Na pasta de itens recém-criados, adicione um nó para o botão/ação personalizada em um ativo específico (Exemplo: downloadFlatPDF) usando as seguintes etapas:

    1. Clique com o botão direito do mouse na pasta items e selecione Create > Create Node.

    2. Certifique-se de que a caixa de diálogo Criar nó tenha os seguintes valores e clique em OK:

      Nome: downloadFlatPDF (ou o nome que você deseja dar a essa propriedade)

      Tipo: nt:unstructured

    3. Clique no novo nó que você criou (aqui downloadFlatPDF). O CRX exibe as propriedades do nó.

    4. Adicione as seguintes propriedades ao nó (aqui downloadFlatPDF) e clique em Salvar tudo:

      Nome Tipo Valor e descrição
      Classe Sequência de caracteres foundation-collection-action
      foundation-collection-action Sequência de caracteres

      {"target": ".cq-manageasset-admin-children", "ativeSelectionCount": "single", "type": "LETTER"}


      ativeSelectionCount pode ser única ou múltipla para permitir seleções de um ou vários ativos em que a ação personalizada é executada.

      pode ser uma ou mais (entradas múltiplas separadas por vírgula) das seguintes opções: LETRA,TEXTO,LISTA,CONDIÇÃO,DATADICIONÁRIO

      ícone Sequência de caracteres icon-download

      O ícone que o Gerenciamento de correspondência exibe à esquerda do seu comando/menu. Para obter ícones e configurações diferentes disponíveis, consulte a documentação Ícones do CoralUI.
      jcr:primaryType Nome nt:unstructured
      rel Sequência de caracteres botão download-simples-pdf
      sling:resourceType Sequência de caracteres granite/ui/components/endor/actionbar/button
      texto Sequência de caracteres Baixar PDF simples (ou qualquer outro rótulo)

      O comando que aparece na interface de Listagem de ativos
      título Sequência de caracteres Baixar um PDF simples da carta selecionada (ou qualquer outro rótulo/texto alternativo)

      O título é o texto alternativo que o Gerenciamento de correspondência exibe quando o usuário passa o mouse sobre o comando personalizado.
  4. Na pasta apps , crie uma pasta chamada js com caminho/estrutura semelhante à pasta de itens localizada na pasta admin usando as seguintes etapas:

    1. Clique com o botão direito do mouse na pasta js no seguinte caminho e selecione Sobrepor nó:

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

    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:

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

      Localização: /apps/

      Corresponder Tipos de Nó: Selecionado

    3. Clique em OK. A estrutura de pastas é criada na pasta de aplicativos. Clique em Salvar tudo.

  5. Na pasta js , crie um arquivo chamado formaction.js com o código para a manipulação de ação do botão usando as seguintes etapas:

    1. Clique com o botão direito do mouse na pasta js no seguinte caminho e selecione Criar > Criar arquivo:

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

      Nomeie o arquivo como formaction.js.

    2. Clique duas vezes no arquivo para abri-lo no CRX.

    3. No arquivo formaction.js (na ramificação /apps), copie o código do arquivo formaction.js no seguinte local:

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

      Em seguida, anexe o seguinte código no final do arquivo formaction.js (na ramificação /apps) e clique em Salvar tudo:

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

      O código adicionado nesta etapa substitui o código na pasta libs, portanto, copie o código anterior para o arquivo formaction.js na ramificação /apps. Copiar o código da ramificação /libs para a ramificação /apps garante que a funcionalidade anterior também funcione.

      O código acima é para a ação específica de letras do comando criado neste procedimento. Para o tratamento de ações de outros ativos, modifique o código JavaScript.

  6. Na pasta apps , crie uma pasta nomeada items com caminho/estrutura semelhante à pasta items localizada na pasta actionhandlers usando as seguintes etapas:

    1. Clique com o botão direito do mouse na pasta items no seguinte caminho e selecione Sobrepor nó:

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

    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:

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

      Localização: /apps/

      Corresponder Tipos de Nó: Selecionado

    3. Clique em OK. A estrutura de pastas é criada na pasta de aplicativos.

    4. Clique em Salvar tudo.

  7. No nó itens recém-criados , adicione um nó para o botão/ação personalizado em um ativo específico (Exemplo: letterpdfdownloader) usando as seguintes etapas:

    1. Clique com o botão direito do mouse na pasta de itens e selecione Create > Create Node.

    2. Certifique-se de que a caixa de diálogo Criar nó tenha os seguintes valores e clique em OK:

      Nome: letterpdfdownloader (ou o nome que você deseja dar a essa propriedade - deve ser exclusivo. Se você usar um nome diferente aqui, também especifique o mesmo na variável ACTION_URL do arquivo formaction.js.)

      Tipo: nt:unstructured

    3. Clique no novo nó que você criou (aqui downloadFlatPDF). O CRX exibe as propriedades do nó.

    4. Adicione a seguinte propriedade ao nó (aqui letterpdfdownloader) e clique em Salvar tudo:

      Nome Tipo Valor
      sling:resourceType Sequência de caracteres fd/cm/ma/gui/components/admin/clientlibs/admin
  8. Crie um arquivo chamado POST.jsp com o código para a manipulação de ação do comando no seguinte local:

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

    1. Clique com o botão direito do mouse na pasta admin no seguinte caminho e selecione Criar > Criar arquivo:

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

      Nomeie o arquivo como POST.jsp. (O nome do arquivo precisa ser somente POST.jsp.)

    2. Clique duas vezes no arquivo POST.jsp para abri-lo no CRX.

    3. Adicione o seguinte código ao arquivo POST.jsp e clique em Salvar tudo:

      Esse código é específico para o serviço de renderização de letras. Para qualquer outro ativo, adicione as bibliotecas java desse ativo a este código. Para obter mais informações sobre APIs do AEM Forms, consulte API do AEM Forms.

      Para obter mais informações sobre AEM bibliotecas, consulte 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?lang=pt-BR"%>
      <!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.");
          }
      %>
      

Baixe um PDF simples de uma carta usando a funcionalidade personalizada

Depois de ter adicionado a funcionalidade personalizada para baixar PDF simples de suas cartas, você pode usar as seguintes etapas para baixar a versão PDF simples da carta selecionada:

  1. Vá para https://'[server]:[port]'/[ContextPath]/projects.html e faça logon.

  2. Selecione Forms > Letters. O Gerenciamento de correspondência lista as cartas disponíveis no sistema.

  3. Clique em Selecione e clique em uma letra para selecioná-la.

  4. Selecione Mais > <Baixar PDF simples> (A funcionalidade personalizada criada seguindo as instruções deste artigo). A caixa de diálogo Baixar carta como PDF é exibida.

    O nome do item de menu, a funcionalidade e o texto alternativo estão de acordo com a personalização criada em Cenário: Adicione um comando à interface do usuário da lista de letras para baixar a versão PDF simples de uma letra.

    Funcionalidade personalizada: Baixar PDF simples

  5. Na caixa de diálogo Baixar carta como PDF, selecione o XML relevante a partir do qual deseja preencher os dados no PDF.

    OBSERVAÇÃO

    Antes de baixar a carta como um PDF simples, é possível criar o arquivo XML com os dados na carta usando a opção Criar relatório.

    Baixar carta como PDF

    A carta é baixada no computador como um PDF simples.

Nesta página

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