ダイアログのフォーム パターン
この記事では、ダイアログのフォーム パターンに関する情報を提供します。 ダイアログ ボックスは、ユーザーが明示的にコミットまたはキャンセルできる活動またはアクションを表します。 これは、ユーザーが特定のタスクやプロセスを開始し、システムが続行方法または続行するかどうかに関するユーザー入力を必要とする場合に使用されます。
用途
ダイアログ ボックスは、ユーザーが明示的にコミットまたはキャンセルできる活動またはアクションを表します。 これは、ユーザーが特定のタスクやプロセスを開始し、システムが続行方法または続行するかどうかに関するユーザー入力を必要とする場合に使用されます。 ダイアログはモーダルであり、ユーザーが親ページに戻る前にダイアログ内のコントロールと対話する必要があります。 ダイアログも複数のサイズを持つことができます。 ダイアログ サイズの選択は主観的なものであり、ダイアログ ボックスでモデル化したフォームの要素によって変化します。 次のサイズがあります。
- 小 – このサイズは 1 列幅のダイアログです。 ダイアログに比較的少量のコンテンツ (幅テーブルまたはその他の幅要素はなく、すべての単純なフィールド) が含まれている場合、このサイズを使用することができます。
- 中 – このサイズは 2 列幅のダイアログです。 ダイアログに、小型ダイアログ内にうまく収まらない多くのコンテンツが含まれているが、全幅ダイアログは必要ではない場合、このサイズを使用する必要があります。
- 大 – このサイズは 3 列幅のダイアログです。 ダイアログに、中間ダイアログ内にうまく収まらない多くのコンテンツが含まれているが、全幅ダイアログは必要ではない場合、このサイズを使用する必要があります。
- 最大 – 大きなダイアログはブラウザのビューポートのほぼ全幅です。 そのサイズはビューポートの幅に応じて異なり、必ず最大ダイアログ サイズ オプションになります。 このサイズは、ダイアログに幅の広い要素が多数ある場合、または異常に大きな水平スペース幅が必要な場合に使用します。
さまざまなダイアログ サイズに関する詳細については、「正しいダイアログ サイズを選択」で、この記事の付録にあるテーブルを参照してください。 そのテーブルをレビューすることを強くお勧めします。 このドキュメントでは、5 つのパターンについて説明します。
- ダイアログ - これは、基本的なダイアログ パターンです。 このダイアログは、他のダイアログ パターンのどれかを使用する必要がない場合に使用します。
- タブ付きダイアログ - これは、ダイアログ パターンのさらに特定のバージョンです。 これには、ダイアログのタブ コントロールが組み込まれています。 また、必要に応じて、タブのヘッダー、およびフッターを入力することができます。
- クイック タブ付きダイアログ - これはタブ付きダイアログ パターンとよく似ていますが、情報を整理するために通常タブの代わりにクイック タブを使用します。
- 二重タブ付きダイアログ - これはタブ付きダイアログ パターンによく似ていますが、最初のタブ コントロールの直後に 2 番目のタブ コントロールがあります。
- ダイアログ (読み取り専用) - このパターンは、編集できない情報フォーム用です。 ユーザーはタブまたはビュー セレクターを切り替えることはできますが、入力フィールドの直接操作は許可されていません。 このダイアログには、OK および Cancel ボタンの代わりに Close ボタンも含まれています。
ワイヤーフレーム
次のセクションでは、この記事に含まれている 4 つのダイアログ タイプのワイヤーフレームを示します。
ダイアログ
タブ付きダイアログおよびクイック タブ付きダイアログ
二重タブ付きダイアログ
ダイアログ (読み取り専用)
パターンの変更
Microsoft Dynamics AX 2012 以降に加えられるこのパターンへの主な変更を次に示します。
- フォームのキャプションは MainInstruction として機能します。 したがって、モデル化された MainInstruction コントロールは必要なくなりました。
- エラー メッセージの手動処理が必要なくなりました。
- 場合によっては、フォームのコンテンツが使用可能な高さを超えた場合にボタンでスライダーの一番下までスクロールできます。
- スライダー ダイアログ ボックスには、独自のメッセージ バーがあります (スライダーが開いたときに主要なメッセージ バーが半透明になるため)。
モデル
ダイアログ (basic) – 高度なレベル構造
設計
SecondaryInstruction (StaticText) [オプション]
ActionPane (ActionPane) [オプション]
DialogHeader (グループ、繰り返し可) [オプション]
DialogContent (Group、1..Nを繰り返す)
DialogCommitContainer (ButtonGroup)
- OKButton ($Button)
- OtherButton ($Button、繰り返し可) [オプション]
- CancelButton ($Button)
タブ付きダイアログおよびクイック タブ付きダイアログ – 高度なレベル構造
設計
SecondaryInstruction (StaticText) [オプション]
ActionPane (ActionPane) [オプション]
DialogHeader (グループ、繰り返し可) [オプション]
TabContent (タブ)
- TabPage (TabPage。1..N を繰り返し)
DialogFooter (グループ) [オプション]
DialogCommitContainer (ButtonGroup)
- OKButton ($Button)
- OtherButton ($Button、繰り返し可) [オプション]
- CancelButton ($Button)
二重タブ付きダイアログ – 高度なレベル構造
設計
SecondaryInstruction (StaticText) [オプション]
ActionPane (ActionPane) [オプション]
DialogHeader (グループ、繰り返し可) [オプション]
TabContent (タブ)
- TabPage (TabPage) [1..*]
TabContent (タブ)
- TabPage (TabPage) [1..*]
DialogFooter (グループ) [オプション]
DialogCommitContainer (ButtonGroup)
- OKButton ($Button)
- OtherButton ($Button、繰り返し可) [オプション]
- CancelButton ($Button)
ダイアログ (読み取り専用) – 高度なレベル構造
設計
SecondaryInstruction (StaticText) [オプション]
ActionPane (ActionPane) [オプション]
DialogHeader (グループ、繰り返し可) [オプション]
DialogContent (Group、1..Nを繰り返す)
DialogCommitContainer (ButtonGroup)
CloseButton ($Button)
コア コンポーネント
- Form.Design にダイアログ パターンを適用します。
- BP 警告に対処します:
- Design.Caption は空ではありません。
- このフォームは少なくとも 1 つのメニュー項目で参照される必要があります。
- StaticText.Text は空ではありません。
関連するパターン
一般的に使用されるサブパターン
UX ガイドライン
検証チェックリストには、フォームが UX ガイドラインに準拠しているかどうかを手動で確認する手順が示されています。 このチェックリストには、開発環境を通じて自動的に実施されるガイドラインは含まれていません。 ブラウザーでフォームを開いて、これらの手順を確認します。 標準フォーム ガイドライン:
- 標準フォーム ガイドラインは、全般的なガイドライン ドキュメントに統合されました。
ダイアログ ガイドライン:
- ダイアログ ボックスが最初に開いたときに、フォーカスは、ダイアログ ボックスの最初の編集可能なフィールドにある必要があります。
- 例外: ダイアログが読み取り専用の場合、フォーカスは閉じるボタンにある必要があります。
- ダイアログには、上部に主な指示がある必要があります。
- 指示が明細書である場合、最終的な期間を含めません。 指示が質問である場合、疑問符が含まれる必要があります。
- ユーザーへの二次命令は、オプションで含めることができ、ユーザーがダイアログ ボックスを理解また使用するのに役立つ追加情報を表示する必要があります。 2 番目の指示は、大文字小文字の完全な文で構成する必要があり、文末の句点を含める必要があります。
- ダイアログには、コンテンツ領域が必要です。
- 編集可能なダイアログ対象:
- コンテンツ領域には、タスクを完了するために必要なコントロールのみが含まれている必要があります。
- 検証エラーを回避するには、選択リスト、チェック ボックス、ラジオ ボタン、コマンド リンクなどの制約された入力コントロールを使用する必要があります。
- 可能な場合は、入力ごとに適切な既定値を指定する必要があります。
- コントロールでは、検証中に別のダイアログが表示しないようにする必要があります。
- 検証の問題を示す警告メッセージを、できるだけ早く メッセージ バーに表示する必要があります。
- 読み取り専用ダイアログ用:
- コンテンツ領域には、編集不可能なコントロールや、ビュー セレクターなど、ユーザーが表示するデータを切り替えることのみを許可するコントロールが含まれている必要があります。
- フィールドの値をプログラムにより変更しても、検証エラーは発生しません。
- ダイアログに複数のタブがある場合、最も多くのコンテンツがあるタブはダイアログの幅の選択を定義する必要があります。
- ダイアログには、コミットボタン領域が必要です。
- 編集可能なダイアログ ボックスのみに、主要な指示によって黙示されるアクションを起動するコミット ボタンがあります。
- ラベルはそれ自体が意味のあるのものである必要があり、主な指示への応答でなければなりません。
- 編集可能および読み取り専用両方のダイアログについては、右端のボタンは、副作用なしで操作をキャンセルするキャンセルボタンです。
- ダイアログの既定のボタンとしてマークされたボタンがあります。
- デフォルトボタンとして選択されているボタンは、ダイアログまたはドロップダイアログの主な指示など、ユーザーが実行しているタスクに対して最も安全で保護された応答でなければなりません。
- 安全性とセキュリティの要素でない場合は、クリックされる可能性が最も高いボタンまたはユーザーにとって最も便利なボタンをデフォルト ボタンとして選択する必要があります。
- 例外: コマンドを取り消す簡単で明白な方法がない限り、破壊応答を既定として選択しないでください。
ダイアログには、これらの要素がない必要があります。
- 情報ボックス
例
ダイアログ (basic)
フォーム: ProjTableCreate (プロジェクト管理と会計 > 共通 > プロジェクト > すべてのプロジェクトの順にクリックし、新規をクリックします。)
タブ付きダイアログ
フォーム: CaseDetailCreate (共通 > 共通 > ケース > すべてのケースの順にクリックして、新規をクリックします。)
クイック タブ付きダイアログ
この例では、このパターンを使用するフォームの例は現在含まれていないため、CaseDetailCreate フォームの修正バージョンを示しています。
二重タブ付きダイアログ
フォーム: PurchTableReferences (買掛金勘定 > 共通 > 発注書 > すべての発注書の順にクリックし、一般 > 関連情報 > 関連する注文の順にクリックします。)
ダイアログ (読み取り専用)
フォーム: SalesTablePostings (売掛金勘定 > 共通 > 販売注文 > すべての販売注文の順にクリックし、一般 > 関連情報 > 転記の順にクリックします。)
付録
よく寄せられる質問
このセクションには、このガイドライン/パターンに関連するよくある質問への回答があります。
未処理の問題
-
このパターンはダイアログの詳細リンクをどのように処理しますか。
- 詳細使用状況は、新しいパターンの追加を正当化する十分なケースがない限り、カスタム パターンと見なされます。
-
どのボタンでも使用するのではなく、CommandButtons を使用するよう強制的に OK/Cancel ボタンのパターンを修正する必要がありますか。
- 将来のこの変更の実行を検討しています。
正しいダイアログの幅を選択
コンテンツのタイプ | 小さいダイアログ | 中間ダイアログ | 大きなダイアログ | 完全なダイアログ | 摘要 |
---|---|---|---|---|---|
コンテンツの列 | スライダーは、コンテンツの 1 つの列を合わせます。 | スライダーは 2 列のコンテンツに適合します。 | スライダーは 3 列のコンテンツに適合します。 | スライダーは、ビューポート幅からピークを引いた値に適合します。 | 列の最大数は、列内のフィールドの幅に依存します。 したがって、幅は、x × 100% のフィールド サイズとして定義されます。 |
水平スクロール | 水平スクロールなし | 水平スクロールを避けてください。 | 水平スクロールを避けてください。 | OK、コントロール ボタンおよびコミット ボタンが表示されている場合 | |
垂直スクロール | 一般的なシナリオでは垂直スクロールがありません (クイック タブは特殊なケースで展開できます)。 それ以外の場合、中規模なダイアログを使用します。 | 有 | 有 | 有 | コンテンツの垂直スクロールを引き起こすためダイアログ内に大量のコンテンツを配置しないでください。 ダイアログが標準的な画面解像度で垂直方向にスクロールしている場合、ダイアログを大きくする必要があります。 |
クイック タブ | 強く非推奨 | OK だが非推奨 | 有 | 有 | |
タブ | 有 | 有 | 有 | 有 | タブを切り替えたりクイック タブを展開したりしても、ダイアログ サイズがジャンプすることはありません。 最大のタブ コンテンツは、ダイアログ サイズの選択を定義する必要があります。 |
リスト/階層 | 有 | 有 | 有 | 有 | |
フィールド グループ | 有 | 有 | 有 | 有 | |
入れ子になったフィールド グループ | 入り混じったレイアウト方向 (マトリックスまたは表形式のレイアウト) を持つ入れ子のフィールド グループなし | 複数行レイアウト | 複数行レイアウト | 有 | |
カスタム コントロール | 有 | 有 | 有 | 有 | |
グリッド | はい、ただし水平スクロールなし | はい、ただし水平スクロールなし | はい、ただし水平スクロールなし | 有 | 列の最大数は、列内のフィールドの幅に依存します。 したがって、幅は、x × 100% のフィールド サイズにより定義されます。 |