Show Menu
TÓPICOS×

Adicionar ação/botão personalizado na interface Criar correspondência

Visão geral

A solução Gerenciamento de correspondência permite adicionar ações personalizadas à interface do usuário Criar correspondência.
O cenário neste documento explica como você pode criar um botão na interface Criar usuário de correspondência para compartilhar uma carta como um PDF de revisão anexado a um email.

Pré-requisitos

Para concluir este cenário, você precisa do seguinte:
  • Conhecimento sobre CRX e JavaScript
  • LiveCycle Server

Cenário: Crie o botão na interface Criar usuário de correspondência para enviar uma carta para revisão

A adição de um botão com uma ação (aqui, enviar carta para revisão) à interface Criar usuário de correspondência inclui:
  1. Adicionar o botão à interface Criar usuário de correspondência
  2. Adicionar manipulação de ação ao botão
  3. Adicionar o processo do LiveCycle para ativar a manipulação de ações

Adicione o botão à interface do usuário Criar correspondência

  1. Vá para https://'[server]:[port]'/[ContextPath]/crx/de e faça logon como Administrador.
  2. Na pasta apps, crie uma pasta chamada defaultApp com caminho/estrutura semelhante à pasta defaultApp (localizada na pasta config). Use as seguintes etapas para criar a pasta:
    1. Clique com o botão direito do mouse na pasta defaultApp no seguinte caminho e selecione Sobrepor nó :
      /libs/fd/cm/config/defaultApp/
    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:
      Caminho: /libs/fd/cm/config/defaultApp/
      Localização da sobreposição: /apps/
      Corresponder tipos de nós: Verificado
    3. Clique em OK .
    4. Clique em Salvar tudo .
  3. Faça uma cópia do arquivo acmExtensionsConfig.xml (existe na ramificação /libs) na ramificação /apps.
    1. Vá para "/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml"
    2. Clique com o botão direito do mouse no arquivo acmExtensionsConfig.xml e selecione Copiar .
    3. Clique com o botão direito do mouse na pasta defaultApp em "/apps/fd/cm/config/defaultApp/" e selecione Colar .
    4. Clique em Salvar tudo .
  4. Clique com o Duplo na cópia de acmExtentionsConfig.xml que você criou recentemente na pasta de aplicativos. O arquivo é aberto para edição.
  5. Localize o seguinte código:
    <?xml version="1.0" encoding="utf-8"?>
    <extensionsConfig>
        <modelExtensions>
            <modelExtension type="LetterInstance">
      <customAction name="Preview" label="loc.letterInstance.preview.label" tooltip="loc.letterInstance.preview.tooltip" styleName="previewButton"/>
                <customAction name="Submit" label="loc.letterInstance.submit.label" tooltip="loc.letterInstance.submit.tooltip" styleName="submitButton" permissionName="forms-users"/>
                <customAction name="SaveAsDraft" label="loc.letterInstance.saveAsDraft.label" tooltip="loc.letterInstance.saveAsDraft.tooltip" styleName="submitButton" permissionName="forms-users"/>
                <customAction name="Close" label="loc.letterInstance.close.label" tooltip="loc.letterInstance.close.tooltip" styleName="closeButton"/>
            </modelExtension>
        </modelExtensions>
    </extensionsConfig>
    
    
  6. Para enviar uma carta por email, você pode usar o LiveCycle Forms Workflow. Adicione uma tag customAction sob a tag modelExtension em acmExtensionsConfig.xml como segue:
     <customAction name="Letter Review" label="Letter Review" tooltip="Letter Review" styleName="" permissionName="forms-users" actionHandler="CM.domain.CCRCustomActionHandler">
          <serviceName>Forms Workflow -> SendLetterForReview/SendLetterForReviewProcess</serviceName>
        </customAction>
    
    
    A tag modelExtension tem um conjunto de tags-filho customAction que configuram a ação, as permissões e a aparência do botão de ação. Veja a seguir a lista das tags de configuração customAction:
    Nome
    Descrição
    name
    O nome alfanumérico da ação a ser executada. O valor dessa tag é obrigatório, deve ser exclusivo (dentro da tag modelExtension) e deve ser start com um alfabeto.
    label
    O rótulo a ser exibido no botão de ação
    tooltip
    Texto de dica de ferramenta do botão, que é exibido quando o usuário passa o mouse sobre o botão.
    styleName
    Nome do estilo personalizado aplicado ao botão de ação.
    permissionsName
    A ação correspondente é exibida somente se o usuário tiver a permissão especificada por permissionsName. Quando você especifica a propriedade permissionsName como, forms-users todos os usuários terão acesso a essa opção.
    actionHandler
    Nome totalmente qualificado da classe ActionHandler que é chamada quando o usuário clica no botão.
    Além dos parâmetros acima, pode haver configurações adicionais associadas a um customAction. Essas configurações adicionais são disponibilizadas ao manipulador por meio do objeto CustomAction.
    Nome
    Descrição
    serviceName
    Se um customAction contiver uma tag-filho com o nome serviceName, ao clicar no botão/link relevante, um processo é chamado com o nome representado pela tag serviceName. Certifique-se de que esse processo tenha a mesma assinatura que a Carta PostProcess. Adicione o prefixo "Fluxo de trabalho do Forms ->" no nome do serviço.
    Parâmetros que contêm o prefixo cm_ no nome da tag
    Se um customAction contiver tags-filho que começam com o nome cm_, então no processo posterior (seja o Processo de publicação de carta ou o processo especial representado pela tag serviceName) esses parâmetros estão disponíveis no código XML de entrada sob a tag relevante com a remoção do prefixo cm_.
    actionName
    Sempre que um processo de publicação é devido a um clique, o XML enviado contém uma tag especial com nome na tag com o nome da ação do usuário.
  7. Clique em Salvar tudo .

Criar uma pasta de localidade com arquivo de propriedades na ramificação /apps

O arquivo ACMExtensionsMessages.properties inclui rótulos e mensagens de dica de ferramenta de vários campos na interface de usuário Criar correspondência. Para que as ações/botões personalizados funcionem, faça uma cópia desse arquivo na ramificação /apps.
  1. Clique com o botão direito do mouse na pasta local no seguinte caminho e selecione Sobrepor nó :
    /libs/fd/cm/config/defaultApp/locale
  2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:
    Caminho: /libs/fd/cm/config/defaultApp/locale
    Localização da sobreposição: /apps/
    Corresponder tipos de nós: Verificado
  3. Clique em OK .
  4. Clique em Salvar tudo .
  5. Clique com o botão direito do mouse no arquivo a seguir e selecione Copiar :
    /libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties
  6. Clique com o botão direito do mouse na pasta local no seguinte caminho e selecione Colar :
    /apps/fd/cm/config/defaultApp/locale/
    O arquivo ACMExtensionsMessages.properties é copiado na pasta da localidade.
  7. Para localizar os rótulos da ação/botão personalizado recém-adicionado, crie o arquivo ACMExtensionsMessages.properties para a localidade relevante em /apps/fd/cm/config/defaultApp/locale/ .
    Por exemplo, para localizar a ação/botão personalizado criado neste artigo, crie um arquivo chamado ACMExtensionsMessages_fr.properties com a seguinte entrada:
    loc.letterInstance.letterreview.label=Revue De Lettre
    Da mesma forma, é possível adicionar mais propriedades, como dicas de ferramentas e estilo, neste arquivo.
  8. Clique em Salvar tudo .

Reinicie o pacote de blocos componentes do Adobe Asset Composer

Depois de fazer todas as alterações no servidor, reinicie o pacote de blocos componentes do Adobe Asset Composer. Nesse cenário, os arquivos acmExtensionsConfig.xml e ACMExtensionsMessages.properties no lado do servidor são editados e, portanto, o pacote Bloco de construção do Adobe Asset Composer requer uma reinicialização.
Talvez seja necessário limpar o cache do navegador.
  1. Ir para https://[host]:'port'/system/console/bundles . Se necessário, faça logon como Administrador.
  2. Localize o pacote de blocos componentes do Adobe Asset Composer. Reinicie o pacote: clique em Parar e em Start.
Após reiniciar o pacote Bloco de construção do Adobe Asset Composer, o botão personalizado será exibido na interface Criar usuário de correspondência. Você pode abrir uma carta na interface Criar usuário de correspondência para pré-visualização o botão personalizado.

Adicionar manipulação de ação ao botão

A interface de usuário Criar correspondência por padrão tem a implementação do ActionHandler no arquivo cm.domain.js no seguinte local:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccr/js/cm.domain.js
Para manipulação de ações personalizadas, crie uma sobreposição do arquivo cm.domain.js na ramificação /apps do CRX.
O manuseio da ação/botão ao clicar em ação/botão inclui lógica para:
  • Tornando a ação recém-adicionada visível/invisível: feita substituindo a função actionVisible().
  • Ativando/desabilitando a ação recém-adicionada: feita substituindo a função actionEnabled().
  • Manuseio real da ação quando o usuário clica no botão: feita substituindo a implementação da função identificadorAction().
  1. Ir para https://'[server]:[port]'/[ContextPath]/crx/de . Se necessário, faça logon como Administrador.
  2. Na pasta apps, crie uma pasta chamada js na ramificação /apps do CRX com estrutura semelhante à seguinte pasta:
    /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
    Use as seguintes etapas para criar a pasta:
    1. Clique com o botão direito do mouse na pasta js no seguinte caminho e selecione Sobrepor nó :
      /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
    2. Certifique-se de que a caixa de diálogo Sobrepor nó tenha os seguintes valores:
      Caminho: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
      Localização da sobreposição: /apps/
      Corresponder tipos de nós: Verificado
    3. Clique em OK .
    4. Clique em Salvar tudo .
  3. Na pasta js, crie um arquivo chamado ccrcustomization.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/ccr/gui/components/admin/clientlibs/ccrui/js
      Nomeie o arquivo como ccrcustomization.js.
    2. Clique com o Duplo no arquivo crcustomization.js para abri-lo no CRX.
    3. No arquivo, cole o seguinte código e clique em Salvar tudo :
      /* for adding and handling custom actions in Extensible Toolbar.
        * One instance of handler will be created for each action.
        * CM.domain.CCRCustomActionHandler is actionHandler class.
        */
      var CCRCustomActionHandler;
          CCRCustomActionHandler = CM.domain.CCRCustomActionHandler = new Class({
              className: 'CCRCustomActionHandler',
              extend: CCRDefaultActionHandler,
              construct : function(action,model){
              }
          });
          /**
           * Called when user user click an action
           * @param extraParams additional arguments that may be passed to handler (For future use)
           */
          CCRCustomActionHandler.prototype.handleAction = function(extraParams){
              if (this.action.name == CCRCustomActionHandler.SEND_FOR_REVIEW) {
                  var sendForReview = function(){
                      var serviceName = this.action.actionConfig["serviceName"];
                      var inputParams = {};
                      inputParams["dataXML"] = this.model.iccData.data;
                      inputParams["letterId"] = this.letterVO.id;
                      inputParams["letterName"] = this.letterVO.name;
                      inputParams["mailId"] = $('#email').val();
                      /*function to invoke the LivecyleService */
                      ServiceDelegate.callJSONService(this,"lc.icc.renderlib.serviceInvoker.json","invokeProcess",[serviceName,inputParams],this.onProcessInvokeComplete,this.onProcessInvokeFail);
                      $('#ccraction').modal("hide");
                  }
                  if($('#ccraction').length == 0){
                      /*For first click adding popup & setting letterName.*/
                      $("body").append(popUp);
                      $("input[id*='letterName']").val(this.letterVO.name);
                      $(document).on('click',"#submitLetter",$.proxy( sendForReview, this ));
                  }
                  $('#ccraction').modal("show");
              }
          };
          /**
           * Should the action be enabled in toolbar
           * @param extraParams additional arguements that may be passed to handler (For future use)
           * @return flag indicating whether the action should be enabled
           */
         CCRCustomActionHandler.prototype.actionEnabled = function(extraParams){
                  /*can be customized as per user requirement*/
                  return true;
          };
          /**
           * Should the action be visible in toolbar
           * @param extraParams additional arguments that may be passed to handler (For future use)
           * @return flag indicating whether the action should be enabled
           */
          CCRCustomActionHandler.prototype.actionVisible = function(extraParams){
              /*Check can be enabled for Non-Preview Mode.*/
              return true;
          };
          /*SuccessHandler*/
          CCRCustomActionHandler.prototype.onProcessInvokeComplete = function(response) {
              ErrorHandler.showSuccess("Letter Sent for Review");
          };
          /*FaultHandler*/
          CCRCustomActionHandler.prototype.onProcessInvokeFail = function(event) {
              ErrorHandler.showError(event.message);
          };
          CCRCustomActionHandler.SEND_FOR_REVIEW  = "Letter Review";
      /*For PopUp*/
          var popUp = '<div class="modal fade" id="ccraction" tabindex="-1" role="dialog" aria-hidden="true">'+
          '<div class="modal-dialog modal-sm">'+
              '<div class="modal-content">' +
                  '<div class="modal-header">'+
                      '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</code></button>'+
                      '<h4 class="modal-title"> Send Review </h4>'+
                  '</div>'+
                  '<div class="modal-body">'+
                      '<form>'+
                          '<div class="form-group">'+
                              '<label class="control-label">Email Id</label>'+
                              '<input type="text" class="form-control" id="email">'+
                          '</div>'+
                          '<div class="form-group">'+
                              '<label  class="control-label">Letter Name</label>'+
                              '<input id="letterName" type="text" class="form-control" readonly>'+
                          '</div>'+
                          '<div class="form-group">'+
                              '<input id="letterData" type="text" class="form-control hide" readonly>'+
                          '</div>'+
                      '</form>'+
                  '</div>'+
                  '<div class="modal-footer">'+
                     '<button type="button" class="btn btn-default" data-dismiss="modal"> Cancel </button>'+
                     '<button type="button" class="btn btn-primary" id="submitLetter"> Submit </button>'+
                  '</div>'+
              '</div>'+
          '</div>'+
      '</div>';
      
      

Adicionar o processo do LiveCycle para ativar a manipulação de ações

Nesse cenário, ative os seguintes componentes, que fazem parte do arquivo components.zip anexado:
  • DSC componente jar (DSCSampliar.jar)
  • Enviar carta para o processo de revisão LCA (SendLetterForReview.lca)
Baixe e descompacte o arquivo components.zip para obter os arquivos DSCSape.jar e SendLetterForReview.lca. Use esses arquivos conforme especificado nos procedimentos a seguir. components.zip

Configurar o LiveCycle Server para executar o processo LCA

Esta etapa é necessária somente se você estiver em uma configuração OSGI e a integração LC for necessária para o tipo de personalização que você está implementando.
O processo LCA é executado no servidor do LiveCycle e requer o endereço do servidor e as credenciais de logon.
  1. Vá para https://'[server]:[port]'/system/console/configMgr e faça logon como Administrador.
  2. Localize a Configuração do SDK do Adobe LiveCycle Client e clique em Editar (ícone editar). O painel Configurações é aberto.
  3. Digite os seguintes detalhes e clique em Salvar :
    • URL do servidor: URL do servidor LC cujo serviço Enviar para revisão o código do manipulador de ação usa.
    • Nome de usuário : Nome de usuário administrador do servidor LC
    • Senha : Senha do nome de usuário administrador

Instalar o LiveCycle Archive (LCA)

O processo necessário do LiveCycle que ativa o processo do serviço de email.
Para visualização do que este processo faz ou para criar um processo semelhante ao seu, você precisa do Workbench.
  1. Faça logon como Administrador no adminui do Livecycle Server em https:/[lc server]/:[lc port]/adminui .
  2. Navegue até Início > Serviços > Aplicativos e serviços > Gerenciamento de aplicativos.
  3. Se o aplicativo SendLetterForReview já estiver presente, pule as etapas restantes neste procedimento; caso contrário, continue para as próximas etapas.
  4. Clique em Importar .
  5. Clique em Escolher arquivo e selecione SendLetterForReview.lca.
  6. Clique em Pré-visualização .
  7. Selecione Implantar ativos para tempo de execução quando a importação estiver concluída .
  8. Clique em Importar .

Adicionando ServiceName à lista WhiteListed Service

Mencione no servidor de AEM os serviços do LiveCycle que você deseja acessar no servidor de AEM.
  1. Faça logon como Administrador para https:/[host]:'port'/system/console/configMgr .
  2. Localize e clique em Configuração do SDK do cliente Adobe LiveCycle. O painel Configuração do SDK do Adobe LiveCycle Client é exibido.
  3. Na lista Nome do serviço, clique no ícone + e adicione um serviceName SendLetterForReview/SendLetterForReviewProcess .
  4. Clique em Salvar .

Configurar o serviço de email

Nesse cenário, para que o Gerenciamento de correspondência possa enviar um email, configure o serviço de email no servidor do LiveCycle.
  1. Efetue logon com as credenciais de Administrador no adminui do Livecycle Server em https:/[lc server]:[lc port]/adminui .
  2. Navegue até Início > Serviços > Aplicativos e serviços > Gerenciamento de serviços.
  3. Localize e clique em EmailService .
  4. No Host ​SMTP, configure o serviço de email.
  5. Clique em Salvar .

Configurar o serviço DSC

Para usar a API do Correspondence Management, baixe o DSCSampliar.jar (anexado neste documento como parte de components.zip) e carregue-o no servidor do LiveCycle. Depois que o arquivo DSCSamplie.jar é carregado no servidor do LiveCycle, o servidor do AEM usa o arquivo DSCSamplie.jar para acessar a API renderLetter.
Para obter mais informações, consulte Conexão de formulários AEM com o Adobe LiveCycle .
  1. Atualize o URL do servidor AEM em cmsa.properties em DSCSampliar.jar, que está no seguinte local:
    DSCSamplia.jar\com\adobe\livecycle\cmsa.properties
  2. Forneça os seguintes parâmetros no arquivo de configuração:
    • crx.serverUrl =https:/host:port/ #/URL #
    • crx.username = nome de usuário do AEM
    • crx.password = senha do AEM
    • crx.appRoot =/content/apps/cm
    Sempre que você fizer alterações no lado do servidor, reinicie o LiveCycle Server. Para obter informações sobre como criar seu próprio componente do LiveCycle ES, consulte Extensão do software LiveCycle ES por meio do desenvolvimento personalizado do DSC.
    O arquivo DSCSamplie.jar usa a API renderLetter. Para obter mais informações sobre a API renderLetter, consulte Interface LetterRenderService .

Importar DSC para o LiveCycle

O arquivo DSCSamplie.jar usa a API renderLetter para renderizar a carta como bytes PDF dos dados XML que C fornece como entrada. Para obter mais informações sobre a renderizaçãoCarta e outras APIs, consulte Serviço de renderização de carta.
  1. Start Workbench e faça logon.
  2. Selecione Janela > Mostrar Visualizações > Componentes . A visualização Componentes é adicionada ao Workbench ES2.
  3. Clique com o botão direito do mouse em Componentes e selecione Instalar componente .
  4. Selecione o arquivo DSCSamplie.jar no navegador de arquivos e clique em Abrir .
  5. Clique com o botão direito do mouse em RenderWrapper e selecione Componente do Start. Se o componente for start, uma seta verde será exibida ao lado do nome do componente.

Enviar carta para revisão

Depois de configurar a ação e o botão para enviar a carta para revisão:
  1. Limpe o cache do navegador.
  2. Na interface Criar correspondência, clique em Revisão da carta e especifique a ID de email do revisor.
  3. Clique em Enviar .
O revisor recebe um email do sistema com a carta como um anexo PDF.