ボタンコンポーネント button-component-adaptive-forms-core-component

アダプティブフォーム内のボタンは、ユーザーがクリックしたときにアクションを開始できる UI 要素です。 ボタン要素を使用すると、フォームの送信、フォームのリセット、または別のページへの移動やカスタムコードのトリガーといった他のアクションを実行できます。 ボタンは、ボタンコアコンポーネントを使用して作成できます。

アダプティブフォームのルールエディターを使用すると、ボタンコンポーネントに対して様々なアクションを設定できます。 これらの操作には、web サイトを開く、フォームコンポーネントの表示や非表示、パネルやコンポーネントのインスタンスの追加、フォームの送信またはリセットなどが含まれます。

アダプティブフォームには、送信ボタンリセットボタンの別々のコンポーネントが備わっているので、ユーザーはフォームを簡単に送信またはリセットできます。 ボタンコンポーネントは、特定のニーズに基づいて、これらのアクションを実行するように柔軟に設定できます。

ユーザーはアダプティブフォームのルールエディターを使用して、ボタンコンポーネントでサポートされているすべてのアクションのリストにアクセスできます。 ルールエディターでは、ボタンがクリックされたとき、フォームが読み込まれたとき、またはフィールド値が変更されたときなど、様々なイベントによってトリガーされるルールを作成できます。 これらのルールを使用して、コンポーネントの表示や非表示、フィールド値の設定、フォームの送信など、様々なアクションを実行できます。

ボタンの例

使用方法 reasons-to-use-button

アダプティブフォームにボタンを含めるメリットとしては、次のようにいくつかの理由があります。

  • フォームの送信:通常、ボタンはフォームを送信するために使用され、ユーザーは入力したデータをサーバーに送信して処理できます。

  • フォームのリセット:ボタンを使用してフォームをリセットし、ユーザーが入力したすべてのデータを消去することもできます。

  • ナビゲーション:ボタンを使用して、フォームの異なるセクション間や web サイトの異なるページ間を移動できます。

  • イベントの処理:ボタンを使用して、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

「設定」ダイアログを使用すると、ボタンに関する訪問者のエクスペリエンスを簡単にカスタマイズできます。 また、簡単にボタンのプロパティを定義して、シームレスなユーザーエクスペリエンスを実現することもできます。

「基本」タブ basic-tab

「基本」タブ

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

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

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

    リッチテキストのサポート

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

  • 非連結フォーム要素としてマーク:どのスキーマにもリンクされていないフォームフィールドを設定する場合は、このオプションを選択します。 このオプションを使用すると、データソースを更新せずにデータを保存できます。 また、標準のデータベース統合とは別に、カスタム方法でデータを処理できます。
  • コンポーネントを非表示 - フォームでコンポーネントを非表示にするには、このオプションを選択します。 このコンポーネントは、他の目的(ルールエディターでの計算に使用するなど)にも利用できます。 これは、ユーザーが表示する必要のない情報や直接変更した情報を保存する必要がある場合に役立ちます。
  • コンポーネントの無効化 - コンポーネントを無効にする場合は、このオプションを選択します。 エンドユーザーは、無効になっているコンポーネントをアクティブにしたり、編集したりすることはできません。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的(ルールエディターでの計算に使用するなど)にも利用できます。

「ヘルプコンテンツ」タブ help-content

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

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

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

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

アクセシビリティ accessibility

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

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

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

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

デザインダイアログは、ボタンコンポーネントの CSS スタイルを定義および管理するために使用されます。

「スタイル」タブ styles-tab

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

デザインダイアログ

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

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

カスタムプロパティ

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

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

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

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

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

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

関連トピック see-also

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