Lägga till en anpassad åtgärdsknapp i användargränssnittet för Skapa korrespondens add-custom-action-button-in-create-correspondence-ui

Översikt overview

Med Correspondence Management-lösningen kan du lägga till anpassade åtgärder i användargränssnittet Skapa korrespondens.

Scenariot i det här dokumentet förklarar hur du kan skapa en knapp i användargränssnittet Skapa korrespondens för att dela ett brev som en PDF på en granskning som bifogas till ett e-postmeddelande.

Förutsättningar prerequisites

Du behöver följande för att slutföra det här scenariot:

  • Kunskap om CRX och JavaScript
  • LiveCycle Server

Scenario: Skapa knappen i användargränssnittet för Create Correspondence om du vill skicka ett brev för granskning scenario-create-the-button-in-the-create-correspondence-user-interface-to-send-a-letter-for-review

Om du lägger till en knapp med en åtgärd (här skickar du ett brev för granskning) i användargränssnittet Skapa korrespondens innehåller följande:

  1. Lägga till knappen i användargränssnittet Skapa korrespondens
  2. Lägga till åtgärdshantering för knappen
  3. Lägga till LiveCyclet för att aktivera åtgärdshantering

Lägg till knappen i användargränssnittet Skapa korrespondens add-the-button-to-the-create-correspondence-user-interface

  1. Gå till https://'[server]:[port]'/[ContextPath]/crx/de och logga in som administratör.

  2. Skapa en mapp med namnet i appmappen defaultApp med en sökväg/struktur som liknar defaultApp-mappen (i config-mappen). Så här skapar du mappen:

    1. Högerklicka på defaultApp mapp på följande sökväg och välj Överläggsnod:

      /libs/fd/cm/config/defaultApp/

      Överläggsnod

    2. Kontrollera att dialogrutan Overlay Node har följande värden:

      Sökväg: /libs/fd/cm/config/defaultApp/

      Plats för övertäckning: /apps/

      Matcha nodtyper: Markerad

      Överläggsnod

    3. Klicka OK.

    4. Klicka Spara alla.

  3. Skapa en kopia av filen acmExtensionsConfig.xml (finns under grenen /libs) under grenen /apps.

    1. Gå till"/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml"

    2. Högerklicka på filen acmExtensionsConfig.xml och välj Kopiera.

      Kopiera acmExtensionsConfig.xml

    3. Högerklicka på defaultApp mapp på "/apps/fd/cm/config/defaultApp/," och välj Klistra in.

    4. Klicka Spara alla.

  4. Dubbelklicka på den kopia av acmExtentionsConfig.xml som du nyss skapade i mappen apps. Filen öppnas för redigering.

  5. Leta reda på följande kod:

    code language-xml
    <?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. Om du vill skicka ett e-postbrev kan du använda Formens Workflow LiveCycle. Lägg till en customAction-tagg under taggen modelExtension i acmExtensionsConfig.xml enligt följande:

    code language-xml
     <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>
    

    customAction-tagg

    Taggen modelExtension har en uppsättning med customAction-underordnade taggar som konfigurerar åtgärden, behörigheterna och utseendet för åtgärdsknappen. Här följer en lista över konfigurationstaggar för customAction:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2
    Namn Beskrivning
    name Det alfanumeriska namnet på åtgärden som ska utföras. Värdet för den här taggen är obligatoriskt, måste vara unikt (inom taggen modelExtension) och måste börja med ett alfabet.
    label Etiketten som ska visas på åtgärdsknappen
    knappbeskrivning Knappens knappbeskrivning, som visas när användaren håller muspekaren över knappen.
    styleName Namnet på det anpassade format som används på åtgärdsknappen.
    permissionName Motsvarande åtgärd visas bara om användaren har den behörighet som anges av permissionName. När du anger permissionName som forms-users, får alla användare tillgång till det här alternativet.
    actionHandler Fullständigt kvalificerat namn på ActionHandler-klassen som anropas när användaren klickar på knappen.

    Förutom ovanstående parametrar kan det finnas ytterligare konfigurationer associerade med en customAction. Dessa ytterligare konfigurationer görs tillgängliga för hanteraren via objektet CustomAction.

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Namn Beskrivning
    serviceName Om en customAction innehåller en underordnad tagg med namnet serviceName anropas en process med namnet serviceName-taggen när du klickar på den relevanta knappen/länken. Se till att den här processen har samma signatur som PostProcess för brev. Lägg till prefixet "Forms Workflow ->" i tjänstnamnet.
    Parametrar som innehåller prefixet cm_ i taggnamnet Om en customAction innehåller en underordnad tagg som börjar med namnet cm_ är de här parametrarna tillgängliga i post-processen (vare sig det är A4 Post Process eller den speciella process som representeras av serviceName-taggen) under den aktuella taggen med cm_-prefixet borttaget.
    actionName När en inläggsprocess beror på ett klick innehåller inskickad XML en speciell tagg med namnet under taggen med namnet på användaråtgärden.
  7. Klicka Spara alla.

Skapa en lokal mapp med egenskapsfilen i grenen /apps create-a-locale-folder-with-properties-file-in-the-apps-branch

Filen ACMExtensionsMessages.properties innehåller etiketter och knappbeskrivningsmeddelanden för olika fält i användargränssnittet Create Correspondence. Gör en kopia av den här filen i grenen /apps för att de anpassade åtgärderna/knapparna ska fungera.

  1. Högerklicka på locale mapp på följande sökväg och välj Överläggsnod:

    /libs/fd/cm/config/defaultApp/locale

  2. Kontrollera att dialogrutan Overlay Node har följande värden:

    Sökväg: /libs/fd/cm/config/defaultApp/locale

    Plats för övertäckning: /apps/

    Matcha nodtyper: Markerad

  3. Klicka OK.

  4. Klicka Spara alla.

  5. Högerklicka på följande fil och välj Kopiera:

    /libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties

  6. Högerklicka på locale mapp på följande sökväg och välj Klistra in:

    /apps/fd/cm/config/defaultApp/locale/

    Filen ACMExtensionsMessages.properties kopieras i mappen locale.

  7. Om du vill lokalisera etiketterna för den nya anpassade åtgärden/knappen skapar du filen ACMExtensionsMessages.properties för den aktuella språkinställningen i /apps/fd/cm/config/defaultApp/locale/.

    Om du till exempel vill lokalisera den anpassade åtgärd/knapp som skapas i den här artikeln skapar du en fil med namnet ACMExtensionsMessages_fr.properties med följande post:

    loc.letterInstance.letterreview.label=Revue De Lettre

    På samma sätt kan du lägga till fler egenskaper, t.ex. för verktygstips och format, i den här filen.

  8. Klicka Spara alla.

Starta om paketet Adobe Asset Composer Building Block restart-the-adobe-asset-composer-building-block-bundle

När du har gjort alla ändringar på serversidan startar du om paketet Adobe Asset Composer Building Block. I det här scenariot redigeras filerna acmExtensionsConfig.xml och ACMExtensionsMessages.properties på serversidan, och därför krävs en omstart av paketet Adobe Asset Composer Building Block.

NOTE
Du kan behöva rensa webbläsarens cache.
  1. Gå till https://[host]:'port'/system/console/bundles. Logga in som administratör om det behövs.

  2. Leta reda på byggstenspaketet för Adobe Assets Composer. Starta om paketet: klicka på Stopp och sedan på Start.

    Byggblock för Adobe-resursdisposition

När du har startat om paketet Adobe Asset Composer Building Block visas den anpassade knappen i användargränssnittet Create Correspondence. Du kan öppna ett brev i Skapa korrespondensanvändargränssnitt om du vill förhandsgranska den anpassade knappen.

Lägga till åtgärdshantering till knappen add-action-handling-to-the-button

Användargränssnittet Create Correspondence har som standard implementering av ActionHandler i filen cm.domain.js på följande plats:

/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccr/js/cm.domain.js

För anpassad åtgärdshantering skapar du en övertäckning av filen cm.domain.js i grenen /apps i CRX.

Hanteringen av åtgärd/knapp vid klickning innehåller logik för:

  • Gör den nyligen tillagda åtgärden synlig/osynlig: gör du genom att åsidosätta funktionen actionVisible().
  • Aktivera/inaktivera nyligen tillagda åtgärder: det görs genom att funktionen actionEnabled() åsidosätts.
  • Faktisk hantering av åtgärden när användaren klickar på knappen: utförd genom att åsidosätta implementeringen av funktionen handleAction().
  1. Gå till https://'[server]:[port]'/[ContextPath]/crx/de. Logga in som administratör om det behövs.

  2. Skapa en mapp med namnet i appmappen js i grenen /apps i CRX med en struktur som liknar den i följande mapp:

    /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

    Så här skapar du mappen:

    1. Högerklicka på js mapp på följande sökväg och välj Överläggsnod:

      /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

    2. Kontrollera att dialogrutan Overlay Node har följande värden:

      Sökväg: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

      Plats för övertäckning: /apps/

      Matcha nodtyper: Markerad

    3. Klicka OK.

    4. Klicka Spara alla.

  3. I mappen js skapar du en fil med namnet crcustomization.js med koden för knappens åtgärdshantering enligt följande:

    1. Högerklicka på js mapp på följande sökväg och välj Skapa > Skapa fil:

      /apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

      Ge filen namnet crcustomization.js.

    2. Dubbelklicka på filen crcustomization.js för att öppna den i CRX.

    3. Klistra in följande kod i filen och klicka på Spara alla:

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

Lägg till LiveCyclet för att aktivera åtgärden hantering add-the-livecycle-process-to-enable-action-span-class-acrolinxcursormarker-span-handling

I det här scenariot aktiverar du följande komponenter, som är en del av den bifogade filen components.zip:

  • DSC-komponent jar (DSCSample.jar)
  • Skicka brev för granskning LCA (SendLetterForReview.lca)

Ladda ned och zippa upp filen components.zip för att hämta filerna DSCSample.jar och SendLetterForReview.lca. Använd dessa filer enligt följande procedurer.
Hämta fil

Konfigurera LiveCyclet Server för körning av LCA-processen configure-the-livecycle-server-to-run-the-lca-process

NOTE
Det här steget krävs bara om du använder en OSGI-konfiguration och LC-integrering krävs för den typ av anpassning som du implementerar.

LCA-processen körs på serverservern och kräver serveradressen och inloggningsuppgifterna.

  1. Gå till https://'[server]:[port]'/system/console/configMgr och logga in som administratör.

  2. Leta reda på SDK-konfigurationen för Adobe LiveCycle Client och klicka på Redigera (redigeringsikon). Panelen Konfigurationer öppnas.

  3. Ange följande information och klicka på Spara:

    • Server-URL: URL för den LC-server vars Send for Review-tjänst åtgärdshanterarkoden använder.
    • Användarnamn: Administratörsanvändarnamn för LC-servern
    • Lösenord: Lösenord för administratörens användarnamn

    SDK-konfiguration för Adobe-klient

Installera LiveCycle Archive (LCA) install-livecycle-archive-lca

Den process som krävs för LiveCycle som möjliggör e-posttjänstprocessen.

NOTE
Om du vill se vad den här processen gör eller skapa en egen liknande process behöver du Workbench.
  1. Logga in som administratör för LiveCycle® Server-administratörer på https:/[lc server]/:[lc port]/adminui.

  2. Navigera till Hem > Tjänster > Program och tjänster > Programhantering.

  3. Om programmet SendLetterForReview redan finns hoppar du över de återstående stegen i den här proceduren, annars fortsätter du till nästa steg.

    SendLetterForReview-programmet i användargränssnittet

  4. Klicka Importera.

  5. Klicka Välj fil och väljer SendLetterForReview.lca.

    Välj filen SendLetterForReview.lca

  6. Klicka Förhandsgranska.

  7. Välj Distribuera resurser till körningsmiljön när importen är klar.

  8. Klicka Importera.

Lägger till ServiceName i listan över tjänster i Tillåtelselista adding-servicename-to-the-allowlist-service-list

I Experience Manager-servern anger du vilka LiveCyclen du vill få åtkomst till Experience Manager-servern.

  1. Logga in som administratör till https:/[host]:'port'/system/console/configMgr.

  2. Leta reda på och klicka SDK-konfiguration för Adobe-klient. Konfigurationspanelen för Adobe LiveCycle Client SDK visas.

  3. Klicka på ±ikonen i listan Tjänstnamn och lägg till ett serviceName SendLetterForReview/SendLetterForReviewProcess.

  4. Klicka Spara.

Konfigurera e-posttjänsten configure-the-email-service

I det här fallet måste du konfigurera e-posttjänsten på LiveCycle-servern för att Correspondence Management ska kunna skicka ett e-postmeddelande.

  1. Logga in med administratörsbehörighet för LiveCycle Server-administratörer på https:/[lc server]:[lc port]/adminui.

  2. Navigera till Home > Services > Applications and Services > Service Management.

  3. Leta reda på och klicka EmailService.

  4. I SMTP-värd, konfigurera e-posttjänsten.

  5. Klicka Spara.

Konfigurera DSC-tjänsten configure-the-dsc-service

Om du vill använda Correspondence Management API hämtar du DSCSample.jar (som bifogas i det här dokumentet som en del av components.zip) och överför den till LiveCyclet. När filen DSCSample.jar har överförts till LiveCyclet använder Experience Manager-servern filen DSCSample.jar för att komma åt API:t renderLetter.

Mer information finns i Ansluta AEM Forms till Adobe LiveCycle.

  1. Uppdatera URL:en för Experience Manager-servern i cmsa.properties i DSCSample.jar, som finns på följande plats:

    DSCSample.jar\com\adobe\livecycle\cmsa.properties

  2. Ange följande parametrar i konfigurationsfilen:

    • crx.serverUrl=https:/host:port/[kontextbana]/[AEM URL]
    • crx.username= Experience Manager användarnamn
    • crx.password= Experience Manager lösenord
    • crx.appRoot=/content/apps/cm
    note note
    NOTE
    Varje gång du gör några ändringar på serversidan startar du om LiveCycle Server.

    Filen DSCSample.jar använder API:t renderLetter. Mer information om API:t renderLetter finns i Interface LetterRenderService.

Importera DSC till LiveCyle import-dsc-to-livecyle

DSCSample.jar-filen använder API:t renderLetter för att återge bokstaven som PDF byte från XML-data som DSC anger som indata. Mer information om renderLetter och andra API:er finns i Tjänst för bokstavsåtergivning.

  1. Starta Workbench och logga in.

  2. Välj Fönster > Visa vyer > Komponenter. Vyn Komponenter läggs till i Workbench ES2.

  3. Högerklicka Komponenter och markera Installera komponent.

  4. Välj DSCSample.jar via filläsaren och klicka Öppna.

  5. Högerklicka RenderWrapper och markera Startkomponent. Om komponenten startar visas en grön pil bredvid komponentnamnet.

Skicka brev för granskning send-letter-for-review

När du har konfigurerat åtgärden och knappen för att skicka brevet för granskning:

  1. Rensa webbläsarcachen.

  2. Klicka på Skapa korrespondens-gränssnittet Bokstavsgranskning och ange granskarens e-post-ID.

  3. Klicka Skicka.

skicka

Granskaren får ett e-postmeddelande från systemet med bokstaven som en bifogad fil i PDF.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2