通信作成 UI へのカスタムアクションボタンの追加 add-custom-action-button-in-create-correspondence-ui

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

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

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

   /libs/fd/cm/config/defaultApp/

   

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

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

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

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

   

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

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

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

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

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

   

3. 「/apps/fd/cm/config/defaultApp/」にある defaultApp フォルダーを右クリックし、「ペースト」を選択します。

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

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

レターをメールで送信するには、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 設定タグの一覧です。

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

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

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

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

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

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

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

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

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

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

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

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

次のパスにある locale フォルダーを右クリックし、「貼り付け」を選択します。

/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

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

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

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

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

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

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. 「すべて保存」をクリックします。

次の手順を使用し、ccrcustomization.js という名前のファイルを js フォルダーに作成し、ボタンのアクション処理のコードを指定します。

1. 次のパスにある js フォルダーを右クリックし、「作成／ファイルを作成」を選択します。

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

   ファイルに ccrcustomization.js という名前を付けます。

2. ccrcustomization.js ファイルをダブルクリックして、CRX で開きます。

3. ファイルに次のコードを貼り付けて、「すべて保存」をクリックします。

   code language-javascript

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

https://'[server]:[port]'/system/console/configMgr にアクセスし、Admin でログインしてください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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