在建立通信UI中新增自訂動作按鈕

概覽

通信管理解決方案可讓您將自訂動作新增至「建立通信」使用者介面。

本檔案中的案例說明如何在「建立通信使用者介面」中建立按鈕，以共用附加至電子郵件的審核PDF格式信函。

必備條件

若要完成此案例，您需要下列項目：

• CRX和JavaScript相關知識
• LiveCycle伺服器

案例：在建立通信用戶介面中建立按鈕，以發送信函以供審核

將具有動作的按鈕（此處傳送信函以供檢閱）新增至「建立通信使用者介面」，包括：

1. 將按鈕新增至建立通信使用者介面
2. 將動作處理新增至按鈕
3. 新增LiveCycle程式以啟用動作處理

將按鈕新增至建立通信使用者介面

1. 前往https://'[server]:[port]'/[ContextPath]/crx/de並以管理員身分登入。

2. 在應用程式資料夾中，建立名為defaultApp的資料夾，其路徑/結構類似於defaultApp資料夾（位於設定資料夾中）。 使用下列步驟建立資料夾：

   1. 按一下右鍵以下路徑的​defaultApp​資料夾，然後選擇​覆蓋節點:

      /libs/fd/cm/config/defaultApp/

      

   2. 確定「覆蓋節點」對話方塊有下列值：

      路徑： /libs/fd/cm/config/defaultApp/

      覆蓋位置： /apps/

      匹配節點類型：已 勾選

      

   3. 按一下​「確定」。

   4. 按一下「全部保存」。

3. 複製/apps分支下的acmExtensionsConfig.xml檔案（存在於/libs分支下）。

   1. 前往「/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml」

   2. 以滑鼠右鍵按一下acmExtensionsConfig.xml檔案，然後選取​Copy。

      

   3. 按一下右鍵位於「/apps/fd/cm/config/defaultApp/，」的​defaultApp​資料夾，然後選擇​貼上。

   4. 按一下「全部保存」。

4. 連按兩下您新在應用程式資料夾中建立的acmExtentionsConfig.xml副本。 檔案隨即開啟供編輯。

5. 找出下列程式碼：

   <?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. 若要傳送電子郵件，您可以使用LiveCycleForms Workflow。 在acmExtensionsConfig.xml中的modelExtension標籤下新增customAction標籤，如下所示：

    <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設定標籤的清單：

   名稱	說明
   名稱	要執行的動作的英數字元名稱。 此標籤的值為必要值，必須是唯一的（在modelExtension標籤內），且必須以字母開頭。
   標籤	要在動作按鈕上顯示的標籤
   工具提示	按鈕的工具提示文字，當使用者將游標暫留在按鈕上時，就會顯示此文字。
   styleName	應用於操作按鈕的自定義樣式的名稱。
   permissionName	只有當使用者擁有permissionName所指定的權限時，才會顯示對應的動作。 將permissionName指定為forms-users時，所有用戶都可以訪問此選項。
   actionHandler	用戶按一下按鈕時調用的ActionHandler類的完全限定名稱。

   除了上述參數外，還可能有其他與customAction相關聯的設定。 這些附加配置可通過CustomAction對象提供給處理程式。

   名稱	說明
   serviceName	如果customAction包含名為serviceName的子標籤，則按一下相關按鈕/連結時，將調用一個進程，該進程的名稱由serviceName標籤表示。 確保此進程與Letter PostProcess具有相同的簽名。 在服務名稱中新增「Forms Workflow->」首碼。
   標籤名稱中包含cm_前置詞的參數	如果customAction包含以名稱cm_開頭的子標籤，則在後置處理（無論是信函後置處理或serviceName標籤所代表的特殊處理）中，這些參數可在輸入XML代碼中刪除的相關標籤下使用。
   actionName	每當貼文處理因點按而發生時，提交的XML都會在標籤下方包含一個特殊標籤，其名稱為使用者動作的名稱。

7. 按一下「全部保存」。

在/apps分支中建立具有屬性檔案的區域設定資料夾

ACMExtensionsMessages.properties檔案包含「建立通信」用戶介面中各欄位的標籤和工具提示消息。 為了讓自訂動作/按鈕正常運作，請在/apps分支中製作此檔案的復本。

1. 按一下右鍵以下路徑上的​locale​資料夾，然後選擇​覆蓋節點:

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

2. 確定「覆蓋節點」對話方塊有下列值：

   路徑： /libs/fd/cm/config/defaultApp/locale

   覆蓋位置： /apps/

   匹配節點類型：已 勾選

3. 按一下​「確定」。

4. 按一下「全部保存」。

5. 按一下右鍵以下檔案，然後選擇​Copy:

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

6. 按一下右鍵以下路徑上的​locale​資料夾，然後選擇​貼上:

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

   ACMExtensionsMessages.properties檔案是在地區設定資料夾中複製的。

7. 要將新添加的自定義操作/按鈕的標籤本地化，請為/apps/fd/cm/config/defaultApp/locale/中的相關區域設定建立ACMExtensionsMessages.properties檔案。

   例如，若要將本文中建立的自訂動作/按鈕翻譯為當地語系化，請建立名為ACMExtensionsMessages_fr.properties的檔案，並輸入下列項目：

   loc.letterInstance.letterreview.label=Revue De Lettre

   同樣地，您可以在此檔案中新增更多屬性，例如工具提示和樣式。

8. 按一下「全部保存」。

重新啟動Adobe資產撰寫器建置區塊套件組合

進行每個伺服器端變更後，請重新啟動Adobe資產撰寫器建置區塊套件組合。 在此案例中，伺服器端的acmExtensionsConfig.xml和ACMExtensionsMessages.properties檔案經過編輯，因此Adobe資產撰寫器建置區塊套件組合需要重新啟動。

1. 前往 https://[host]:'port'/system/console/bundles. 如有必要，請以管理員身分登入。

2. 找出Adobe資產撰寫器建置區塊套件組合。 重新啟動套件組合：按一下停止，然後按一下開始。

   

重新啟動Adobe資產撰寫器建置區塊套件組合後，自訂按鈕會顯示在建立通信使用者介面中。 您可以在建立通信使用者介面中開啟信函，以預覽自訂按鈕。

將動作處理新增至按鈕

預設情況下，建立通信用戶介面在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()函式的實作。

1. 前往 https://'[server]:[port]'/[ContextPath]/crx/de. 如有必要，請以管理員身分登入。

2. 在應用程式資料夾中，在CRX的/apps分支中建立名為js的資料夾，其結構類似於以下資料夾：

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

   使用下列步驟建立資料夾：

   1. 以滑鼠右鍵按一下以下路徑的​js​資料夾，然後選取​覆蓋節點:

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

   2. 確定「覆蓋節點」對話方塊有下列值：

      路徑： /libs/fd/cm/ccr/gui/components/admin/clientlibs/ccrui/js

      覆蓋位置： /apps/

      匹配節點類型：已 勾選

   3. 按一下​「確定」。

   4. 按一下「全部保存」。

3. 在js資料夾中，使用按鈕的動作處理程式碼，建立名為ccrcustomization.js的檔案，步驟如下：

   1. 按一下右鍵以下路徑的​js​資料夾，然後選擇​建立>建立檔案:

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

      將檔案命名為ccrcustomization.js。

   2. 連按兩下ccrcustomization.js檔案，以在CRX中開啟它。

   3. 在檔案中，貼上下列程式碼，然後按一下​儲存全部:

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

添加LiveCycle進程以啟用操作

在此案例中，請啟用下列元件，這些元件是附加元件.zip檔案的一部分：

• DSC元件jar(DSCSample.jar)
• 發送供審核流程LCA的信函(SendLetterForReview.lca)

下載並解壓縮components.zip檔案，以取得DSCSample.jar和SendLetterForReview.lca檔案。 按照以下過程中的指定使用這些檔案。
取得檔案

配置LiveCycle伺服器以運行LCA進程

LCA進程在LiveCycle伺服器上運行，需要伺服器地址和登錄憑據。

1. 前往https://'[server]:[port]'/system/console/configMgr並以管理員身分登入。

2. 找到「AdobeLiveCycle用戶端SDK設定」 ，然後按一下「編輯」（編輯圖示）。 「配置」面板隨即開啟。

3. 輸入以下詳細資訊，然後按一下​Save:

   • 伺服器Url:操作處理程式代碼使用的Send For Review服務的LC伺服器的URL。
   • 使用者名稱:LC伺服器的管理員用戶名
   • 密碼:管理員用戶名的密碼

   

安裝LiveCycle歸檔(LCA)

啟用電子郵件服務流程所需的LiveCycle流程。

1. 以管理員身分登入以在https:/[lc server]/:[lc port]/adminuiLiveCycle® Server adminui。

2. 導航至​首頁>服務>應用程式和服務>應用程式管理。

3. 如果SendLetterForReview應用程式已存在，請跳過此過程中的其餘步驟，否則繼續執行後續步驟。

   

4. 按一下​Import。

5. 按一下​選擇檔案​並選擇SendLetterForReview.lca。

   

6. 按一下「預覽」。

7. 選取​匯入完成時將資產部署至執行階段。

8. 按一下​Import。

將ServiceName添加到允許清單服務清單

在Experience Manager伺服器中提及您要存取Experience Manager伺服器的LiveCycle服務。

1. 以管理員身分登入https:/[host]:'port'/system/console/configMgr。

2. 找到並按一下​AdobeLiveCycle用戶端SDK設定。 AdobeLiveCycle用戶端SDK設定面板隨即顯示。

3. 在「服務名稱」清單中，按一下+表徵圖並添加服務名​SendLetterForReview/SendLetterForReviewProcess。

4. 按一下「儲存」。

設定電子郵件服務

在此案例中，若要讓通信管理能夠傳送電子郵件，請在LiveCycle伺服器中設定電子郵件服務。

1. 使用管理員憑證登入，以在https:/[lc server]:[lc port]/adminuiLiveCycle伺服器adminui。

2. 導航至​首頁>服務>應用程式和服務>服務管理。

3. 找到並按一下​EmailService。

4. 在​SMTP主機​中，配置電子郵件服務。

5. 按一下「儲存」。

配置DSC服務

若要使用通信管理API，請下載DSCSample.jar（附於本檔案中，作為components.zip的一部分）並上傳至LiveCycle伺服器。 將DSCSample.jar檔案上傳到LiveCycle伺服器後，Experience Manager伺服器使用DSCSample.jar檔案來訪問renderLetter API。

如需詳細資訊，請參閱將AEM Forms與AdobeLiveCycle連線。

1. 更新DSCSample.jar中cmsa.properties中的Experience Manager伺服器URL，該位置如下：

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

2. 在設定檔案中提供下列參數：

   • crx.serverUrl=https:/host:port/[內容路徑]/[AEM URL]
   • crx.username =Experience Manager使用者名稱
   • crx.password =Experience Manager密碼
   • crx.appRoot =/content/apps/cm
   注意

   每次在伺服器端進行任何變更時，請重新啟動LiveCycle伺服器。

   DSCSample.jar檔案使用renderLetter API。 如需renderLetter API的詳細資訊，請參閱介面LetterRenderService。

將DSC匯入LiveCyle

DSCSample.jar檔案使用renderLetter API從DSC作為輸入提供的XML資料中，將信函轉譯為PDF位元組。 如需renderLetter和其他API的詳細資訊，請參閱Letter Render Service。

1. 啟動Workbench並登入。

2. 選擇​窗口>顯示視圖>元件。 元件檢視會新增至Workbench ES2。

3. 按一下右鍵​元件​並選擇​安裝元件。

4. 通過檔案瀏覽器選擇​DSCSample.jar​檔案，然後按一下​Open。

5. 按一下右鍵​RenderWrapper​並選擇​啟動元件。 如果元件啟動，元件名稱旁會出現綠色箭頭。

發送信函以供審核

設定好傳送信函以供審核的動作和按鈕後：

1. 清除瀏覽器快取。

2. 在「建立通信」UI中，按一下「信函審核」並指定審核者的電子郵件ID。

3. 按一下​Submit。

審核者從系統收到一封電子郵件，信件為PDF附件。

Business.Adobe.com資源

Multichannel Communication Ecommerce Integrations Content Insights Cms Cloud Managed Cloud Dynamic Forms