Show Menu
ARGOMENTI×

Aggiunta di azioni/pulsanti personalizzati nell’interfaccia utente Crea corrispondenza

Panoramica

La soluzione Correspondence Management consente di aggiungere azioni personalizzate all'interfaccia utente Crea corrispondenza.
Lo scenario illustrato in questo documento illustra come creare un pulsante nell’interfaccia utente Crea corrispondenza per condividere una lettera come PDF di revisione allegato a un messaggio e-mail.

Prerequisiti

Per completare questo scenario, è necessario quanto segue:
  • Conoscenza di CRX e JavaScript
  • LiveCycle Server

Scenario: Creare il pulsante nell'interfaccia utente Crea corrispondenza per inviare una lettera da rivedere

L’aggiunta di un pulsante con un’azione (in questo caso, invia lettera per la revisione) all’interfaccia utente Crea corrispondenza include:
  1. Aggiunta del pulsante all'interfaccia utente Crea corrispondenza
  2. Aggiunta della gestione delle azioni al pulsante
  3. Aggiunta del processo di LiveCycle per abilitare l'azione "gestione

Aggiungere il pulsante all’interfaccia utente Crea corrispondenza

  1. Accedete a https://[server]:[port]/[ContextPath]/crx/de e accedete come amministratore.
  2. Nella cartella delle app, crea una cartella denominata defaultApp con percorso/struttura simile alla cartella defaultApp (che si trova nella cartella di configurazione). Per creare la cartella, effettuate le seguenti operazioni:
    • Fai clic con il pulsante destro del mouse sulla cartella defaultApp nel percorso seguente e seleziona Nodo ​sovrapposizione:
      /libs/fd/cm/config/defaultApp/
    • Verificate che la finestra di dialogo Nodo sovrapposizione contenga i seguenti valori:
      ​Percorso: /libs/fd/cm/config/defaultApp/
      ​Posizione overlay: /apps/
      ​Corrispondenza tipi di nodo: Selezionato
    • Fai clic su OK .
    • Fate clic su Salva tutto .
  3. Eseguite una copia del file acmExtensionsConfig.xml (esiste nel ramo /libs) nel ramo /apps.
    • Vai a "/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml"
    • Fate clic con il pulsante destro del mouse sul file acmExtensionsConfig.xml e selezionate Copia .
    • Fate clic con il pulsante destro del mouse sulla cartella defaultApp in "/apps/fd/cm/config/defaultApp/", quindi selezionate Incolla .
    • Fate clic su Salva tutto .
  4. Fate doppio clic sulla copia di acmExtentionsConfig.xml appena creata nella cartella delle app. Il file viene aperto per la modifica.
  5. Individuate il codice seguente:
    <?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. Per inviare un messaggio e-mail, è possibile utilizzare LiveCycle Forms Workflow. Aggiungi un tag customAction sotto il tag modelExtension in acmExtensionsConfig.xml come 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>
    
    
    Il tag modelExtension dispone di un set di tag secondari customAction che configurano l’azione, le autorizzazioni e l’aspetto del pulsante di azione. Di seguito è riportato l'elenco dei tag di configurazione customAction:
    Nome
    Descrizione
    nome
    Nome alfanumerico dell’azione da eseguire. Il valore di questo tag è obbligatorio, deve essere univoco (all'interno del tag modelExtension) e deve iniziare con un alfabeto.
    label
    Etichetta da visualizzare sul pulsante dell'azione
    tooltip
    Testo descrittivo del pulsante, visualizzato quando l'utente passa il mouse sul pulsante.
    styleName
    Nome dello stile personalizzato applicato al pulsante di azione.
    permissionsName
    L'azione corrispondente viene visualizzata solo se l'utente dispone dell'autorizzazione specificata da permissionsName. Quando si specifica permissionsName come forms-users , tutti gli utenti possono accedere a questa opzione.
    actionHandler
    Nome completo della classe ActionHandler che viene chiamata quando l'utente fa clic sul pulsante.
    Oltre ai parametri indicati sopra, possono essere associate configurazioni aggiuntive a customAction. Queste configurazioni aggiuntive sono rese disponibili al gestore tramite l'oggetto CustomAction.
    Nome
    Descrizione
    serviceName
    Se un oggetto customAction contiene un tag secondario con nome serviceName, quando si fa clic sul pulsante o collegamento corrispondente viene chiamato un processo con il nome rappresentato dal tag serviceName. Assicurarsi che il processo abbia la stessa firma del PostProcess Lettera. Aggiungi il prefisso "Forms Workflow ->" nel nome del servizio.
    Parametri contenenti il prefisso cm_ nel nome del tag
    Se un oggetto customAction contiene tag secondari che iniziano con nome cm_, nel processo di post (che si tratti di Letter Post Process o del processo speciale rappresentato dal tag serviceName) questi parametri sono disponibili nel codice XML di input all'interno del tag corrispondente, con la rimozione del prefisso cm_.
    actionName
    Ogni volta che un processo di pubblicazione è dovuto a un clic, l’XML inviato contiene un tag speciale con nome sotto il tag con il nome dell’azione dell’utente.
  7. Fate clic su Salva tutto .

Creare una cartella delle impostazioni internazionali con il file delle proprietà nel ramo /apps

Il file ACMExtensionMessages.properties include etichette e messaggi di descrizione dei vari campi nell'interfaccia utente Crea corrispondenza. Affinché le azioni/i pulsanti personalizzati funzionino, create una copia di questo file nel ramo /apps.
  1. Fate clic con il pulsante destro del mouse sulla cartella delle impostazioni internazionali nel percorso seguente e selezionate Overlay Node :
    /libs/fd/cm/config/defaultApp/locale
  2. Verificate che la finestra di dialogo Nodo sovrapposizione contenga i seguenti valori:
    ​Percorso:/libs/fd/cm/config/defaultApp/locale
    ​Posizione overlay: /apps/
    ​Corrispondenza tipi di nodo: Selezionato
  3. Fai clic su OK .
  4. Fate clic su Salva tutto .
  5. Fare clic con il pulsante destro del mouse sul file seguente e selezionare Copia :
    /libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties
  6. Fare clic con il pulsante destro del mouse sulla cartella locale nel percorso seguente e selezionare Incolla :
    /apps/fd/cm/config/defaultApp/locale/
    Il file ACMExtensionMessages.properties viene copiato nella cartella locale.
  7. Per localizzare le etichette dell'azione/pulsante personalizzato appena aggiunto, create il file ACMExtensionMessages.properties per le impostazioni internazionali pertinenti in /apps/fd/cm/config/defaultApp/locale/ .
    Ad esempio, per localizzare l'azione/il pulsante personalizzato creato in questo articolo, create un file denominato ACMExtensionMessages_fr.properties con la voce seguente:
    loc.letterInstance.letterreview.label=Revue De Lettre
    In modo simile, in questo file è possibile aggiungere più proprietà, ad esempio per descrizioni e stili.
  8. Fate clic su Salva tutto .

Riavviate il bundle Adobe Asset Composer Building Block

Dopo aver apportato ogni modifica sul lato server, riavviate il bundle Adobe Asset Composer Building Block. In questo scenario, i file acmExtensionsConfig.xml e ACMExtensionMessages.properties sul lato server vengono modificati, pertanto il bundle Adobe Asset Composer Building Block richiede un riavvio.
Potrebbe essere necessario cancellare la cache del browser.
  1. Passa a https://[host]:[port]/system/console/bundles . Se necessario, effettuate l’accesso come amministratore.
  2. Individuate il bundle Adobe Asset Composer Building Block. Riavviate il bundle: fate clic su Interrompi e quindi su Avvia.
Dopo aver riavviato il bundle Adobe Asset Composer Building Block, il pulsante personalizzato viene visualizzato nell’interfaccia utente Crea corrispondenza. Potete aprire una lettera nell'interfaccia utente Crea corrispondenza per visualizzare l'anteprima del pulsante personalizzato.

Aggiungere la gestione delle azioni al pulsante

Per impostazione predefinita, l’interfaccia utente Crea corrispondenza ha implementato ActionHandler nel file cm.domain.js nel percorso seguente:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccr/js/cm.domain.js
Per la gestione delle azioni personalizzate, create una sovrapposizione del file cm.domain.js nel ramo /apps di CRX.
La gestione dell'azione o del pulsante quando si fa clic su action/button include logica per:
  • L’azione appena aggiunta diventa visibile/invisibile: eseguito ignorando la funzione actionVisible().
  • Attivare/disattivare l’azione aggiunta: eseguito ignorando la funzione actionEnabled().
  • Gestione effettiva dell'azione quando l'utente fa clic sul pulsante: viene eseguito ignorando l'implementazione della funzione handleAction().
  1. Passa a https://[server]:[port]/[ContextPath]/crx/de . Se necessario, effettuate l’accesso come amministratore.
  2. Nella cartella delle app, create una cartella denominata js nel ramo /apps di CRX con una struttura simile alla seguente:
    /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
    Per creare la cartella, effettuate le seguenti operazioni:
    1. Fate clic con il pulsante destro del mouse sulla cartella js nel percorso seguente e selezionate Nodo ​sovrapposizione:
      /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
    2. Verificate che la finestra di dialogo Nodo sovrapposizione contenga i seguenti valori:
      ​Percorso: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
      ​Posizione overlay: /apps/
      ​Corrispondenza tipi di nodo: Selezionato
    3. Fai clic su OK .
    4. Fate clic su Salva tutto .
  3. Nella cartella js, create un file denominato ccrcustomization.js con il codice per la gestione dell'azione del pulsante utilizzando la procedura seguente:
    1. Fate clic con il pulsante destro del mouse sulla cartella js nel percorso seguente e selezionate Crea > Crea file :
      /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
      Denominate il file come ccrcustomization.js.
    2. Fate doppio clic sul file ccrcustomization.js per aprirlo in CRX.
    3. Nel file, incollate il codice seguente e fate clic su Salva tutto :
      /* 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;</span></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>';
      
      

Aggiunta del processo LiveCycle per abilitare la gestione delle azioni

In questo scenario, abilita i seguenti componenti, che fanno parte del file components.zip allegato:
  • Jar del componente DSC (DSCSample.jar)
  • Invia lettera per il processo di revisione LCA (SendLetterForReview.lca)
Scaricate e decomprimete il file components.zip per ottenere i file DSCSample.jar e SendLetterForReview.lca. Utilizzate questi file come specificato nelle procedure seguenti. components.zip

Configurare il server LiveCycle per eseguire il processo LCA

Questo passaggio è richiesto solo se si utilizza una configurazione OSGI e l'integrazione LC è necessaria per il tipo di personalizzazione che si sta implementando.
Il processo LCA viene eseguito sul server LiveCycle e richiede l'indirizzo del server e le credenziali di accesso.
  1. Accedete a https://[server]:[port]/system/console/configMgr e accedete come amministratore.
  2. Individuare la configurazione Adobe LiveCycle Client SDK e fare clic su Modifica (icona di modifica). Viene visualizzato il pannello Configurazioni.
  3. Immettete i seguenti dettagli e fate clic su Salva :
    • Url server: URL del server LC il cui servizio Send For Review viene utilizzato dal codice del gestore di azioni.
    • Nome utente : Nome utente amministratore del server LC
    • Password : Password del nome utente amministratore

Installare LiveCycle Archive (LCA)

Processo di LiveCycle richiesto per abilitare il processo del servizio e-mail.
Per visualizzare le operazioni eseguite da questo processo o per creare un processo simile, è necessario disporre di Workbench.
  1. Accedete come amministratore a Livecycle Server adminui in https:/[lc server]/:[lc port]/adminui .
  2. Vai a Home > Servizi > Applicazioni e servizi > Gestione applicazione.
  3. Se l'applicazione SendLetterForReview è già presente, ignora i passaggi rimanenti di questa procedura, altrimenti continua con i passaggi successivi.
  4. Fai clic su Importa .
  5. Fare clic su Scegli file e selezionare SendLetterForReview.lca .
  6. Fate clic su Anteprima .
  7. Selezionate Distribuisci risorse in fase di esecuzione al termine dell'importazione.
  8. Fai clic su Importa .

Aggiunta di ServiceName all'elenco WhiteListed Service

Ricorda nel server AEM i servizi LiveCycle a cui vuoi accedere.
  1. Accedete come amministratore a https:/[host]/:[port]/system/console/configMgr .
  2. Individua e fai clic su Configurazione SDK client Adobe LiveCycle. Viene visualizzato il pannello Configurazione Adobe LiveCycle Client SDK.
  3. Nell’elenco Nome servizio, fare clic sull’icona + e aggiungere un serviceName SendLetterForReview/SendLetterForReviewProcess .
  4. Fai clic su Salva .

Configurare il servizio e-mail

In questo scenario, affinché Gestione corrispondenza possa inviare un messaggio e-mail, configurare il servizio e-mail nel server LiveCycle.
  1. Effettuate l'accesso con le credenziali di amministratore a Livecycle Server adminui in https:/[lc server]:[lc port]/adminui .
  2. Vai a Home > Servizi > Applicazioni e servizi > Gestione dei servizi.
  3. Individua e fai clic su EmailService .
  4. Nell'host ​SMTP configurate il servizio e-mail.
  5. Fai clic su Salva .

Configurare il servizio DSC

Per utilizzare l'API di gestione della corrispondenza, scaricate il file DSCSample.jar (allegato in questo documento come parte di components.zip) e caricatelo nel server LiveCycle. Dopo il caricamento del file DSCSample.jar nel server LiveCycle, il server AEM utilizza il file DSCSample.jar per accedere all'API renderingLetter.
Per ulteriori informazioni, consultate Connessione di AEM Forms con Adobe LiveCycle .
  1. Aggiorna l’URL del server AEM in cmsa.properties in DSCSample.jar, che si trova nel seguente percorso:
    DSCSample.jar\com\adobe\livecycle\cmsa.properties
  2. Immettete i seguenti parametri nel file di configurazione:
    • crx.serverUrl =https:/ #/: #/percorso #contestuale/URL #
    • crx.username = nome utente AEM
    • crx.password = password AEM
    • crx.appRoot =/content/apps/cm
    Ogni volta che si apportano modifiche sul lato server, riavviare il server LiveCycle. Per informazioni sulla creazione di un componente LiveCycle personalizzato, vedere Estensione del software LiveCycle ES tramite lo sviluppo DSC personalizzato.
    Il file DSCSample.jar utilizza l'API renderingLetter. Per ulteriori informazioni sull'API renderLetter, vedi Interfaccia LetterRenderService .

Importa DSC in LiveCycle

Il file DSCSample.jar utilizza l'API renderingLetter per eseguire il rendering della lettera come byte PDF dai dati XML che C fornisce come input. Per ulteriori informazioni su renderingLetter e altre API, consultate Servizio di rendering Lettera.
  1. Avviare Workbench ed effettuare l'accesso.
  2. Selezionare Finestra > Mostra viste > Componenti . La visualizzazione Componenti viene aggiunta a Workbench ES2.
  3. Fare clic con il pulsante destro del mouse su Componenti e selezionare Installa componente .
  4. Selezionate il file DSCSample.jar nel browser del file e fate clic su Apri .
  5. Fare clic con il pulsante destro del mouse su RenderWrapper e selezionare Avvia componente . Se il componente viene avviato, accanto al nome del componente viene visualizzata una freccia verde.

Invia lettera per revisione

Dopo aver configurato l’azione e il pulsante per l’invio della lettera per la revisione:
  1. Cancellate la cache del browser.
  2. Nell’interfaccia utente Crea corrispondenza, fate clic su Lettera revisione e specificate l’ID e-mail del revisore.
  3. Fate clic su Invia .
Il revisore riceve un'e-mail dal sistema con la lettera come allegato PDF.