[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 からダウンロードしてください。
フォーム用の最初のカスタム送信アクションの作成
次の図は、アダプティブフォームのカスタム送信アクションを作成する手順を示しています。
AEM as a Cloud Service Git リポジトリのクローンを作成します。
-
コマンドラインを開き、AEM as a Cloud Service リポジトリを保存するディレクトリ(例:
/cloud-service-repository/)を選択します。 -
次のコマンドを実行して、リポジトリのクローンを作成します。
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]と呼びます。
新しい送信アクションを追加
-
エディターでリポジトリフォルダーを開きます。
-
[AEMaaCS project directory]ージ内の次のディレクトリに移動します。code language-none /ui.apps/src/main/content/jcr_root/apps/<app-id>/重要:
<app-id>を実際のアプリケーション ID に置き換えます。 -
カスタム送信アクション用の新しいフォルダーを作成し、任意の名前を付けます。 例えば、フォルダーに
customsubmitactionという名前を付けます。
-
追加したカスタム送信アクションディレクトリに移動します。
[AEMaaCS project directory]内で、次のパスに移動します。/ui.apps/src/main/content/jcr_root/apps/<app-id>/customsubmitaction/Important:<app-id>を実際のアプリケーション ID に置き換えます。 -
新しい設定ファイルを作成します。
customsubmitactionフォルダー内に、.content.xmlという名前の新しいファイルを作成します。
-
このファイルを開き、次の内容を貼り付けます。
[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 に含める
-
[AEMaaCS プロジェクトディレクトリ]内の
/ui.apps/src/main/content/META-INF/vault/filter.xmlファイルに移動します。 -
ファイルを開き、最後に次の行を追加します。
code language-none <filter root="/apps/<app-id>/[customsubmitaction-folder]"/>例えば、次のコード行を追加して、
customsubmitactionファイルにfilter.xmlフォルダーを追加します。code language-none <filter root="/apps/wknd/customsubmitaction"/>
-
変更を保存します。
追加した送信アクションのサービスを実装します。
-
[AEMaaCS project directory]ージ内の次のディレクトリに移動します。/core/src/main/java/com/<app-id>/core/service/Important:<app-id>を実際のアプリケーション ID に置き換えます。 -
新しい Java ファイルを作成して、追加した送信アクションのサービスを実装します。 例えば、
CustomSubmitService.javaのように新しい Java ファイルを追加します。
-
このファイルを開き、カスタム送信アクション実装のコードを追加します。
例えば、次の 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; } }
-
変更を保存します。
コードをデプロイします。
ローカル開発環境用のコードのデプロイ
-
AEM as a Cloud Service、
[AEMaaCS project directory]をローカル開発環境にデプロイして、ローカルマシンで新しい送信アクションを試します。 ローカル開発環境にデプロイするには:-
ローカル開発環境が起動および実行されていることを確認します。ローカル開発環境をまだ設定していない場合は、AEM Formsのローカル開発環境の設定 に関するガイドを参照してください。
-
ターミナルウィンドウまたはコマンドプロンプトを開きます。
-
[AEMaaCS project directory]に移動します。 -
次のコマンドを実行します。
code language-none mvn -PautoInstallPackage clean install
-
Cloud Service環境用のコードのデプロイ
-
AEM as a Cloud Service、
[AEMaaCS project directory]をCloud Service環境にデプロイします。 Cloud Service 環境にデプロイするには:-
変更内容をコミットします。
新しいカスタム送信アクション設定を追加したら、明確な Git メッセージを使用して変更をコミットします。 (例:「新しいカスタム送信アクションを追加」)。
-
更新されたコードをデプロイします。
既存のフルスタックパイプラインを通じてコードのデプロイメントをトリガーします。新しいカスタム m 送信アクションのサポートを使用して、更新されたコードを自動的にビルドおよびデプロイします。
パイプラインをまだ設定していない場合は、AEM Forms as a Cloud Service のパイプラインの設定方法のガイドを参照してください。
インストールを確認するにはどうすればよいですか?
プロジェクトが正常に作成されると、フォームのオーサリング中にカスタム送信アクションが
Submit actionドロップダウンリストに表示されます。
これで、環境でフォームをオーサリングする際に、追加されたカスタム送信アクションを使用する準備が整いました。
-
新しく送信アクションが追加されたアダプティブフォームをプレビューする
-
AEM Forms as a Cloud Service インスタンスにログインします。
-
Forms/フォームとドキュメントに移動します。
-
アダプティブフォームを選択し、「編集」をクリックします。 フォームが編集モードで開きます。
-
コンテンツブラウザーを開き、アダプティブフォームの ガイドコンテナ コンポーネントを選択します。
-
ガイドコンテナプロパティ
アイコンをクリックします。 アダプティブフォームコンテナダイアログボックスが開きます。 -
「送信」タブをクリックします。
-
送信アクション ドロップダウンリストから、送信アクションを選択します。 例えば、送信アクションを
Custom Submit Actionのように選択します。
-
フォームに入力して送信します。
フォームが正常に送信されたら、Adobe Experience Manager Web コンソールローカル開発 を調べて、設定環境でのカスタム送信アクションのアクションを確認できます。
-
http://<host>:<port>/system/console/configMgrにアクセスします。 -
Adobe Experience Manager Web コンソールのログサポート (
http://<host>:<port>/system/console/slinglog)に移動します。
-
logs/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 はデフォルトのエラーページを返します。