アダプティブ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
    [customsubmitaction] の名前は、フォームのオーサリング時に「Submit 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]"/>
    

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

    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 ファイルを作成して、追加した送信アクションのサービスを実装します。 例えば、CustomSubmitService.java のように新しい 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 コンソールのログサポートhttp://<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 を使用します。

関連記事

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