バージョンと互換性
アダプティブフォームのアコーディオンコアコンポーネントは、Cloud Service のコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 以降のコアコンポーネント 1.1.12 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。
| コンポーネントのバージョン | AEM as a Cloud Service | AEM 6.5.16.0 Forms 以降 |
|---|---|---|
| v1 | リリース 2.0.4 以降と互換性あり | リリース 1.1.12 以降、2.0.0 未満と互換性があります。 |
コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。
技術的詳細
アダプティブフォームコンテナのコアコンポーネントの最新情報については、GitHubのテクニカルドキュメントをご覧ください。 コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントをご覧ください。
設定ダイアログ
設定ダイアログを使用すると、フォームコンテナのエクスペリエンスを訪問者に合わせて簡単にカスタマイズできます。 また、フォームコンテナオプションを簡単に定義でき、シームレスなユーザーエクスペリエンスを実現できます。
「基本」タブ
-
タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの上にタイトルが表示されます。 タイトルを追加しない場合、コンポーネントの名前がタイトルテキストの代わりに表示されます。
-
事前入力サービス - このオプションを使用すると、ユーザーはアダプティブフォームのレンダリング時にデータを取得するための事前入力サービスを選択できます。 詳しくは、事前入力サービスの作成および設定方法を参照してください
-
役割：役割は、スクリーンリーダーなどの支援テクノロジーに対する HTML 要素の目的を指定するのに使用される、HTML 属性です。役割の属性は、要素に追加のコンテキストと意味論的意味を提供するために使用されます。これにより、スクリーンリーダーがコンテンツを解釈して読み上げやすくなります。 例えば AEM Formsでは、フォームフィールドのラベルが「label」という役割を持ち、入力フィールドが「textbox」という役割を持つ場合があります。 これにより、スクリーンリーダーはラベルと入力フィールドの関係を理解し、ユーザーに対して正しく通知できるようになります。
-
クライアントライブラリカテゴリ：ユーザーはアダプティブフォームごとにカスタム JavaScript ライブラリを設定できます。jQuery および underscore.js サードパーティライブラリに依存する再利用可能な関数のみを、ライブラリに保持することをお勧めします。
複雑な検証ルール がある場合、正確な検証スクリプトがカスタム関数の中に存在し、ユーザーがこれらのカスタム関数をフィールド検証式から呼び出すことがあります。 このカスタム関数ライブラリをサーバーサイド検証中に認識させ、利用可能にするために、フォームユーザーは、「アダプティブフォームコンテナ」プロパティの「基本」タブで、AEM クライアントライブラリの名前を設定できます。
ユーザーは、アダプティブフォームごとにカスタム JavaScript ライブラリを設定できます。 ライブラリには、jQuery および underscore.js サードパーティライブラリに依存する、再利用可能な関数のみを保持します。
「データモデル」タブ
フォームデータモデルを使用してフォームをデータソースに接続し、ユーザーのアクションに基づいてデータを送受信することができます。 また、フォームを JSON スキーマに接続して、送信されたデータを事前定義済みの形式で受信することもできます。 必要に応じて、フォームを JSON スキーマまたはフォームデータモデルに接続します。
- JSON スキーマの作成と環境へのアップロード
- フォームデータモデルを作成
ドラフト
- 下書きを自動的に保存：「下書きを自動的に保存」チェックボックスをオンにして、フォームを下書きとして保存できるようにします。
- 環境設定を保存：「環境設定を保存」を「定期的に下書きを保存」に設定して、特定の時間間隔でフォームを自動保存します。
保存間隔の頻度（秒）：時間間隔（秒）を指定して、定義された間隔でフォームの自動保存をトリガーする期間を設定します。
「送信」タブ
ユーザーは、アダプティブフォームの送信に対して様々なアクションを設定できます。
- リダイレクト URL／パス - このオプションを使用すると、ユーザーはアダプティブフォームの送信後にユーザーがリダイレクトされる各フォームのページを設定できます。 詳しくは、リダイレクトページの設定方法を参照してください。
- メッセージを表示 - このオプションを使用すると、ユーザーはアダプティブフォームが正常に送信されたときに表示されるメッセージを追加できます。 定義済みのテキストはダイアログボックスに含まれ、ユーザーが変更できます。 「メッセージを表示」ダイアログでは、追加したテキストを書式設定できるリッチテキスト形式のツールがサポートされています。
- 送信アクション - 送信アクションは、ユーザーがアダプティブフォームの「送信」ボタンをクリックしたときにトリガーされます。 ユーザーは、すぐに使用できるよう用意されているドロップダウンリストから「送信アクション」を選択することができます。 詳しくは、「送信」タブでの送信アクションの設定を参照してください。
デザインダイアログ
デザインダイアログでは、フォームコンテナコンポーネントの CSS スタイルを定義および管理できます。
「許可されたコンポーネント」タブ
「許可されたコンポーネント」タブでは、テンプレートエディターで、アダプティブフォームエディターのコンポーネント内のパネルに、項目として追加できるコンポーネントを設定できます。
デフォルトの「コンポーネント」タブ
「デフォルトのコンポーネント」タブでは、テンプレートエディターで、デフォルトで表示されるコンポーネントを、アダプティブフォームエディター内のフォームコンテナコンポーネント内の項目として指定できます。
「レスポンシブ設定」タブ
「レスポンシブ設定」タブでは、テンプレートエディターで、アダプティブフォームエディターのフォームコンテナコンポーネント内のグリッドの列数を指定できます。
「スタイル」タブ
アダプティブフォームのファイル添付コアコンポーネントは、AEM のスタイルシステムをサポートしています。
-
デフォルトの CSS クラス：アダプティブフォームのフォームコンテナコアコンポーネントにデフォルトの CSS クラスを指定できます。
-
許可されたスタイル：スタイルを表す名前と CSS クラスを指定してスタイルを定義します。 例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。 アダプティブフォームエディターでアダプティブフォームにこれらのスタイルを使用または適用できます。 スタイルを適用するには、アダプティブフォームエディターでスタイルを適用するコンポーネントを選択し、「プロパティ」ダイアログに移動して「スタイル」ドロップダウンリストから希望のスタイルを選択します。 スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。
「カスタムプロパティ」タブ
カスタムプロパティを使用すると、フォームテンプレートを使用してカスタム属性（キーと値のペア）をアダプティブフォームのコアコンポーネントに関連付けることができます。 カスタムプロパティは、コンポーネントのヘッドレスレンディションのプロパティセクションに反映されます。 これにより、カスタム属性値に基づいて適応する動的なフォーム動作を作成できます。 例えば、開発者は、モバイル、デスクトップ、web プラットフォーム上にヘッドレスフォームコンポーネントの様々なレンディションをデザインできるので、幅広いデバイスでのユーザーエクスペリエンスが大幅に向上します。
-
グループ名：カスタムプロパティグループを識別する名前を指定できます。 複数のカスタムプロパティグループを追加、削除または並べ替えることができます。 カスタムプロパティグループを追加すると、次のオプションが表示されます。
-
キーと値のペア：各カスタムプロパティグループの「追加」ボタンをクリックすると、複数のカスタムプロパティ名とカスタムプロパティ値を追加できます。
-
削除：タップまたはクリックすると、カスタムプロパティ名とカスタムプロパティ値を削除できます。
-
並べ替え：タップまたはクリックしてドラッグすると、カスタムプロパティ名とカスタムプロパティ値の順序を並べ替えることができます。
-