「通信を作成」UI へのカスタムアクションまたはボタンの追加

概要

Correspondence Management ソリューションでは、「通信を作成」UI にカスタムアクションを追加できます。

このドキュメントのシナリオでは、通信を作成ユーザーインターフェイスでボタンを作成して、レビュー用のPDFとしてレターを電子メールに添付して共有する方法を説明します。

前提条件

このシナリオを完了するには、以下が必要になります。

  • CRX および JavaScript についての知識
  • LiveCycle サーバー

シナリオ:通信を作成ユーザーインターフェイスにボタンを作成してレビュー用のレターを送信する

通信を作成ユーザーインターフェイスにボタンを追加して、ボタンのアクション(ここではレビュー用のレターの送信)を指定するには、次の操作を行います。

  1. 通信を作成ユーザーインターフェイスにボタンを追加します
  2. ボタンにアクション処理を追加します
  3. アクション「処理」を有効にするLiveCycleプロセスの追加

通信を作成ユーザーインターフェイスへのボタンの追加

  1. https://[server]:[port]/[ContextPath]/crx/deに移動し、管理者としてログインします。

  2. appsフォルダーに、(configフォルダー内の)defaultAppフォルダーに類似したパス/構造でdefaultAppという名前のフォルダーを作成します。 フォルダーの作成手順は次のとおりです。

    • 次のパスにある​defaultApp​フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。

      /libs/fd/cm/config/defaultApp/

      ノードをオーバーレイ

    • ノードをオーバーレイダイアログに次の値が表示されていることを確認します。

      パス: /libs/fd/cm/config/defaultApp/

      オーバーレイの場所: /apps/

      ノードタイプを一致させる: オン

      ノードをオーバーレイ

    • OK」をクリックします。

    • すべて保存」をクリックします。

  3. acmExtensionsConfig.xml ファイル(/libs branch の下)のコピーを /apps branch の下に作成します。

    • 「/libs/fd/cm/config/defaultApp/acmExtensionsConfig.xml」に移動します。

    • acmExtensionsConfig.xmlファイルを右クリックし、「コピー」を選択します。

      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. レターを電子メールで送信するには、LiveCycle Forms ワークフローを使用します。次のように、 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 設定タグの一覧です。

    Name 説明
    name 実行するアクションの英数字の名前。 このタグの値は必須です。modelExtension タグ内で一意であり、アルファベットで始まる必要があります。
    label アクションボタンに表示するラベル。
    tooltip ボタンのツールチップテキスト。ボタンにカーソルを置くと表示されます。
    styleName アクションボタンに適用されるカスタムスタイルの名前。
    permissionName 対応するアクションは、ユーザーがpermissionNameで指定された権限を持っている場合にのみ表示されます。 permissionNameをforms-usersと指定すると、すべてのユーザーがこのオプションにアクセスできます。
    actionHandler ユーザーがボタンをクリックしたときに呼び出されるActionHandlerクラスの完全修飾名。

    上記のパラメーター以外に、customAction には追加の設定を関連付けることができます。これらの追加の設定は、 CustomActionオブジェクトを通じてハンドラーで使用できます。

    名前 説明
    serviceName customActionにserviceNameという名前の子タグが含まれている場合、関連するボタンまたはリンクをクリックすると、serviceNameタグで表される名前でプロセスが呼び出されます。 このプロセスにレターのPostProcessと同じ署名が含まれていることを確認します。 サービス名に「Forms Workflow ->」プレフィックスを追加します。
    タグ名にcm_プレフィックスを含むパラメーター customActionにcm_で始まる子タグが含まれている場合、後処理(レター後処理またはserviceNameタグで表される特殊な処理)では、これらのパラメーターは、cm_プレフィックスが削除された関連タグの下の入力XMLコードで使用できます。
    actionName クリックによって後処理が行われるたびに、送信されたXMLには、ユーザーアクションの名前を持つタグの下に、名前を持つ特殊なタグが含まれます。
  7. すべて保存」をクリックします。

/apps branch 内のプロパティファイルを使用したローカルフォルダーの作成

ACMExtensionsMessages.propertiesファイルには、通信を作成ユーザーインターフェイスの様々なフィールドのラベルとツールチップメッセージが含まれています。 カスタマイズしたアクションやボタンを機能させるために、/apps branch にこのファイルのコピーを作成します。

  1. 次のパスにある​locale​フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。

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

  2. ノードをオーバーレイダイアログに次の値が表示されていることを確認します。

    パス: /libs/fd/cm/config/defaultApp/locale

    オーバーレイの場所: /apps/

    ノードタイプを一致させる: オン

  3. OK」をクリックします。

  4. すべて保存」をクリックします。

  5. 次のファイルを右クリックし、「コピー」を選択します。

    /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 Asset Composer 構築ブロックバンドルの再起動

サーバー側の変更をすべて加えた後、Adobe Asset Composer 構築ブロックバンドルを再起動します。このシナリオでは、サーバー側のacmExtensionsConfig.xmlファイルとACMExtensionsMessages.propertiesファイルが編集されるので、AdobeのAsset Composer構築ブロックバンドルを再起動する必要があります。

メモ

ブラウザーのキャッシュをクリアする必要が生じる場合があります。

  1. https://[host]:[port]/system/console/bundles にアクセスします。必要に応じて、管理者としてログインします。

  2. Adobe Asset Composer 構築ブロックバンドルを検索します。バンドルを再起動します。「停止」をクリックした後、「開始」をクリックします。

    Adobe Asset Composer 構築ブロック

Adobe Asset Composer 構築ブロックバンドルを再起動した後、通信を作成ユーザーインターフェイスにカスタムボタンが表示されます。通信を作成ユーザーインターフェイスでレターを開いて、カスタムボタンをプレビューできます。

ボタンへのアクション処理の追加

通信を作成ユーザーインターフェイスはデフォルトで、次の場所にある cm.domain.js ファイルの ActionHandler を実装します。

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

カスタムのアクション処理の場合は、CRX の /apps branch にある cm.domain.js ファイルのオーバーレイを作成します。

アクション/ボタンをクリックする際のアクション/ボタンの処理には、次のロジックが含まれます。

  • 新しく追加したアクションを表示または非表示にする:actionVisible() 関数をオーバーライドして実行します。
  • 新しく追加されたアクションを有効または無効にする:actionEnabled()関数を上書きして実行されます。
  • ユーザーがボタンをクリックした場合の実際のアクション処理:handleAction()関数の実装を上書きして実行されます。
  1. https://[server]:[port]/[ContextPath]/crx/de にアクセスします。必要に応じて、管理者としてログインします。

  2. apps フォルダーに、次のフォルダーに類似した構造で、CRX の /apps branch に 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. OK」をクリックします。

    4. すべて保存」をクリックします。

  3. 次の手順を使用して、ボタンのアクション処理のコードを含むccrcustomization.jsという名前のファイルを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 プロセスの追加によるアクション処理の有効化

このシナリオでは、次のコンポーネントを有効にします。これは、添付されたcomponents.zipファイルに含まれています。

  • DSCコンポーネントjar(DSCSample.jar)
  • レビュープロセスLCA(SendLetterForReview.lca)用の送信レター

components.zipファイルをダウンロードして解凍し、DSCSample.jarファイルとSendLetterForReview.lcaファイルを取得します。 これらのファイルは、次の手順に従って使用します。

ファイルを入手

LiveCycle サーバーの設定と LCA プロセスの実行

メモ

この手順は、「 OSGiセットアップ」を使用し、実装するカスタマイズのタイプにLC統合が必要な場合にのみ必要です。

LCA プロセスは LiveCycle サーバー上で実行され、サーバーアドレスとログイン情報が必要になります。

  1. https://[server]:[port]/system/console/configMgrに移動し、管理者としてログインします。

  2. Adobe LiveCycle Client SDK Configuration を見つけて、「編集」(編集アイコン)をクリックします。「設定」パネルが開きます。

  3. 次の詳細を入力し、「保存」をクリックします。

    • サーバーUrl:アクションハンドラーコードがSend For Reviewサービスを使用するLCサーバーのURL。
    • ユーザー名:LC Serverの管理者ユーザー名
    • パスワード:管理者ユーザー名のパスワード

    Adobe LiveCycle Client SDK Configuration

LiveCycle Archive(LCA)のインストール

電子メールサービスのLiveCycleを可能にする必須のプロセス。

メモ

このプロセスの処理を表示するか、独自の類似プロセスを作成するには、Workbench が必要になります。

  1. https:/[lc server]/:[lc port]/adminuiで、Livecycle Server adminuiに管理者としてログインします。

  2. ホーム/サービス/アプリケーションおよびサービス/アプリケーションの管理​に移動します。

  3. SendLetterForReviewアプリケーションが既に存在する場合は、この手順の残りの手順をスキップします。存在しない場合は、次の手順に進みます。

    UI 内の SendLetterForReview アプリケーション

  4. 読み込み」をクリックします。

  5. ファイル​を選択」をクリックし、SendLetterForReview.lca​を選択します。

    SendLetterForReview.lca ファイルを選択します

  6. プレビュー」をクリックします。

  7. 「読み込みの完了時にアセットをランタイムにデプロイ​」を選択します。

  8. 読み込み」をクリックします。

「許可リストに加える・サービス」リストへのServiceNameの追加

AEM サーバーにアクセスする必要のある LiveCycle サービスを AEM サーバーで指定します。

  1. https:/[host]/:[port]/system/console/configMgrに管理者としてログインします。

  2. AdobeLiveCycleクライアントSDK設定」を探してクリックします。 AdobeLiveCycleのClient SDK Configurationパネルが表示されます。

  3. 「サービス名」リストで+アイコンをクリックし、serviceName SendLetterForReview/SendLetterForReviewProcess​を追加します。

  4. 保存」をクリックします。

電子メールサービスの設定

このシナリオでは、Correspondence Management で電子メールを送信できるようにするため、LiveCycle サーバーで電子メールサービスを設定します。

  1. https:/[lc server]:[lc port]/adminuiで、Livecycle Server adminuiに管理者の資格情報を使用してログインします。

  2. ホーム/サービス/アプリケーションおよびサービス/サービスの管理​に移動します。

  3. 電子メールサービス」を検索してクリックします。

  4. SMTP Host​で、電子メールサービスを設定します。

  5. 保存」をクリックします。

DSC サービスの設定

Correspondence Management APIを使用するには、DSCSample.jar(このドキュメントに添付されているcomponents.zipの一部として添付)をダウンロードし、LiveCycleサーバーにアップロードします。 DSCSample.jarファイルがLiveCycleサーバーにアップロードされた後、AEMサーバーはDSCSample.jarファイルを使用してrenderLetter APIにアクセスします。

詳しくは、「AEM FormsとAdobeLiveCycleの接続」を参照してください。

  1. DSCSample.jarのcmsa.propertiesのAEMサーバーURLを更新します。次の場所にあります。

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

  2. 設定ファイルに次のパラメーターを指定します。

    • crx.serverUrl=https:/[host]/:[port]/[context path]/[AEM URL]
    • crx.username= AEM ユーザー名
    • crx.password = AEM password
    • crx.appRoot=/content/apps/cm
    メモ

    サーバー側で変更を加えるたびに、サーバーを再起動します。

    DSCSample.jarファイルはrenderLetter APIを使用します。 renderLetter APIについて詳しくは、Interface LetterRenderServiceを参照してください。

JEE上のAEM FormsへのDSCの読み込み

DSCSample.jar renderLetter ファイルは API を使用して、C で入力された XML データの PDF バイト列として レターをレンダリングします。renderLetter およびその他の API について詳しくは、「レターのレンダリングサービス」を参照してください。

  1. Livecycle Workbenchを起動してログインします。

  2. Window/Show Views/Components​を選択します。 ComponentsビューがWorkbench ES2に追加されます。

  3. Components​を右クリックし、「Install Component」を選択します。

  4. ファイルブラウザーでDSCSample.jarファイルを選択し、「開く」をクリックします。

  5. RenderWrapper​を右クリックし、「コンポーネントを開始」を選択します。 コンポーネントが起動すると、コンポーネント名の横に緑色の矢印が表示されます。

レビュー用のレターの送信

レビュー用のレターを送信するためのアクションとボタンを設定した後、次の操作を行います。

  1. ブラウザーのキャッシュをクリアします。

  2. 「通信を作成」UIで、「レターのレビュー」をクリックし、レビュー担当者の電子メールIDを指定します。

  3. 送信」をクリックします。

sendreview

レビュー担当者は、PDF ファイルとして添付されたレターが含まれる電子メールを受信します。

このページ