ウィザードコンポーネント wizard-adaptive-forms-core-component

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
コアコンポーネント

作成対象：

開発者
管理者
ユーザー

アダプティブフォームのウィザードレイアウトとは、複数の手順またはページに分割されたフォームを指し、ユーザーはフォーム内を 1 つの手順ずつ移動します。順を追ってフォーム内でユーザーをガイドするため、このレイアウトは「ウィザード」と呼ばれます。

ウィザードの各ステップには、通常、関連するフォームフィールドのグループと、ステップ間を移動するための「次へ」や「戻る」ボタンなどのナビゲーションメカニズムが含まれます。ユーザーは、現在のステップが完了してすべての必須フィールドに値を入力したら、次のステップに進むことができます。

ウィザードレイアウトは、収集する必要のある多数のフィールドや情報を持つフォームで役立ちます。フォームは、より小さく、管理しやすいブロックに分類されます。また、ユーザーが一度に 1 組のフィールドに集中できるので、フォーム入力に感じる負担を減らすことができます。

ただし、ユーザーがフォームを完了するには複数のページを進む必要があるので、フォームが複雑になる可能性もあります。そのため、ウィザードレイアウトを使用するかどうかは、フォーム要件とユーザーのニーズを評価してから判断する必要があります。
ウィザードレイアウトは、アダプティブフォームでウィザードレイアウトコアコンポーネントを使用して作成できます。

例

使用方法 reasons-to-use-wizard-in-an-adaptive-form

アダプティブフォームでウィザードのレイアウトを使用には、次のようないくつかの利点があります。

シンプル：フォームを複数の手順に分割すると、一度に 1 つのフィールドセットに焦点を当てることができるので、ユーザーがフォームを理解して完了しやすくなります。
整理：トピック別または目的別にフォームを整理するのに役立ちます。また、関連するフィールドをグループ化して、フォーム入力プロセスをより論理的かつ効率的にすることもできます。
検証：段階的な検証が可能のため、フォームの最後まで待たずにエラーの特定と修正を行うことができます。
進行状況のインジケーター：フォームの進行状況を表示できるため、ユーザーは完了までの残りの分量を把握することができます。
長いフォーム:フォームに多くのフィールドが含まれている場合、すべてを一度に表示するとユーザーが圧倒的される可能性があります。フォームをより小さくて扱いやすいブロックに分割すると、負担感を軽減できます。
放棄の回避：進行状況を確認して残りの分量を把握できるとフォームの完了が促進されるため、フォームの放棄を減らすのにも役立ちます。
モバイルエクスペリエンス：読み込みが速く、移動が容易な小さいページにすることもできるため、モバイルデバイスからアクセスされるフォームにも使用できます。

全体的に、ウィザードレイアウトを使用すると、ユーザーはフォームによりスムーズかつ効率的に入力することができますが、このレイアウトを使用する前には、フォームの複雑さとユーザーのニーズを考慮することが重要です。

バージョンと互換性 version-and-compatibility

アダプティブフォームのウィザードレイアウトコアコンポーネントは、コアコンポーネント 2.0.4 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コンポーネントのバージョン

AEM as a Cloud Service

—

リリース 2.0.4 以降と互換性あり

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。

技術的詳細 technical-details

アダプティブフォームのタイトルコアコンポーネントの最新情報については、GitHub のテクニカルドキュメントをご覧ください。コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けドキュメントをご覧ください。

設定ダイアログ configure-dialog

設定ダイアログでは、訪問者に合わせてウィザードエクスペリエンスを簡単にカスタマイズできます。また、簡単にウィザードのオプションを定義して、シームレスなユーザーエクスペリエンスを実現することもできます。

「基本」タブ basic-tab

「基本」タブ

名前 - フォームコンポーネントは、フォーム内とルールエディター内の両方の一意の名前で簡単に識別できますが、名前にスペースや特殊文字を含めることはできません。
タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの上にタイトルが表示されます。
タイトルを非表示 - コンポーネントのタイトルを非表示にするには、このオプションを選択します。

フォームの送信時に子コンポーネントのデータをグループ化（オブジェクトにデータを含める） - このオプションを選択すると、子コンポーネントのデータが親コンポーネントの JSON オブジェクト内にネストされます。ただし、このオプションを選択しないと、送信した JSON データは、親コンポーネントのオブジェクトを持たないフラットな構造になります。例：

このオプションを選択すると、子コンポーネント（番地、市区町村、郵便番号など）のデータが、JSON オブジェクトとして親コンポーネント（住所）内にネストされます。これにより、階層構造が作成され、データは親コンポーネントの下に整理されます。

送信したデータの構造：

code language-json
`{ "Address": { "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" } }`

このオプションを選択しないと、送信した JSON データは、親コンポーネント（住所）のオブジェクトを持たないフラットな構造になります。すべてのデータは同じレベルにあり、階層構造はありません。

送信したデータの構造：

code language-json
`{ "Street": "123 Main Street", "City": "New York", "Zip Code": "12345" }`

バインド参照 - バインド参照は、外部データソースに保存され、フォーム内で使用されるデータ要素への参照です。バインド参照を使用すると、データをフォームフィールドに動的にバインドして、フォームにデータソースの最新のデータを表示できます。例えば、フォームに入力された顧客 ID に基づいて、顧客の名前と住所をフォームに表示できます。さらに、フォームに入力されたデータでデータソースを更新することもできます。このように AEM Formsで外部データソースとやり取りするフォームを作成して、データの収集と管理のためのシームレスなユーザーエクスペリエンスを提供できます。
コンポーネントを非表示 - フォームでコンポーネントを非表示にするには、このオプションを選択します。このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。これは、ユーザーが表示する必要のない情報や直接変更した情報を保存する必要がある場合に役立ちます。
コンポーネントの無効化 - コンポーネントを無効にする場合は、このオプションを選択します。エンドユーザーは、無効になっているコンポーネントをアクティブにしたり、編集したりすることはできません。ユーザーはフィールドの値を表示できますが、変更することはできません。このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。
読み取り専用 - コンポーネントを編集不可にするには、このオプションを選択します。ユーザーはフィールドの値を表示できますが、変更することはできません。このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。

「繰り返しウィザード」タブ repeat-wizard-tab

繰り返しウィザード

繰り返しオプションを使用すると、ウィザードとその子コンポーネントの複製、最小繰り返し回数と最大繰り返し回数の定義、フォーム内の類似セクションの複製を簡単に行うことができます。ウィザードコンポーネントを操作してその設定にアクセスする際には、次のオプションが表示されます。

ウィザードを繰り返し可能にする：ユーザーが繰り返し機能を有効または無効にできる切替スイッチ機能。
最小繰り返し回数：ウィザードパネルを繰り返し可能な最小回数を設定します。値 0 は、ウィザードパネルが繰り返されないことを示します。デフォルト値は 0 です。
最大繰り返し回数：ウィザードパネルを繰り返し可能な最大回数を設定します。デフォルトでは、この値は無制限です。

ウィザード内で繰り返し可能なセクションを効果的に管理するには、繰り返し可能なセクションを含むフォームの作成の記事に記載されている手順に従います。

「項目」タブ items-tab

「項目」タブ

このオプションを使用すると、「追加」ボタンをクリックしてアダプティブフォームコンポーネントを追加できます。このボタンは、ウィザードを編集モードで追加する際にデフォルトで表示されます。

「ヘルプ」タブ help-tab

「ヘルプ」タブ

短い説明 - 短い説明は、特定のフォームフィールドの目的に関する追加の情報や説明を提供する簡単な説明文です。これにより、ユーザーは、フィールドに入力するデータの種類を理解しやすくなります。また、入力された情報が有効で目的の条件を満たしていることを確認できるように、ガイドラインや例を提供できます。デフォルトでは、短い説明は非表示になっています。「短い説明を常に表示」オプションを有効にすると、コンポーネントの下に説明が表示されます。
短い説明を常に表示 - このオプションを有効にすると、コンポーネントの下に短い説明が表示されます。
ヘルプテキスト - ヘルプテキストとは、フォームフィールドの正しい入力を支援するためにユーザーに提供される追加の情報やガイダンスを指します。コンポーネントの横に配置されているヘルプアイコン（i）をクリックすると表示されます。ユーザーがフィールドの要件や制約を理解できるように設計されているヘルプテキストは、フォームフィールドのラベルやプレースホルダーテキストよりも詳細な情報を提供できます。また、フォームへの入力をより簡単かつ正確にするための提案や例を提供することも可能です。

「アクセシビリティ」タブ accessibility

「アクセシビリティ」タブ

スクリーンリーダー用テキスト - スクリーンリーダー用テキストとは、視覚に障害のあるユーザーが使用する、支援テクノロジー（スクリーンリーダーなど）によって読み上げられる追加のテキストを指します。このテキストでは、フォームフィールドの目的に関するオーディオの説明が提供され、フィールドのタイトル、説明、名前および関連するメッセージ（カスタムテキスト）に関する情報を含めることができます。スクリーンリーダー用のテキストを使用すると、視覚に障害のあるユーザーを含むすべてのユーザーがフォームに確実にアクセスして、フォームフィールドとその要件を完全に理解できるようになります。
- カスタムテキスト：ARIA アクセシビリティラベルにカスタムテキストを使用する場合は、このオプションを選択します。このオプションを選択すると、「カスタムテキスト」ダイアログボックスが表示されます。関連情報は、「カスタムテキスト」ダイアログボックスで追加できます。
- 説明：ARIA アクセシビリティラベルの説明を使用する場合は、このオプションを選択します。
- タイトル：ARIA アクセシビリティラベルのタイトルを使用する場合は、このオプションを選択します。
- 名前：ARIA アクセシビリティラベルの名前を使用する場合は、このオプションを選択します。
- なし：ARIA アクセシビリティラベルに追加しない場合は、このオプションを選択します。
スクリーンリーダーが通知を行うための HTMLの役割 - HTMLの役割は、スクリーンリーダーなどの支援テクノロジーに対する HTML 要素の目的を指定するための属性です。役割の属性は、要素に追加のコンテキストと意味論的意味を提供するために使用されます。これにより、スクリーンリーダーがコンテンツを解釈して読み上げやすくなります。例えば AEM Formsでは、フォームフィールドのラベルが「label」という役割を持ち、入力フィールドが「textbox」という役割を持つ場合があります。これにより、スクリーンリーダーはラベルと入力フィールドの関係を理解し、ユーザーに対して正しく通知できるようになります。

デザインダイアログ design-dialog

デザインダイアログでは、テンプレート作成者がデフォルトでの表示方法を制御できます。アダプティブフォームのウィザードコンポーネントでは、次の設定を行うことができます。

フォーム作成者がアダプティブフォームエディターでウィザードに追加できるコアコンポーネント
スタイル（CSS クラス）のシンプルな名前。アダプティブフォームエディターのウィザードコンポーネントの「プロパティ」ダイアログで適用できます。

この名前を使用することで、フォームの作成やカスタマイズのプロセスが、分かりやすく効率的になります。

「許可されたコンポーネント」タブ allowed-components-tab

「許可されたコンポーネント」タブ

「許可されたコンポーネント」タブでは、テンプレートエディターで、アアダプティブフォームエディターのウィザードコンポーネント内のパネルに、項目として追加できるコンポーネントを設定できます。

「スタイル」タブ styles-tab

デザインダイアログは、コンポーネントの CSS スタイルを定義および管理するために使用します。アダプティブフォームのウィザードコアコンポーネントは、AEM のスタイルシステムをサポートしています。

「スタイル」タブ

デフォルトの CSS クラス：アダプティブフォームのウィザードコアコンポーネントにデフォルトの CSS クラスを指定できます。
許可されたスタイル：スタイルを表す名前と CSS クラスを指定してスタイルを定義します。例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。アダプティブフォームエディターでアダプティブフォームにこれらのスタイルを使用または適用できます。スタイルを適用するには、アダプティブフォームエディターでスタイルを適用するコンポーネントを選択し、「プロパティ」ダイアログに移動して「スタイル」ドロップダウンリストから希望のスタイルを選択します。スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。

「カスタムプロパティ」タブ

カスタムプロパティを使用すると、フォームテンプレートを使用してカスタム属性（キーと値のペア）をアダプティブフォームのコアコンポーネントに関連付けることができます。カスタムプロパティは、コンポーネントのヘッドレスレンディションのプロパティセクションに反映されます。これにより、カスタム属性値に基づいて適応する動的なフォーム動作を作成できます。例えば、開発者は、モバイル、デスクトップ、web プラットフォーム上にヘッドレスフォームコンポーネントの様々なレンディションをデザインできるので、幅広いデバイスでのユーザーエクスペリエンスが大幅に向上します。

グループ名：カスタムプロパティグループを識別する名前を指定できます。複数のカスタムプロパティグループを追加、削除または並べ替えることができます。カスタムプロパティグループを追加すると、次のオプションが表示されます。
- キーと値のペア：各カスタムプロパティグループの「追加」ボタンをクリックすると、複数のカスタムプロパティ名とカスタムプロパティ値を追加できます。
- 削除：タップまたはクリックすると、カスタムプロパティ名とカスタムプロパティ値を削除できます。
- 並べ替え：タップまたはクリックしてドラッグすると、カスタムプロパティ名とカスタムプロパティ値の順序を並べ替えることができます。