パネルコンポーネント panel-container-adaptive-forms-core-component

フォーム要素の整理：関連するフォーム要素をグループ化し、ユーザーがフォームを理解して移動しやすくすることができます。

フォーム構造の改善：フォーム要素をパネルにグループ化すると、フォームの全体的な構造と読みやすさが向上して理解しやすくなります。

折りたたみ可能なセクションの作成：パネルを使用して、折りたたみ可能なセクションを作成できます。このセクションは、複雑なフォームフィールドやあまり頻繁に使用されないフォームフィールドを隠すのに役立ち、フォームをシンプルで使いやすいものにできます。

操作性の向上：パネルを使用してフォーム要素を整理すると、フォームがより簡単で使いやすくなり、完了率が高くなります。

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

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

タイトルのリッチテキストを許可 - この機能により、ユーザーは、太字、斜体、下線付きのテキスト、様々なフォント、フォントサイズ、カラー、追加オプションなどの機能を組み込んで、プレーンテキストのタイトルを書式設定でき、視覚的なプレゼンテーションとカスタマイズが強化されます。 これにより、ドキュメント、web サイト、アプリケーション内でタイトルを目立たせる際の柔軟性とクリエイティブなコントロールが向上します。
「タイトルのリッチテキストを許可」 チェックボックスをオンにすると、コンポーネントのタイトルをスタイル設定するための書式設定オプションが表示されます。 使用可能なすべての書式設定オプションにアクセスするには、 タブをクリックします。

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

フォームの送信時に子コンポーネントのデータをグループ化（オブジェクトにデータを含める） - このオプションを選択すると、子コンポーネントのデータが親コンポーネントの 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 で外部データソースとやり取りするフォームを作成し、データの収集と管理においてシームレスなユーザーエクスペリエンスを提供できます。

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

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

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

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

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

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

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

• カスタムテキスト：ARIA アクセシビリティラベルにカスタムテキストを使用する場合は、このオプションを選択します。 このオプションを選択すると、「カスタムテキスト」ダイアログボックスが表示されます。 関連情報は、「カスタムテキスト」ダイアログボックスで追加できます。
• 説明：ARIA アクセシビリティラベルの説明を使用する場合は、このオプションを選択します。
• タイトル：ARIA アクセシビリティラベルのタイトルを使用する場合は、このオプションを選択します。
• 名前：ARIA アクセシビリティラベルの名前を使用する場合は、このオプションを選択します。
• なし：ARIA アクセシビリティラベルに追加しない場合は、このオプションを選択します。

スクリーンリーダーが通知を行うための HTMLの役割 - HTMLの役割は、スクリーンリーダーなどの支援テクノロジーに対する HTML 要素の目的を指定するための属性です。 役割の属性は、要素に追加のコンテキストと意味論的意味を提供するために使用されます。これにより、スクリーンリーダーがコンテンツを解釈して読み上げやすくなります。 例えば AEM Formsでは、フォームフィールドのラベルが「label」という役割を持ち、入力フィールドが「textbox」という役割を持つ場合があります。 これにより、スクリーンリーダーはラベルと入力フィールドの関係を理解し、ユーザーに対して正しく通知できるようになります。

レイアウト - ウィザードには固定レイアウト（シンプル）または柔軟なレイアウト（レスポンシブグリッド）を使用できます。 シンプルなレイアウトでは、すべてを固定した状態に保ち、レスポンシブグリッドでは、必要に応じてコンポーネントの位置を調整できます。 例えば、レスポンシブグリッドを使用して、「名」、「ミドルネーム」、「姓」を 1 行にフォーム内で整列できます。

レイアウトを無効にする：コンポーネントの編集ダイアログでのレイアウト選択を無効にするには、このオプションを選択します。

背景画像を有効にする：このオプションを使用すると、ユーザーはパネルの設定を指定して、視覚的な魅力を高めるための視覚的な背景を含めることができます。

背景色を有効にする：このオプションを使用すると、パネルの背景色を設定または変更できます。 この機能は、一般にユーザーインターフェイスのデザインで使用され、大きなインターフェイス内のパネルの外観をカスタマイズできます。 「背景色を有効にする」オプションを選択すると、「スウォッチのみ」オプションが表示されます。 「スウォッチのみ」オプションを使用すると、「追加」ボタンを使用して、パネル内の背景、テキスト、その他の視覚要素のカラーを指定または選択できます。

デフォルトの CSS クラス：アダプティブフォームのパネルコンテナコアコンポーネントにデフォルトの CSS クラスを指定できます。

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

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

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

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

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