在建立通信UI中新增自訂動作/按鈕 add-custom-action-button-in-create-correspondence-ui
概觀 overview
通信管理解決方案可讓您將自訂動作新增至「建立通信」使用者介面。
本檔案中的案例說明如何在「建立通信使用者介面」中建立按鈕,以共用信函作為附加至電子郵件的審核PDF。
必備條件 prerequisites
若要完成此案例,您需要下列項目:
- CRX和JavaScript相關知識
- LiveCycle伺服器
案例:在建立通信用戶介面中建立按鈕,以發送信函以供審核 scenario-create-the-button-in-the-create-correspondence-user-interface-to-send-a-letter-for-review
將具有動作的按鈕(此處傳送信函以供檢閱)新增至「建立通信使用者介面」,包括:
- 將按鈕新增至建立通信使用者介面
- 將動作處理新增至按鈕
- 新增LiveCycle程式以啟用動作「處理」
將按鈕新增至建立通信使用者介面 add-the-button-to-the-create-correspondence-user-interface
-
前往
https://[server]:[port]/[ContextPath]/crx/de
並以管理員身分登入。 -
在應用程式資料夾中,建立名為
defaultApp
路徑/結構類似defaultApp資料夾(位於設定資料夾中)。 使用下列步驟建立資料夾:-
以滑鼠右鍵按一下 defaultApp 資料夾(位於以下路徑),然後選取 覆蓋節點:
/libs/fd/cm/config/defaultApp/
-
確定「覆蓋節點」對話方塊有下列值:
路徑: /libs/fd/cm/config/defaultApp/
覆蓋位置: /apps/
匹配節點類型: 已勾選
-
按一下 「確定」。
-
按一下 全部儲存.
-
-
複製/apps分支下的acmExtensionsConfig.xml檔案(存在於/libs分支下)。
-
前往「/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml」
-
以滑鼠右鍵按一下acmExtensionsConfig.xml檔案,然後選取 複製.
-
以滑鼠右鍵按一下 defaultApp 資料夾(位於「/apps/fd/cm/config/defaultApp/,」),然後選取 貼上.
-
按一下 全部儲存.
-
-
連按兩下您新在應用程式資料夾中建立的acmExtentionsConfig.xml副本。 檔案隨即開啟供編輯。
-
找出下列程式碼:
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>
-
若要傳送電子郵件,您可以使用LiveCycleForms Workflow。 在acmExtensionsConfig.xml中的modelExtension標籤下新增customAction標籤,如下所示:
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>
modelExtension標籤有一組customAction子標籤,用於配置操作按鈕的操作、權限和外觀。 以下是customAction設定標籤的清單:
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 名稱 說明 名稱 要執行的動作的英數字元名稱。 此標籤的值為必要值,必須是唯一的(在modelExtension標籤內),且必須以字母開頭。 標籤 要在動作按鈕上顯示的標籤 工具提示 按鈕的工具提示文字,當使用者將游標暫留在按鈕上時,就會顯示此文字。 styleName 應用於操作按鈕的自定義樣式的名稱。 permissionName 只有當使用者擁有permissionName所指定的權限時,才會顯示對應的動作。 將permissionName指定為 forms-users
,所有使用者都能存取此選項。actionHandler 用戶按一下按鈕時調用的ActionHandler類的完全限定名稱。 除了上述參數外,還可能有其他與customAction相關聯的設定。 這些附加配置可通過CustomAction對象提供給處理程式。
table 0-row-2 1-row-2 2-row-2 3-row-2 名稱 說明 serviceName 如果customAction包含名為serviceName的子標籤,則按一下相關按鈕/連結時,將調用一個進程,該進程的名稱由serviceName標籤表示。 確保此進程與Letter PostProcess具有相同的簽名。 在服務名稱中新增「Forms Workflow->」首碼。 標籤名稱中包含cm_前置詞的參數 如果customAction包含以名稱cm_開頭的子標籤,則在後置處理(無論是信函後置處理或serviceName標籤所代表的特殊處理)中,這些參數可在輸入XML代碼中的相關標籤下使用,並刪除cm_前置詞。 actionName 每當貼文處理因點按而發生時,提交的XML都會在標籤下方包含一個特殊標籤,其名稱為使用者動作的名稱。 -
按一下 全部儲存.
在/apps分支中建立具有屬性檔案的區域設定資料夾 create-a-locale-folder-with-properties-file-in-the-apps-branch
ACMExtensionsMessages.properties檔案包含「建立通信」用戶介面中各欄位的標籤和工具提示消息。 為了讓自訂動作/按鈕正常運作,請在/apps分支中製作此檔案的復本。
-
以滑鼠右鍵按一下 地區 資料夾(位於以下路徑),然後選取 覆蓋節點:
/libs/fd/cm/config/defaultApp/locale
-
確定「覆蓋節點」對話方塊有下列值:
路徑: /libs/fd/cm/config/defaultApp/locale
覆蓋位置: /apps/
匹配節點類型: 已勾選
-
按一下 「確定」。
-
按一下 全部儲存.
-
按一下右鍵以下檔案並選擇 複製:
/libs/fd/cm/config/defaultApp/locale/ACMExtensionsMessages.properties
-
以滑鼠右鍵按一下 地區 資料夾(位於以下路徑),然後選取 貼上:
/apps/fd/cm/config/defaultApp/locale/
ACMExtensionsMessages.properties檔案是在地區設定資料夾中複製的。
-
要將新添加的自定義操作/按鈕的標籤本地化,請為中的相關區域設定建立ACMExtensionsMessages.properties檔案
/apps/fd/cm/config/defaultApp/locale/
.例如,若要將本文中建立的自訂動作/按鈕翻譯為當地語系化,請建立名為ACMExtensionsMessages_fr.properties的檔案,並輸入下列項目:
loc.letterInstance.letterreview.label=Revue De Lettre
同樣地,您可以在此檔案中新增更多屬性,例如工具提示和樣式。
-
按一下 全部儲存.
重新啟動Adobe資產撰寫器建置區塊套件組合 restart-the-adobe-asset-composer-building-block-bundle
進行每個伺服器端變更後,請重新啟動Adobe資產撰寫器建置區塊套件組合。 在此案例中,伺服器端的acmExtensionsConfig.xml和ACMExtensionsMessages.properties檔案經過編輯,因此Adobe資產撰寫器建置區塊套件組合需要重新啟動。
-
前往
https://[host]:[port]/system/console/bundles
. 如有必要,請以管理員身分登入。 -
找出Adobe資產撰寫器建置區塊套件組合。 重新啟動套件組合:按一下停止,然後按一下開始。
重新啟動Adobe資產撰寫器建置區塊套件組合後,自訂按鈕會顯示在建立通信使用者介面中。 您可以在建立通信使用者介面中開啟信函,以預覽自訂按鈕。
將動作處理新增至按鈕 add-action-handling-to-the-button
預設情況下,建立通信用戶介面在cm.domain.js檔案中的以下位置具有ActionHandler的實現:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccr/js/cm.domain.js
對於自訂動作處理,請在CRX的/apps分支中建立cm.domain.js檔案的覆蓋。
在按一下動作/按鈕時處理動作/按鈕包含下列邏輯:
- 將新新增的動作設為可見/隱藏:透過覆寫actionVisible()函式來完成。
- 啟用/禁用新添加的操作:透過覆寫actionEnabled()函式來完成。
- 使用者按一下按鈕時的實際動作處理:覆寫handleAction()函式的實作。
-
前往
https://[server]:[port]/[ContextPath]/crx/de
. 如有必要,請以管理員身分登入。 -
在應用程式資料夾中,建立名為
js
(位於CRX的/apps分支中,其結構類似於下列資料夾:/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
使用下列步驟建立資料夾:
-
以滑鼠右鍵按一下 js 資料夾(位於以下路徑),然後選取 覆蓋節點:
/libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
-
確定「覆蓋節點」對話方塊有下列值:
路徑: /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
覆蓋位置: /apps/
匹配節點類型: 已勾選
-
按一下 「確定」。
-
按一下 全部儲存.
-
-
在js資料夾中,使用按鈕的動作處理程式碼,建立名為ccrcustomization.js的檔案,步驟如下:
-
以滑鼠右鍵按一下 js 資料夾(位於以下路徑),然後選取 建立>建立檔案:
/apps/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js
將檔案命名為ccrcustomization.js。
-
連按兩下ccrcustomization.js檔案,以在CRX中開啟它。
-
在檔案中,貼上下列程式碼,然後按一下 全部儲存:
code language-none /* 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">×</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>';
-
新增LiveCycle程式以啟用動作 處理 add-the-livecycle-process-to-enable-action-span-class-acrolinxcursormarker-span-handling
在此案例中,請啟用下列元件,這些元件是附加元件.zip檔案的一部分:
- DSC元件罐(
DSCSample.jar
) - 發送供審查流程LCA(
SendLetterForReview.lca
)
下載並解壓縮 components.zip
檔案 DSCSample.jar
和 SendLetterForReview.lca
檔案。 按照以下過程中的指定使用這些檔案。
配置LiveCycle伺服器以運行LCA進程 configure-the-livecycle-server-to-run-the-lca-process
LCA進程在LiveCycle伺服器上運行,需要伺服器地址和登錄憑據。
-
前往
https://[server]:[port]/system/console/configMgr
並以管理員身分登入。 -
找出AdobeLiveCycle用戶端SDK設定,然後按一下 編輯 (編輯圖示)。 「配置」面板隨即開啟。
-
輸入以下詳細資訊,然後按一下 儲存:
- 伺服器Url:操作處理程式代碼使用的Send For Review服務的LC伺服器的URL。
- 使用者名稱:LC伺服器的管理員用戶名
- 密碼:管理員用戶名的密碼
安裝LiveCycle歸檔(LCA) install-livecycle-archive-lca
啟用電子郵件服務流程所需的LiveCycle流程。
-
以管理員身分登入Livecycle Server adminui,網址為
https:/[lc server]/:[lc port]/adminui
. -
導覽至 首頁>服務>應用程式和服務>應用程式管理.
-
如果SendLetterForReview應用程式已存在,請跳過此過程中的其餘步驟,否則繼續執行後續步驟。
-
按一下 匯入.
-
按一下 選擇檔案 選取 SendLetterForReview.lca.
-
按一下 預覽.
-
選擇 匯入完成時,將資產部署至執行階段.
-
按一下 匯入.
將ServiceName添加到AllowListed服務清單 adding-servicename-to-the-allowlisted-service-list
在AEM伺服器中提及您要存取AEM伺服器的LiveCycle服務。
-
以管理員身分登入
https:/[host]/:[port]/system/console/configMgr
. -
找到並按一下 AdobeLiveCycle用戶端SDK設定. AdobeLiveCycle用戶端SDK設定面板隨即顯示。
-
在「服務名稱」清單中,按一下+圖示並新增服務名稱 SendLetterForReview/SendLetterForReviewProcess.
-
按一下「儲存」。
設定電子郵件服務 configure-the-email-service
在此案例中,若要讓通信管理能夠傳送電子郵件,請在LiveCycle伺服器中設定電子郵件服務。
-
使用管理員憑證登入Livecycle Server adminui,網址為
https:/[lc server]:[lc port]/adminui
. -
導覽至 首頁>服務>應用程式和服務>服務管理.
-
找到並按一下 EmailService.
-
在 SMTP主機,設定電子郵件服務。
-
按一下「儲存」。
配置DSC服務 configure-the-dsc-service
若要使用通信管理API,請下載 DSCSample.jar
(附於本檔案,作為 components.zip
)並上傳至LiveCycle伺服器。 在 DSCSample.jar
檔案上傳至LiveCycle伺服器,AEM伺服器會使用 DSCSample.jar
檔案來存取renderLetter API。
如需詳細資訊,請參閱 將AEM Forms與AdobeLiveCycle.
-
更新cmsa.properties中的AEM伺服器URL,位於
DSCSample.jar
,位於下列位置:DSCSample.jar\com\adobe\livecycle\cmsa.properties
-
在設定檔案中提供下列參數:
- crx.serverUrl=https:/[主機]/:[埠]/[內容路徑]/[AEM URL]
- crx.username= AEM使用者名稱
- crx.password= AEM密碼
- crx.appRoot=/content/apps/cm
note note NOTE 每次在伺服器端進行任何更改時,請重新啟動伺服器。 此
DSCSample.jar
檔案使用renderLetter
API。 如需renderLetter API的詳細資訊,請參閱 介面LetterRenderService.
在JEE上將DSC匯入AEM Forms import-dsc-to-livecyle
DSCSample.jar
檔案使用 renderLetter
從C作為輸入提供的XML資料中,將字母轉譯為PDF位元組的API。 如需renderLetter和其他API的詳細資訊,請參閱 信函轉譯服務.
-
啟動Workbench並登入。
-
選擇 「窗口」>「顯示視圖」>「元件」. 元件檢視會新增至Workbench ES2。
-
按一下右鍵 元件 選取 安裝元件.
-
選取
DSCSample.jar
檔案,然後按一下 開啟. -
按一下右鍵 RenderWrapper 選取 開始元件. 如果元件啟動,元件名稱旁會出現綠色箭頭。
發送信函以供審核 send-letter-for-review
設定好傳送信函以供審核的動作和按鈕後:
-
清除瀏覽器快取。
-
在建立通信UI中,按一下 信件審閱 並指定審核者的電子郵件ID。
-
按一下 提交.
審核者從系統收到一封電子郵件,信件作為PDF附件。