通信作成 UI へのカスタムアクションボタンの追加

概要

Correspondence Management ソリューションを使用すると、通信を作成ユーザーインターフェイスにカスタムアクションを追加できます。

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

前提条件

このシナリオを完了するには、次が必要です。

• CRX および JavaScript に関する知識
• LiveCycleサーバ

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

「通信を作成」ユーザーインターフェイスに、アクション付きのボタン（ここではレビュー用のレターを送信）を追加するには、次の操作を行います。

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

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

1. https://'[server]:[port]'/[ContextPath]/crx/de にアクセスし、管理者としてログインします。

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

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

      /libs/fd/cm/config/defaultApp/

      

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

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

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

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

      

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

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

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

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

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

      

   3. を右クリックします。 defaultApp 「/apps/fd/cm/config/defaultApp/」のフォルダーで、「 貼り付け.

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

4. apps フォルダーに新しく作成した acmExtensionsConfig.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>
   

   

   modelExtension タグには、アクションボタンのアクション、権限、外観を設定する customAction 子タグのセットが含まれています。 次に、customAction 設定タグのリストを示します。

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

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

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

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

/apps ブランチにプロパティファイルを含むロケールフォルダーを作成します。

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. 新しく追加されたカスタムアクションまたはボタンのラベルをローカライズするには、関連するロケールの ACMExtensionsMessages.properties ファイルを /apps/fd/cm/config/defaultApp/locale/ に作成します。

   たとえば、この記事で作成したカスタムアクションまたはボタンをローカライズするには、次のエントリを使用して ACMExtensionsMessages_fr.properties という名前のファイルを作成します。

   loc.letterInstance.letterreview.label=Revue De Lettre

   同様に、このファイル内にツールチップやスタイルなどのプロパティを追加することができます。

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

AdobeAsset Composer 構築ブロックバンドルの再起動

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

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

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

   

AdobeAsset 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;</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プロセスを追加します 処理中

このシナリオでは、以下のコンポーネントを有効にします。これらのコンポーネントは、添付されている components.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 にアクセスし、Admin でログインしてください。

2. Adobe LiveCycle Client SDK 設定を見つけて、編集（編集アイコン）をクリックしてください。設定パネルが開きます。

3. 次の詳細を入力し、「保存」をクリックしてください。

   • サーバー URL：LC Server の URL。アクション処理コードはこのレビュー用に送信サービスを使用します。
   • ユーザー名：LC Server の管理者ユーザー名
   • パスワード：管理者ユーザー名のパスワード

   

LiveCycle アーカイブ（LCA）のインストール

メールサービスプロセスを有効にするための必須の LiveCycle プロセスです。

1. https:/[lc server]/:[lc port]/adminui で、LiveCycle® サーバーに管理者としてログインします。

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

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

   

4. インポート​をクリックします。

5. ファイルを選択​をクリックしてから、SendLetterForReview.lca を選択してください。

   

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

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

8. 「インポート」をクリックします。

許可リストサービスリストへの ServiceName の追加

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

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

2. Adobe LiveCycle Client SDK Configuration を検索してクリックします。Adobe LiveCycle Client SDK Configuration パネルが表示されます。

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

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

電子メールサービスを設定する

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

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

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

3. EmailService​を検索してクリックします。

4. SMTP ホスト​で、メールサービスを設定します。

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

DSC サービスの設定

Correspondence Management API を使用するには、DSCSample.jar（このドキュメントに添付されている components.zip に含まれています）をダウンロードしてから、LiveCycle サーバーにアップロードしてください。DSCSample.jar ファイルが LiveCycle サーバーにアップロードされると、Experience Manager サーバーは DSCSample.jar ファイルを使用して renderLetter API にアクセスします。

詳細は、AEM Forms と Adobe LiveCycle の接続を参照してください。

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

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

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

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

   サーバーサイドで変更を加えるたびに LiveCycle サーバーは再起動します。

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

LiveCyle への DSC の読み込み

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

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

2. Window／表示を確認／コンポーネント​をクリックします。コンポーネント表示が Workbench ES2 に追加されます。

3. 「コンポーネント」を右クリックし、「コンポーネントをインストールt」を選択します。

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

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

レビュー用にレターを送信

レビュー用にレターを送信するためのアクションとボタンを設定したら、次の手順を実行します。

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

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

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

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

Business.Adobe.com リソース

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