チェックボックスコンポーネント

最終更新日: 2024-02-13
  • 作成対象:
  • Developer
    Admin
    User

チェックボックスは、ソフトウェアアプリケーションやフォームで一般的に使用されるグラフィカルユーザーインターフェイス要素で、オン(選択)とオフ(選択解除)の 2 つのオプションをバイナリ選択できます。

チェックボックスは通常、小さな四角形で表され、クリックまたはタップするとオン/オフを切り替えることができます。チェックボックスをオンにすると、関連するオプションまたは機能がアクティブまたは有効であることを示すチェックマークが表示されます。

メモ

AEM 6.5 Forms の場合、このコンポーネントは AEM 6.5 Forms Service Pack 19(6.5.19.0)で導入されました。このコンポーネントを有効にするには、Forms コアコンポーネントと WCM コアコンポーネントの両方に、必要なバージョンがインストールされていることを確認します。アダプティブフォームのコアコンポーネントのリリースについて詳しくは、アダプティブフォームのコンポーネントリリースを参照してください。

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

使用方法

アダプティブフォームでチェックボックスを使用する一般的な理由は次のとおりです。

  • 使いやすさ:チェックボックスは視覚的にわかりやすく、二者択一の選択を簡単に行うことができます。直感的でわかりやすく、使いやすくなっています。

  • 同意と契約:チェックボックスは、利用条件の受け入れ、ニュースレターの購読、年齢の検証など、様々な目的でユーザーの同意を得るために使用されます。ユーザーが何かに積極的に同意していることを明確にします。

  • 視覚的確認:チェックボックスをオンにすると、ユーザーの選択が記録されたことを視覚的に確認できます。このフィードバックは、ユーザーのエラーを防ぎ、選択内容が登録されたことを確認するのに役立ちます。

  • エラー回避:チェックボックスを使用すると、フォームを送信する前に選択内容をレビューし確認できるので、エラーの確率が低下します。

バージョンと互換性

アダプティブフォームのチェックボックスコアコンポーネントは、コアコンポーネント 2.0.52 の一部としてリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コンポーネントのバージョン AEM as a Cloud Service
v1
リリース 2.0.52 以降と互換性あり

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

技術的詳細

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

設定ダイアログ

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

「基本」タブ

  • 名前 - フォームコンポーネントは、フォーム内とルールエディター内の両方で一意の名前で簡単に識別できますが、名前にスペースや特殊文字を含めることはできません。

  • タイトル - タイトルを使用すると、フォーム内のコンポーネントを簡単に識別できます。デフォルトでは、コンポーネントの横にタイトルが表示されます。タイトルを追加しない場合、コンポーネントは表示されません。

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

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

  • 非連結フォーム要素としてマーク:どのスキーマにもリンクされていないフォームフィールドを設定する場合は、このオプションを選択します。このオプションを使用すると、データソースを更新せずにデータを保存できます。また、標準のデータベース統合とは別に、カスタム方法でデータを処理できます。

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

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

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

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

  • オンの場合は、値が返されます - チェックボックスがオンまたは選択されている際にチェックボックスに関連付ける値を指定するには、このオプションを選択します。これは、チェックボックスをマークまたはオンにした際に発生するアクションです。

  • オフを有効にします。 - 以前にオンにしたチェックボックスをオフにする機能を有効または無効にするには、このオプションを選択します。

    • オフを有効にします​が有効または true に設定されている場合、ユーザーは自分の裁量でチェックボックスをオンまたはオフにすることができます。必要に応じて、チェックボックスのオン/オフを切り替えることができます。

    • オフを有効にします​が無効または false に設定されている場合、チェックボックスをオンにすると、ユーザーはオフにすることができません。

  • オフの場合は、値が返されます - このオプションを使用すると、チェックボックスがオフまたは選択解除された状態にある際に、チェックボックスに関連付ける値を指定できます。

  • デフォルト値 - このオプションを使用すると、フォームフィールドにデフォルト値を追加できます。無効なコンポーネント​または​読み取り専用コンポーネント​が選択されている場合、デフォルト値が画面に表示されます。ユーザーがフォームフィールドに値を入力しない場合、この値はフォームの送信時に送信されます。

「検証」タブ

「検証」タブ

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

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

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

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

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

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

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

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

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

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

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

デザインダイアログ

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

「スタイル」タブ

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

デザインダイアログ

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

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

カスタムプロパティ

カスタムプロパティダイアログ

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

  • グループ名:カスタムプロパティグループを識別する名前を指定できます。複数のカスタムプロパティグループを追加、削除または並べ替えることができます。カスタムプロパティグループを追加すると、次のオプションが表示されます。

    • キーと値のペア:各カスタムプロパティグループの「追加」ボタンをクリックすると、複数のカスタムプロパティ名とカスタムプロパティ値を追加できます。

    • 削除:タップまたはクリックすると、カスタムプロパティ名とカスタムプロパティ値を削除できます。

    • 並べ替え:タップまたはクリックしてドラッグすると、カスタムプロパティ名とカスタムプロパティ値の順序を並べ替えることができます。

関連トピック

このページ