リセットボタンコンポーネント reset-button

Last update: Fri Nov 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

トピック：
コアコンポーネント

作成対象：

開発者
管理者
ユーザー

アダプティブフォームのリセットボタンでは、すべてのフォームフィールドを消去したり、デフォルト値にリセットしたりすることができます。リセットボタンをクリックすると、フォームフィールドに入力されていたデータが削除され、フィールドが元の状態に戻ります。通常、リセットボタンは送信ボタンの代わりに使用され、ユーザーが誤ったデータや不要なデータをフォームに入力した場合にやり直すことができます。

使用方法 reasons-to-use-reset-button

アダプティブフォームでリセットボタンを使用する理由は次のとおりです。

ユーザーの利便性：各フィールドを手動で削除することなく、すばやく簡単にフォームを消去してやり直すことができます。
ユーザビリティの向上：誤りを簡単に修正したり、入力を変更したりできるので、ユーザーの操作性が向上します。
エラーの回避：間違ったデータを誤って送信してエラーや処理の問題が発生するのを防ぐことができます。
一貫性：リセットボタンはフォームの一般的な機能のため、ユーザーエクスペリエンスの一貫性が保たれます。
データ管理の向上:リセットボタンを使用すると、一貫性のないデータや間違ったデータを送信する可能性が低くなるので、フォームデータを整理して正確に保つことができます。

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

アダプティブFormsのリセットボタンコアコンポーネントは、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 以降

リリース 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

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

デザインダイアログ

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

カスタムプロパティ

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

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

グループ名：カスタムプロパティグループを識別する名前を指定できます。複数のカスタムプロパティグループを追加、削除または並べ替えることができます。カスタムプロパティグループを追加すると、次のオプションが表示されます。
- キーと値のペア：各カスタムプロパティグループの「追加」ボタンをクリックすると、複数のカスタムプロパティ名とカスタムプロパティ値を追加できます。
- 削除：タップまたはクリックすると、カスタムプロパティ名とカスタムプロパティ値を削除できます。
- 並べ替え：タップまたはクリックしてドラッグすると、カスタムプロパティ名とカスタムプロパティ値の順序を並べ替えることができます。