チェックボックスグループ

アダプティブフォームのチェックボックスグループは、ユーザーがリストから 1 つ以上のオプションを選択できる関連チェックボックスセットです。 各チェックボックスは、データ値（チェックボックスグループの項目を処理するために使用される値）と表示値（目的を説明する各チェックボックス項目のラベル）で表されます。

例

プロパティダイアログ

この例では、オプション要素を使用して、チェックボックスをグループ化しています。 「 テキストを表示」要素は、項目のラベルを提供するために使用され、 データ値 は、フォームの送信時にサーバーに送信される値を指定するために使用されます。

各チェックボックスのオプションと項目には、一意のデータ値と表示テキスト属性があります。 ユーザーが「息子」および「娘」チェックボックスを選択すると、対応するデータ値がフォームの送信時にサーバーに送信されます。 その後、このデータをサーバーサイドスクリプトで処理して、ユーザーが選択したオプションを判断し、フォーム内の他のフィールドを更新したり、フォームデータをサーバーサイドスクリプトに送信してさらに処理するなど、様々な操作を実行できます。

また、チェックボックスグループは、各オプションに対して異なる処理値を持つように設定できます。これは、アダプティブフォームルールエディターを使用して設定できます。

使用方法

アダプティブフォームにチェックボックスグループを含める方が有益な理由は、次のようにいくつかあります。

• 複数の選択：ユーザーはリストから複数のオプションを選択できます。これは、複数の選択が許可されている、または必要な場合に便利です。

• ユーザーエクスペリエンス：複数のオプションを選択するのに明確で直感的な方法を提供することで、より使いやすいフォームにすることができます。

• データ分析：様々なソースからデータを収集して分析したり、入力として使用してさらに処理を行ったりできます。

• アンケート：1 つの質問に対して複数のオプションを選択するアンケートで使用できます。

• ユーザーの環境設定：様々なオプションでユーザーの環境設定を収集できます。

• データ値：チェックボックスグループの項目を処理することもできます。

バージョンと互換性

アダプティブフォームのアコーディオンコアコンポーネントは、Cloud Service のコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 以降のコアコンポーネント 1.1.12 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

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

技術的詳細

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

設定ダイアログ

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

「基本」タブ

• 名前 - 名前は、ルールエディター内でコンポーネントを一意に識別します。名前文字列では特殊文字とスペースを使用できません。

• タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの上にタイトルが表示されます。 タイトルを追加しない場合、コンポーネントの名前がタイトルテキストの代わりに表示されます。

• タイトルを非表示 - コンポーネントのタイトルを非表示にするには、このオプションを選択します。

• オプション -「追加」ボタンからデータ値と表示テキストのペアを追加できます。新しいオプションを追加したら、次の操作を実行できます。

  • データ値 — このオプションでは、オプションが選択された際に送信するコンテンツを指定できます。
  • 表示テキスト - このオプションでは、アダプティブフォームに表示するコンテンツを入力できます。
  • 削除 - タップまたはクリックすると、チェックボックスのオプションが削除されます。
  • 並べ替え - タップまたはクリックしてドラッグすると、パネルを並べ替えることができます。

• バインド参照 - バインド参照は、外部データソースに保存され、フォーム内で使用されるデータ要素への参照です。 バインド参照を使用すると、データをフォームフィールドに動的にバインドして、フォームにデータソースの最新のデータを表示できます。 例えば、フォームに入力された顧客 ID に基づいて、顧客の名前と住所をフォームに表示できます。 さらに、フォームに入力されたデータでデータソースを更新することもできます。 このようにして、AEM Forms で外部データソースとやり取りするフォームを作成し、データの収集と管理においてシームレスなユーザーエクスペリエンスを提供できます。

• 送信された値のデータタイプ - このオプションでは、いずれかのオプションが選択された際に送信される値のデータタイプを指定します。 「送信された値のデータタイプ」が「Number」に指定されている場合に、「オプション 」タブの「データ値」に文字列データを追加すると、画面に Value type mismatch エラーメッセージが表示されます。

• 表示オプション - このオプションでは、アダプティブフォームのチェックボックスの視覚的なアラインメントを設定します。 次の 2 つのオプションがサポートされています。

  • 水平方向 - このオプションを選択すると、アダプティブフォームでチェックボックスが左から右に表示されます。
  • 垂直方向 - このオプションを選択すると、アダプティブフォームでチェックボックスが上から下に表示されます。

• デフォルトのオプション - このオプションを使用すると、フォームの読み込み時に、事前に選択されたデフォルト値を追加できます。 削除アイコンを使用すると、追加したオプションを削除できます。「送信された値のデータタイプ」が「Number」に設定されている場合、デフォルトのオプション」に文字列データを追加すると、画面に Value type mismatch エラーメッセージが表示されます。

• コンポーネントを非表示 - フォームでコンポーネントを非表示にするには、このオプションを選択します。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。 これは、ユーザーが表示する必要のない情報や直接変更した情報を保存する必要がある場合に役立ちます。

• コンポーネントの無効化 - コンポーネントを無効にする場合は、このオプションを選択します。 エンドユーザーは、無効になっているコンポーネントをアクティブにしたり、編集したりすることはできません。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。

• 読み取り専用 - コンポーネントを編集不可にするには、このオプションを選択します。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的（ルールエディターでの計算に使用するなど）にも利用できます。

「検証」タブ

• 必須 - コンポーネントをアダプティブフォームに表示する場合は、このオプションを選択します。 このオプションを選択すると、「基本」タブの「コンポーネントを非表示」または「コンポーネントの無効化」は選択できなくなります。

• エラーメッセージ - このオプションを使用すると、「必須」チェックボックスがオンになっていて、フォームフィールドは空白の場合に表示されるメッセージを指定できます。

• スクリプト検証メッセージ - このオプションを使用すると、スクリプトの検証が失敗した場合に表示するメッセージを入力できます。

「ヘルプコンテンツ」タブ

• 短い説明 - 短い説明は、特定のフォームフィールドの目的に関する追加の情報や説明を提供する簡単な説明文です。これにより、ユーザーは、フィールドに入力するデータの種類を理解しやすくなります。また、入力された情報が有効で目的の条件を満たしていることを確認できるように、ガイドラインや例を提供できます。デフォルトでは、短い説明は非表示になっています。 「短い説明を常に表示」オプションを有効にすると、コンポーネントの下に説明が表示されます。

• 短い説明を常に表示 - このオプションを有効にすると、コンポーネントの下に短い説明が表示されます。

• ヘルプテキスト - ヘルプテキストとは、フォームフィールドの正しい入力を支援するためにユーザーに提供される追加の情報やガイダンスを指します。コンポーネントの横に配置されているヘルプアイコン（i）をクリックすると表示されます。 ユーザーがフィールドの要件や制約を理解できるように設計されているヘルプテキストは、フォームフィールドのラベルやプレースホルダーテキストよりも詳細な情報を提供できます。また、フォームへの入力をより簡単かつ正確にするための提案や例を提供することも可能です。

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

スクリーンリーダー用テキスト - スクリーンリーダー用テキストとは、視覚に障害のあるユーザーが使用する、支援テクノロジー（スクリーンリーダーなど）によって読み上げられる追加のテキストを指します。このテキストでは、フォームフィールドの目的に関するオーディオの説明が提供され、フィールドのタイトル、説明、名前および関連するメッセージ（カスタムテキスト）に関する情報を含めることができます。スクリーンリーダー用のテキストを使用すると、視覚に障害のあるユーザーを含むすべてのユーザーがフォームに確実にアクセスして、フォームフィールドとその要件を完全に理解できるようになります。

## デザインダイアログ {#design-dialog}

「デザイン」ダイアログでは、チェックボックスグループコンポーネントの CSS スタイルを定義および管理します。

「スタイル」タブ

アダプティブフォームのチェックボックスグループコアコンポーネントは、AEM のスタイルシステムをサポートしています。

• デフォルトの CSS クラス：アダプティブフォームのチェックボックスグループコアコンポーネントのデフォルト CSS クラスを指定できます。

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

Business.Adobe.com リソース