テキストコンポーネント text-adaptive-forms-core-component

アダプティブフォームのテキストとは、ユーザーが読むためにフォームに表示されるコンテンツを表します。 これには、テキストフィールドなどのフォーム要素のグループにラベルを付けるために使用されるテキストや、ユーザーに提供される追加の説明や情報などを使用できます。

これにより、フォームの構造を論理セクションに分割して、フォームを理解して完了しやすくすることができます。さらに、関連付けられている要素の簡単な説明を提供するアクセシビリティの目的でも使用できます。このようなテキストフィールドは、通常はフォームコンポーネントの近く(前後など)に表示されます。

テキストの例

使用方法 reasons-to-use-text-label

フォーム内でテキストを使用する理由はいくつかあります。

  • 説明の提供:テキストを使用して、フォームの入力方法や必要な情報に関する説明を提供できます。

  • コンテキストの提供:テキストを使用して、フォームの目的や情報を収集している組織など、フォームのコンテキストを提供できます。

  • フォームを論理セクションに分割:テキストを使用してフォームを論理セクションに分割することで、フォームを理解して完了しやすくすることができます。

  • ブランディングとアイデンティティ:組織の名前をフォームに含めるなど、ブランディングやアイデンティティを示す目的でテキストを使用できます。

バージョンと互換性 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

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

「基本」タブ

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

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

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

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

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

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

「スタイル」タブ styles-tab

タブを使用して、コンポーネントの CSS スタイルの定義と管理を行います。アダプティブフォームのテキストコアコンポーネントは、AEM のスタイルシステムをサポートしています。

デザインダイアログ

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

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

カスタムプロパティ

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

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

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

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

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

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

関連記事 related-articles

関連トピック see-also

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