Lägga till en anpassad åtgärdsknapp i användargränssnittet för Skapa korrespondens add-custom-action-button-in-create-correspondence-ui
Ökning 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:
- Lägga till knappen i användargränssnittet Skapa korrespondens
- Lägga till åtgärdshantering för knappen
- 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
-
Gå till
https://'[server]:[port]'/[ContextPath]/crx/de
och logga in som administratör. -
I appmappen skapar du en mapp med namnet
defaultApp
med en sökväg/struktur som liknar defaultApp-mappen (i config-mappen). Så här skapar du mappen:-
Högerklicka på mappen defaultApp på följande sökväg och välj Overlay Node:
/libs/fd/cm/config/defaultApp/
-
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: Markerade
-
Klicka på OK.
-
Klicka på Spara alla.
-
-
Skapa en kopia av filen acmExtensionsConfig.xml (finns under grenen /libs) under grenen /apps.
-
Gå till"/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml"
-
Högerklicka på filen acmExtensionsConfig.xml och välj Kopiera.
-
Högerklicka på mappen defaultApp på "/apps/fd/cm/config/defaultApp/" och välj Klistra in.
-
Klicka på Spara alla.
-
-
Dubbelklicka på den kopia av acmExtentionsConfig.xml som du nyss skapade i mappen apps. Filen öppnas för redigering.
-
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>
-
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>
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 åtkomst 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 Letter 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. -
Klicka på 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.
-
Högerklicka på mappen locale på följande sökväg och välj Overlay Node:
/libs/fd/cm/config/defaultApp/locale
-
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: Markerade
-
Klicka på OK.
-
Klicka på Spara alla.
-
Högerklicka på följande fil och välj Kopiera:
/libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties
-
Högerklicka på mappen locale på följande sökväg och välj Klistra in:
/apps/fd/cm/config/defaultApp/locale/
Filen ACMExtensionsMessages.properties kopieras i mappen locale.
-
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.
-
Klicka på 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.
-
Gå till
https://[host]:'port'/system/console/bundles
. Logga in som administratör om det behövs. -
Leta reda på byggstenspaketet för Adobe Assets Composer. Starta om paketet: klicka på Stopp och sedan på Start.
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
Om du vill hantera anpassade åtgärder 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().
-
Gå till
https://'[server]:[port]'/[ContextPath]/crx/de
. Logga in som administratör om det behövs. -
I appmappen skapar du en mapp med namnet
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:
-
Högerklicka på mappen js på följande sökväg och välj Överläggsnod:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
-
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: Markerade
-
Klicka på OK.
-
Klicka på Spara alla.
-
-
I mappen js skapar du en fil med namnet crcustomization.js med koden för knappens åtgärdshantering enligt följande:
-
Högerklicka på mappen js 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.
-
Dubbelklicka på filen crcustomization.js för att öppna den i CRX.
-
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">×</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
LCA-processen körs på serverservern och kräver serveradressen och inloggningsuppgifterna.
-
Gå till
https://'[server]:[port]'/system/console/configMgr
och logga in som administratör. -
Leta reda på SDK-konfigurationen för Adobe-LiveCyclet och klicka på Redigera (redigeringsikonen). Panelen Konfigurationer öppnas.
-
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
Installera LiveCycle Archive (LCA) install-livecycle-archive-lca
Den process som krävs för LiveCycle som möjliggör e-posttjänstprocessen.
-
Logga in som administratör för LiveCycle® Server-administratörer på
https:/[lc server]/:[lc port]/adminui
. -
Navigera till Hem > Tjänster > Program och tjänster > Programhantering.
-
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.
-
Klicka på Importera.
-
Klicka på Välj Arkiv och välj SendLetterForReview.lca.
-
Klicka på Förhandsgranska.
-
Välj Distribuera resurser till körningsmiljön när importen är klar.
-
Klicka på 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.
-
Logga in som administratör på
https:/[host]:'port'/system/console/configMgr
. -
Leta reda på och klicka på Adobe LiveCycle Client SDK Configuration. Konfigurationspanelen för Adobe LiveCycle Client SDK visas.
-
Klicka på ±ikonen i listan Tjänstnamn och lägg till ett serviceName SendLetterForReview/SendLetterForReviewProcess.
-
Klicka på 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.
-
Logga in med administratörsuppgifter för LiveCycle Server-administratörer på
https:/[lc server]:[lc port]/adminui
. -
Navigera till Hem > Tjänster > Program och tjänster > Tjänsthantering.
-
Leta upp och klicka på EmailService.
-
Konfigurera e-posttjänsten i SMTP-värden.
-
Klicka på 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-LiveCyclet.
-
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
-
Ange följande parametrar i konfigurationsfilen:
- crx.serverUrl=https:/host:port/[kontextsökväg]/[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änsten Letter Render.
-
Starta Workbench och logga in.
-
Välj Fönster > Visa vyer > Komponenter. Vyn Komponenter läggs till i Workbench ES2.
-
Högerklicka på Komponenter och välj Installera komponent.
-
Markera filen DSCSample.jar i filläsaren och klicka på Öppna.
-
Högerklicka på RenderWrapper och välj Start Component. 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:
-
Rensa webbläsarcachen.
-
Klicka på Bokstavsgranskning i användargränssnittet för att skapa korrespondens och ange granskarens e-post-ID.
-
Klicka på Skicka.
Granskaren får ett e-postmeddelande från systemet med bokstaven som en bifogad fil i PDF.