在建立對應UI中新增自訂動作/按鈕

概覽

Correponse Management解決方案允許您將自定義操作添加到「建立對應」用戶介面。

本檔案中的案例說明如何在「建立對應使用者介面」中建立按鈕,將信件共用為附加在電子郵件中的審核PDF。

必備條件

要完成此方案,您需要:

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

方案:在「建立對應用戶介面」中建立按鈕,以發送要審核的信函

在「建立對應使用者介面」中新增含動作的按鈕(此處傳送信函以供審核),包括:

  1. 將按鈕添加到建立對應用戶介面
  2. 新增動作處理至按鈕
  3. 添加LiveCycle進程以啟用操作「處理」

將按鈕添加到建立對應用戶介面

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

  2. 在應用程式檔案夾中,建立名為defaultApp的檔案夾,其路徑/結構類似於defaultApp檔案夾(位於config檔案夾中)。 使用下列步驟建立資料夾:

    • 在以下路徑中按一下右鍵​defaultApp​資料夾,然後選擇​覆蓋節點:

      /libs/fd/cm/config/defaultApp/

      覆蓋節點

    • 請確定「覆蓋節點」對話框具有下列值:

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

      覆蓋位置: /apps/

      匹配節點類型:已選

      覆蓋節點

    • 按一下​「確定」

    • 按一下​保存全部

  3. 複製acmExtensionsConfig.xml檔案(存在於/libs分支下),位於/apps分支下。

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

    • 在acmExtensionsConfig.xml檔案上按一下滑鼠右鍵,然後選取​Copy

      複製acmExtensionsConfig.xml

    • 在「/apps/fd/cm/config/defaultApp/」的​defaultApp​資料夾上按一下滑鼠右鍵,然後選取「貼上」。

    • 按一下​保存全部

  4. 連按兩下您新在apps資料夾中建立的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>
    

    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代碼中,在移除cm_前置詞的相關標籤下使用。
    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資產編寫器構建塊包

在進行每個伺服器端更改後,重新啟動AdobeAsset Composer構建塊包。 在此案例中,伺服器端的acmExtensionsConfig.xml和ACMExtensionsMessages.properties檔案會加以編輯,因此,Adobe資產撰寫器建立區塊套裝需要重新啟動。

注意

您可能需要清除瀏覽器快取。

  1. 前往 https://[host]:[port]/system/console/bundles. 如有必要,請以管理員身份登錄。

  2. 找到Adobe資產編寫器構建塊捆綁包。 重新啟動套件:按一下「停止」,然後按一下「開始」。

    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. 在apps資料夾中,在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;</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進程以啟用操作處理

在此案例中,請啟用下列元件,這些元件是附加元件。zip檔案的一部分:

  • DSC元件罐(DSCSample.jar)
  • 發送信函以進行審核流程LCA(SendLetterForReview.lca)

下載並解壓縮components.zip檔案,以取得DSCSample.jarSendLetterForReview.lca檔案。 請依照下列程式指定使用這些檔案。

取得檔案

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

注意

只有在您處於「OSGI設定」中,且要實施的自訂類型需要LC整合時,才需要此步驟。

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

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

  2. 找到「AdobeLiveCycle客戶端SDK配置」,然後按一下「編輯」(編輯表徵圖)。 「配置」(Configurations)面板隨即開啟。

  3. 輸入以下詳細資訊,然後按一下​保存:

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

    AdobeLiveCycle客戶端SDK配置

安裝LiveCycle存檔(LCA)

啟用電子郵件服務流程的必要LiveCycle流程。

注意

若要檢視此程式的功能或建立您自己的類似程式,您需要Workbench。

  1. 以管理員身分登入Livecycle Server adminui,網址為https:/[lc server]/:[lc port]/adminui

  2. 導覽至「首頁>服務>應用程式與服務>應用程式管理」。

  3. 如果SendLetterForReview應用程式已存在,請略過此程式中的其餘步驟,否則繼續下一步驟。

    UI中的SendLetterForReview應用程式

  4. 按一下​Import

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

    選擇SendLetterForReview.lca檔案

  6. 按一下​預覽

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

  8. 按一下​Import

將ServiceName添加到AllowListed服務清單

在伺服器AEM中提及您要存取伺服器的LiveCycleAEM服務。

  1. 以管理員身份登錄到https:/[host]/:[port]/system/console/configMgr

  2. 找到並按一下​AdobeLiveCycle客戶端SDK配置。 出現「AdobeLiveCycle客戶端SDK配置」面板。

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

  4. 按一下「儲存」。

配置電子郵件服務

在此情況下,要使「通信管理」能夠發送電子郵件,請在LiveCycle伺服器中配置電子郵件服務。

  1. 使用管理員認證登入Livecycle Server adminui,位於https:/[lc server]:[lc port]/adminui

  2. 導覽至「首頁>服務>應用程式與服務>服務管理」。

  3. 找到並按一下​EmailService

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

  5. 按一下「儲存」。

配置DSC服務

若要使用Correponse Management API,請下載DSCSample.jar(附於本檔案中,作為components.zip的一部分)並將其上傳至LiveCycle伺服器。 將DSCSample.jar檔案上傳至LiveCycle伺服器後,AEM伺服器會使用DSCSample.jar檔案來存取renderLetter API。

有關詳細資訊,請參閱將AEM Forms與AdobeLiveCycle連接

  1. 更新AEMDSCSample.jar中cmsa.properties中的伺服器URL,該位置如下:

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

  2. 在配置檔案中提供以下參數:

    • crx.serverUrl=https:/[host]/:port[/contextpath][/]context [path/AEM URL]
    • crx.username=AEM用戶名
    • crx.password= AEM password
    • crx.appRoot=/content/apps/cm
    注意

    每次在伺服器端進行任何更改時,請重新啟動LiveCycle伺服器。 有關建立自己的LiveCycle元件的資訊,請參閱通過自定義DSC開發擴展LiveCycleES軟體

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

將DSC導入LiveCyle

DSCSample.jar 檔案會使用 renderLetter API,從C輸入的XML資料中,將字母轉譯為PDF位元組。如需renderLetter和其他API的詳細資訊,請參閱Letter Render Service

  1. 啟動Workbench並登入。

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

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

  4. 通過檔案瀏覽器選擇DSCSample.jar檔案,然後按一下​開啟

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

傳送信函以進行審查

在您設定傳送信函以供審核的動作和按鈕後:

  1. 清除瀏覽器快取。

  2. 在「建立對應」UI中,按一下​Letter Review​並指定審核者的電子郵件ID。

  3. 按一下​提交

sendreview

審閱者從系統收到一封電子郵件,信件作為PDF附件。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now