ヘッダー header-adaptive-forms-core-component

アダプティブフォームのヘッダーコンポーネントとは、フォームのタイトル、ロゴまたは名前など、通常はフォーム上部のセクションを指します。ヘッダーには、フォームの目的の簡単な説明、フォームを作成した組織の名前、フォームに関するサポート連絡先など、その他の情報も含めることができます。ヘッダーは、ユーザーにフォームの概要を提供し、入力する情報のコンテキストを提供するために使用されます。これは、ユーザーがフォームの目的や正しい入力方法を理解するのに役立ちます。

例

使用方法 reasons-to-use-header

  • ブランディング:このヘッダーは、フォームを作成した組織のロゴや名前を表示することで、ブランドの認知度を上げ、信頼性を確立するのに役立ちます。

  • コンテキスト:このヘッダーではフォームの目的の簡単な説明を提供し、フォームが使用されるコンテキストをユーザーが理解できるようにします。

  • ナビゲーション:このヘッダーには、ユーザーが web サイトやアプリケーションの他の部分に移動するためのリンクやボタンを含めることができます。

  • 情報:このヘッダーには連絡先情報やヘルプリソースへのリンクを含めることができ、必要に応じてユーザーにヒントを提供できます。

  • ユーザーエクスペリエンス:このヘッダーは、ユーザーがフォームフィールドにアクセスして入力する際に直感的でわかりやすい方法を提供することで、より使いやすくフォームを作成するために使用します。

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

アダプティブフォームのアコーディオンコアコンポーネントは、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 未満と互換性があります。

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

技術的詳細 technical-details

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

設定ダイアログ configure-dialog

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

「画像」タブ image-tab

ヘッダーのこの部分には、ヘッダーのタイトルと画像が含まれます。

Imagetab

  • 画像アセット - このオプションを使用すると、マウスでのドラッグ&ドロップによって画像などのアセットをドロップできます。また、「参照」ボタンを使って、ローカルファイルシステムからファイルをアップロードすることも可能です。画像を追加すると、画像の下部に 3 つのボタンが表示されます。画像を追加すると、画像の下部に 3 つのボタンが表示されます。

    • 編集 - アセットエディターでアセットのレンディションを管理するには、「編集」をタップまたはクリックします。
    • 消去 - 現在選択されている画像を選択解除するには、「消去」をタップまたはクリックします。
    • 選択 - 「選択」オプションをタップまたはクリックすると、アセットフォルダーから別の画像を選択できます。
  • タイトル - このオプションは、ヘッダーに見出しを追加するために使用します。定義済みのテキストはダイアログボックスに含まれ、ユーザーが変更できます。

  • リンク先 - 参照 ​アイコンから見出しをフォルダーにリンクすることができます。

  • 説明 - 説明とは、特定の画像の目的に関する追加情報や説明を提供する簡単な説明文です。

  • サイズ (px) - ピクセルを増減して画像の長さと幅を調整できます。

accessibilitytab

  • 代替テキスト - このオプションは、視覚に障害のあるユーザー向けに、画像の代わりとなる短い説明文を入力するために使用されます。

  • 画像は装飾画像 - 画像が支援テクノロジーによって無視される場合(したがってその代替テキストが不要な場合)はオンにします。これは、装飾画像にのみ適用されます。

「テキスト」タブ text-tab

このセクションでは、ヘッダーに含めるテキストを入力できます。

関連記事 related-articles

関連トピック see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c