[AEM Forms]{class="badge positive" title="AEM Formsに適用)。"}

アダプティブ Forms(コアコンポーネント)用のカスタム送信アクションの作成

送信アクションを使用すると、ユーザーはフォームから取得したデータの宛先を選択し、フォーム送信時に実行する追加機能を定義できます。 AEM フォームでは、電子メールの送信やデータのSharePointやOneDriveへの保存など、複数の送信アクションをすぐに実行できる(OOTB) ​がサポートされています。

カスタム送信アクションを作成して、標準提供オプション ​に含まれていない機能を追加することもできます。 たとえば、フォームデータをサードパーティのアプリケーションと統合したり、顧客の入力にもとづいてパーソナライズされたSMS通知をトリガーしたりできます。

前提条件

アダプティブ Formsの最初のカスタム送信アクションの作成を開始する前に、次の点を確認してください。

  • プレーンテキストエディター(IDE):どのプレーンテキストエディターでも機能しますが、Microsoft Visual Studio Code などの統合開発環境(IDE)では、編集を簡単にする高度な機能が提供されます。

  • Git: コード変更の管理には、このバージョン管理システムが必要です。 インストール済みでない場合は、https://git-scm.com からダウンロードしてください。

フォームの最初のカスタム送信アクションの作成

次の図は、アダプティブフォームのカスタム送信アクションを作成する手順を示しています。

​ カスタム送信アクションのワークフロー {width="50%,"}

AEM as a Cloud Service Git リポジトリを複製します。

  1. コマンドラインを開き、AEM as a Cloud Service リポジトリを保存するディレクトリ(例:/cloud-service-repository/)を選択します。

  2. 次のコマンドを実行して、リポジトリのクローンを作成します。

    code language-none
    git clone https://git.cloudmanager.adobe.com/<organization-name>/<app-id>/
    

    この情報はどこにありますか?

    これらの詳細を見つける手順について詳しくは、Adobe Experience League の記事「Git へのアクセス」を参照してください。

    プロジェクトの準備が整いました。

    コマンドが正常に完了すると、ローカルディレクトリに新しいフォルダーが作成されます。このフォルダーは、アプリケーション(app-idなど)にちなんで名前が付けられます。 このフォルダーには、AEM as a Cloud Service Git リポジトリーからダウンロードされたすべてのファイルとコードが含まれます。 AEM プロジェクトの <appid>archetype.properties ファイルにあります。

    アーキタイププロパティ

    このガイドでは、このフォルダーを [AEMaaCS project directory] と呼びます。

新しい送信アクションを追加

  1. エディターでリポジトリフォルダーを開きます。

    クローン済みリポジトリ

  2. [AEMaaCS project directory]内の次のディレクトリに移動します。

    code language-none
    /ui.apps/src/main/content/jcr_root/apps/<app-id>/
    

    重要<app-id> を実際のアプリケーション ID に置き換えます。

  3. カスタム送信アクション用に新しいフォルダーを作成し、任意の名前を付けます。 例えば、フォルダーにcustomsubmitactionという名前を付けます。

    カスタム送信アクションフォルダーを作成

  4. 追加されたカスタム送信アクションディレクトリに移動します。

    [AEMaaCS project directory] 内で、次のパスに移動します。

    /ui.apps/src/main/content/jcr_root/apps/<app-id>/customsubmitaction/

    Important: <app-id>を実際のアプリケーション IDに置き換えます。

  5. 新しい設定ファイルを作成します。
    customsubmitaction フォルダー内に、.content.xmlという名前の新しいファイルを作成します。

    構成ファイルの作成

  6. このファイルを開き、次のコンテンツを貼り付け、[customsubmitaction]を送信アクションの名前に置き換えます

    code language-none
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:description="[customsubmitaction]"
    jcr:primaryType="sling:Folder"
    
    guideComponentType="fd/af/components/guidesubmittype"
    guideDataModel="basic,xfa,xsd"
    submitService="[customsubmitaction]"/>
    

    例えば、[customsubmitaction]をカスタマイズした送信アクション名Custom Submit Actionに置き換えます。

    カスタム送信アクション設定ファイルを作成

    note note
    NOTE
    フォームのオーサリング中に[ ドロップダウンリストに同じ名前が表示されるため、]customsubmitactionSubmit actionの名前を覚えておいてください。

新しいフォルダーをfilter.xml​に含める

  1. [AEMaaCS プロジェクトディレクトリ]内の /ui.apps/src/main/content/META-INF/vault/filter.xml ファイルに移動します。

  2. ファイルを開き、最後に次の行を追加します。

    code language-none
    <filter root="/apps/<app-id>/[customsubmitaction-folder]"/>
    

    例えば、次のコード行を追加して、customsubmitaction ファイルにfilter.xml フォルダーを追加します。

    code language-none
    <filter root="/apps/wknd/customsubmitaction"/>
    

    作成したフォルダーをfilter.xml に追加します

  3. 変更を保存します。

追加された送信アクションのサービスを実装します。

  1. [AEMaaCS project directory]内の次のディレクトリに移動します。
    /core/src/main/java/com/<app-id>/core/service/
    Important: <app-id>を実際のアプリケーション IDに置き換えます。

  2. 新しいJava ファイルを作成して、追加された送信アクションのサービスを実装します。 例えば、新しいJava ファイルをCustomSubmitService.javaとして追加します。

    カスタム送信アクション フォルダー

  3. このファイルを開き、カスタム送信アクション実装用のコードを追加します。

    例えば、以下のJava コードは、送信されたデータをログに記録してフォーム送信を処理し、ステータス OKを返すOSGi サービスです。 次のコードをCustomSubmitService.java ファイルに追加します。

    code language-none
    package com.wknd.core.service;
    
    import com.adobe.aemds.guide.model.FormSubmitInfo;
    import com.adobe.aemds.guide.service.FormSubmitActionService;
    import java.util.HashMap;
    import java.util.Map;
    import org.osgi.service.component.annotations.Component;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    
        @Component(
        service = FormSubmitActionService.class,
        immediate = true
            )
        public class CustomSubmitService implements FormSubmitActionService {
    
        private static final String serviceName = "Custom Submit Action";
    
        private static Logger log = LoggerFactory.getLogger(CustomSubmitService.class);
    
        @Override
        public String getServiceName() {
        return serviceName;
        }
    
        @Override
        public Map<String, Object> submit(FormSubmitInfo formSubmitInfo) {
        String data = formSubmitInfo.getData();
        log.info("Using custom submit action service, [data]
        -->
        " + data);
        Map<String, Object> result = new HashMap<>();
        result.put("status", "OK");
        return result;
         }
        }
    

    カスタム送信アクションサービス

  4. 変更を保存します。

コードをデプロイします。

ローカル開発環境のコードをデプロイ

  • AEM as a Cloud Service [AEMaaCS project directory]をローカル開発環境にデプロイして、新しい送信アクションをローカルマシンで試してください。 ローカル開発環境にデプロイするには:

    1. ローカル開発環境が起動および実行されていることを確認します。ローカル開発環境をまだ設定していない場合は、AEM Formsのローカル開発環境の設定に関するガイドを参照してください。

    2. ターミナルウィンドウまたはコマンドプロンプトを開きます。

    3. [AEMaaCS project directory]に移動します。

    4. 次のコマンドを実行します。

      code language-none
      mvn -PautoInstallPackage clean install
      

      ローカル展開

Cloud Service環境のコードをデプロイ

  • AEM as a Cloud Service [AEMaaCS project directory]をCloud Service環境にデプロイします。 Cloud Service 環境にデプロイするには:

    1. 変更を確定:

      新しいカスタム送信アクション設定を追加したら、変更をコミットして明確なGit メッセージを表示します。 (例:「新しいカスタム送信アクションを追加しました」)。

    2. 更新されたコードをデプロイします。

      既存のフルスタックパイプラインを通じてコードのデプロイメントをトリガーします。新しいカスタム m送信アクションのサポートを使用して、更新されたコードが自動的にビルドおよびデプロイされます。

      パイプラインをまだ設定していない場合は、AEM Forms as a Cloud Service のパイプラインの設定方法のガイドを参照してください。

      クラウド展開

      インストールの確認方法を教えてください。

      プロジェクトが正常に構築されると、フォームのオーサリング中にカスタム送信アクションがSubmit action ドロップダウンリストに表示されます。

      カスタム送信アクション ドロップダウンリスト

    これで、環境でフォームのオーサリング時に追加されたカスタム送信アクションを使用する準備が整いました。

新しく追加された送信アクションを含むアダプティブフォームのプレビュー

  1. AEM Forms as a Cloud Service インスタンスにログインします。

  2. Formsフォームとドキュメント​に移動します。

    Formsとドキュメント

  3. アダプティブフォームを選択し、編集​をクリックします。 フォームが編集モードで開きます。

    フォームを編集

  4. コンテンツブラウザーを開き、アダプティブフォームの​ ガイドコンテナ ​コンポーネントを選択します。

  5. ガイドコンテナプロパティ ガイドプロパティ アイコンをクリックします。 アダプティブフォームコンテナダイアログボックスが開きます。

  6. 送信」タブをクリックします。

  7. 送信アクション ドロップダウンリストから、送信アクションを選択します。 例えば、送信アクションをCustom Submit Actionとして選択します。

    カスタム送信フォーム

  8. フォームに記入して送信してください。

    フォームを送信

    感謝メッセージ

    フォームが正常に送信されたら、Adobe Experience Manager Web コンソール設定​を確認して、ローカル開発環境でのカスタム送信アクションの動作を確認できます。

  9. http://<host>:<port>/system/console/configMgr にアクセスします。

  10. Adobe Experience Manager Web Console Log Supporthttp://<host>:<port>/system/console/slinglogに移動します。

    ConfigMgr

  11. logs/error.log」オプションをクリックします。
    error.log ファイルを開く

  12. error.log ファイルを開いて、データが追加されていることを確認します。

    error.log ファイル

    note note
    NOTE
    • AEM as a Cloud Service環境でエラーログを確認するには、Splunkを使用します。
    • カスタム送信アクションサービスで未処理のエラーが発生した場合、AEM as a Cloud Serviceは502 エラーページ HTMLを返します。

よくある質問

Q:送信後にアダプティブフォームに5.x.x エラーページが表示されるのはなぜですか?
カスタム送信アクションサービスは、処理できないエラーで失敗しました。 AEM Cloud Serviceは、デフォルトのエラーページを返します。

関連記事

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab