グリッドボタン

グリッドツールバーのボタンは、ユーザーが MainGrid または SubGridでレコードとどのように操作するかを制御します。ボタンは Buttons レンダリングフラグメント内に配置され、自動的にグリッドのツールバーに表示されます。

ボタンカテゴリ

グリッドボタンは、記録操作の扱い方に基づいて3つのカテゴリーに分かれます。

  • ダイアログボタン — ダイアログ内でフォームを開き、ページを離れずにレコードを作成または編集できます。
  • ナビゲーションボタン — レコードの作成や編集のために別のページURLに移動します。
  • アクションボタン — 記録の削除、リンク、解除、エクスポートなどの操作を直接実行できます。

適切なアプローチの選択

ユーザーがどれだけコンテキストを必要とし、どれだけ新しい状態が必要かに応じてボタンの形状を選びましょう。以下の3つのバケットは典型的なケースをカバーしています。

  • ダイアログ(インライン) — フォームが単一のダイアログに収まり、ユーザーが現在のページに留まる恩恵がある場合(例:アカウントレコードに連絡先を追加し、保存されていない編集履歴を失わない場合) NewRecordGridButton / OpenRecordGridButton を使用します。 Behavior="GridActionBehavior.WithGridContext" (デフォルト)と組み合わせて、新しいレコードのセーブを親コンテキストのトランザクションコミットに折りたたみます。
  • ナビゲーション(全ページ) — 作成や編集がダイアログでは十分に提供できない豊かな表面を必要とする場合、 NavigateNewRecordGridButton / NavigateOpenRecordGridButton を活用してください:多くのフィールド、複数のタブ、関連レコード、添付ファイル、共有可能なURL。ルートは独自の RecordContextを持っているため、親グリッドはフォームの複雑さを認識する必要はありません。
  • ウィザード(多段階ダイアログ) — フォームのフィールドが十分で画面が混雑しているように感じるが、入力が相互依存しているため、ページを分割してもナビゲーションコストが見合う場合に NewRecordGridButton FormType="FormType.WizardForm" を使います。共通の形状:1ページ目は身元や分類、2ページ目は1ページ目の選択に依存する詳細を表します。

セーブフローおよび振る舞いモード

すべてのダイアログベースのグリッドボタン(NewRecordGridButton、 OpenRecordGridButton、M2Mのリンク/アンリンクペア)は、基盤となるDataverseコールの発生を制御する Behavior パラメータを受け付けています。この2つの値は、実質的に異なるリクエストシーケンスにマッピングされます:

行動 = 即時

ダイアログの保存ボタンは、 ExecuteMultipleAsync経由でDataverseに直接作成/更新/関連付け/解除リクエストを送信し、グリッドを更新してからダイアログを閉じます。周囲の MainContext 関係者や RecordContext (もしあれば)は変化を感じていません。すでにコミットしています。

  1. ユーザーはダイアログで「保存」をクリックします。
  2. ダイアログは検証を行い、その後1つ以上の OrganizationRequestを ExecuteMultipleAsyncに送ります。
  3. サーバーが戻ってきます。グリッドが更新されます。会話は終わる。

このタイミングを選べばいい:ダイアログが単独で(ページレベルのセーブボタンが不要)、またはユーザーが本当に各行レベルのアクションを独立したコミットにしたい場合。ここでの各セーブは独立しており、複数行のワークフローの一部完了はサーバー上で残ります。

Behavior = WithGridContext(デフォルト)

ダイアログの保存ボタンは、グリッドの保留キュー(Blazorでは_rowsToCreate / _rowsToUpdate 、 useGridContext()ではReact対応)でリクエストを段階化し、ダイアログを閉じます。実際のDataverseコールは、周囲の MainContext / RecordContextの保存ボタンが押されるまで発動しません。

  1. ユーザーがダイアログで保存→レコード(または更新/アソシエイト/解除)をグリッド上でキューに置きます。
  2. 会話が閉じる。ページの親コンテキストが IsDirty=trueに切り替わり、ページレベルの保存ボタンが有効になります。
  3. ユーザーはページレベルの保存をクリックし→、キューに待たれたグリッド変更+親レコードの更新+他のすべての子孫の保留中のリクエストが1つの ExecuteMultipleAsyncにまとめられます。
  4. サーバーが戻ってきます。ページが更新されます。列が空き、 IsDirty は元に戻る。

このタイミングを選んでください:ページには親のRecordContext保存ボタンがあるので、ユーザーは「ページ全体を保存する」という意味論を期待し、部分的なコミット(親は保存済み、子行は保存しない)は、すべてをまとめてロールバックするよりも悪い結果になります。そのため、これがデフォルトです。

デフォルトはWithGridContextです

WithGridContext はすべてのダイアログベースのボタンのデフォルトであり、Immediatelyはオプトインです。もしグリッドが親コンテキスト(上にレコードがないスタンドアロンのリストページ)の外にある場合、キューは排水する場所がなく、ダイアログは自動的に「即時セマンティクス」に戻ってしまいます。

NewRecordGridButton

新しいレコードを作成するためのダイアログフォームを開きます。Razorコンポーネントをフォームとして表示する指定の型パラメータ TForm が必要です。

ダイアログが表示される位置を Location で制御できます: DialogLocation.Center (デフォルト)、または DialogLocation.Right または DialogLocation.Left の調整可能なサイドパネル(Reactではlocation="panel" または "panel-left" )です。各テーブルのパネルはユーザーが設定した幅を記憶します。 EnablePanelResizing を固定幅で false に設定します。

標準フォーム(FormType.Form)かマルチステップウィザード(FormType.WizardForm)のどちらかを選ぶためにFormTypeを使いましょう。

Behaviorを使ってレコード作成のタイミングを制御します:GridActionBehavior.ImmediatelyはすぐにDataverseに保存し、GridActionBehavior.WithGridContext(デフォルト)は親コンテキストがコミットされるまで保存を延期します。

React Blazor

標準形の例

TForm型パラメータは、フォームレイアウトを定義するRazorコンポーネントを指定します。標準フォームとは、エディタコンポーネントを含むRazorコンポーネントのことです。タブやセクション、必要なレイアウトなど、すべてを含めることができます。

React Blazor

ウィザードフォームの例

ウィザードフォームは作成プロセスを複数のステップに分割します。各ステップを WizardRecordPage コンポーネントで定義します。ウィザードモードを有効にするにはボタンの FormType="FormType.WizardForm" を使います。

React Blazor

注記

ウィザードフォームを使う場合は、NewRecordGridButtonにFormType="FormType.WizardForm"を設定してください。ウィザードは「戻る/次へ」ナビゲーションを表示し、各ページを検証してから進みます。

ページごとの検証

各 WizardRecordPage デフォルトは ForceSuccessfulValidationBeforeSave="true"で、ウィザードの「次」ボタンは進行前にアクティブなページの検証器を実行し、必要欄が空または無効であれば遷移をキャンセルします。オプションフィールドのみを含むページに false 設定し、ユーザーがスキップできるようにします。最終ページの「終了」ボタンはこのフラグに関係なく常に有効です。サーバー側で作成を拒否するしかありません。

React Blazor

ページをまたいだ共有記録

1つのNewRecordGridButton内のすべてのWizardRecordPageコンポーネントは同じ基盤となるTableRecordオブジェクトを共有しており、ページ1のfirstname編集とページ2のannualincome編集は、最後に単一の作成ペイロードにまとめられます。ページごとのRecordContextは同じレコードインスタンスにバインドされるため、ステップ間のナビゲーションは進行中の編集を保持します。

OpenRecordGridButton

選択したレコードを編集するためのダイアログフォームを開きます。 NewRecordGridButtonと同様に、 TForm 型パラメータが必要です。複数のレコードを選択すると、フォームは共有フィールドを表示し、選択したすべてのレコードに変更を適用します。

グリッド内の行をダブルクリックすると自動的に編集ボタンが作動します。グリッド上の AllowNavigateOnRowDoubleClick="false" を設定してダブルクリックハンドラーを抑制してください。

デフォルトでは、テーブルのプライマリーネーム列は各行でハイパーリンクとして表示され、リンクをクリックするとダブルクリックと同じ編集アクションがトリガーされます。グリッド上の AllowNavigateOnPrimaryNameClick="false" を設定してハイパーリンクを抑制し、プライマリーネームセルをプレーンテキストとして表示してください。ハイパーリンクは OpenRecordGridButton や NavigateOpenRecordGridButton が登録された場合にのみ表示されるため、編集ボタンのないグリッドは影響を受けません。

React Blazor

URLに移動して新しいレコードを作成します。 Url パラメータをターゲットページに設定します。 SubGridで使用する場合、親レコードの関係コンテキストは自動的にクエリ文字列パラメータとして付加されます。

OnClickコールバックを使ってグリッドコンテキストに基づいて動的にURLを設定します。これは、URLが選択したビューのテーブルに依存するマルチテーブルグリッドで有用です。

React Blazor

選択したレコードを編集するためにURLにナビゲートします。 Url パラメータは、選択したレコードのIDのプレースホルダーとして {0} をサポートしています。

React Blazor

カスタムラベル、アイコン、URLを備えた汎用ナビゲーションボタンです。これは、新規や編集パターンに合わないカスタムナビゲーションアクションに使うべきです。

React Blazor

DeleteRecordGridButton

確認を求めるプロンプトの後に選択したレコードを削除します。 Mode を使って、レコードを BulkOperationMode.Individually (進捗とともに一つずつ)削除するか、あるいは一括で削除するかを制御します。

React Blazor

LinkExistingRecordGridButton

検索ダイアログを開き、多対多関係を通じて既存レコードを見つけて関連付けます。N:N関係の SubGrid にのみ適用されます。

React Blazor

UnlinkExistingRecordGridButton

確認を求めた後、選択された記録を多対多の関係から切り離します。N:N関係の SubGrid にのみ適用されます。

React Blazor

ExportGridButton

ユーザーが見るグリッドの表示に一致するレコード(検索、並べ替え、フィルターを含む)をすべてExcelのワークブックとしてダウンロードします。グリッドがエクスポートを担当するため、グリッドが読み込まれてエクスポートが実行されるまでボタンは無効にされます。 Format ファイルの種類(現在のExcel)を選択します。 Label、 Icon 、 Tooltip はデフォルトを上書きします。ワークブックに何が入っているか、エクスポートで許可されるレコード数については MainGrid を参照してください。

React Blazor

グリッドボタン

現在のGridContextを受け取る完全カスタムボタンで、OnClickコールバック機能を備えています。これを使ってカスタムツールバーのアクションを実装してください。

React Blazor

一般的なパラメータ

  • Behavior — 操作が即時実行されるか(GridActionBehavior.Immediately)か、親コンテキストが保存されるまで延期されるか(GridActionBehavior.WithGridContext)制御。
  • Mode — 削除/リンク/アンリンクボタンは、進行状況フィードバック付きで個別に実行するか、単一のバッチリクエストで実行するかを制御します。
  • IsButtonEnabled / IsButtonVisible — 現在の行選択に基づいてボタンの状態を制御する述語。
反応してください ブレイザー

GridButton クラス

パラメータ

名称
種類
デフォルト
概要
AppearanceButtonAppearance?
Subtle
ツールバーボタンの視覚的な外観。デフォルトは ButtonAppearance.Subtle つまり、ボタンは静止時は透明と表示され、ホバー時には背景だけが描かれます— グリッドのリフレッシュボタンと設定ボタンに対応しています。グリッドのスコープ化されたCSS (FluentGridBase.razor.css)ピン― ―ニュートラル・フィル・ステルス・レスト へ 透明であるため、ステルス休止状態は本当にフィルがありません。ボタンごとにオーバーライド カスタムアクションは異なる視覚的な重さを求めます(例: ButtonAppearance.Primary 主要な行動呼びかけとして。
Enabledbool?
True
GridButton.IsButtonEnabled述語結果に関係なく、ボタンの有効状態を上書きします。
IconIcon?
ボタンにオプションのアイコンが表示されます。
IsButtonEnabledFunc<IEnumerable<GridRowContext>, bool>
現在の行選択に対して、ボタンが有効かどうかを判定するために述語を評価します。
IsButtonVisibleFunc<IEnumerable<GridRowContext>, bool>
現在の行選択に対して、ボタンが見えるかどうかを判定する述語です。
IsOpenRecordButtonbool
False
グリッドの「編集」ボタンが指定されています。グリッド上でこのプロパティを「true」に設定するボタンは1つだけです。 このボタンのイベントハンドラは、グリッド内の行が「ダブルクリック」されたときに呼び出されます。
Labelstring?
ボタンに表示されるテキストラベル。
Tooltipstring?
ユーザーがボタンにカーソルを合わせるとオプションのツールチップが表示されます。
名称: Appearance
種類: ButtonAppearance?
デフォルト: Subtle
概要: ツールバーボタンの視覚的な外観。デフォルトは ButtonAppearance.Subtle つまり、ボタンは静止時は透明と表示され、ホバー時には背景だけが描かれます— グリッドのリフレッシュボタンと設定ボタンに対応しています。グリッドのスコープ化されたCSS (FluentGridBase.razor.css)ピン― ―ニュートラル・フィル・ステルス・レスト へ 透明であるため、ステルス休止状態は本当にフィルがありません。ボタンごとにオーバーライド カスタムアクションは異なる視覚的な重さを求めます(例: ButtonAppearance.Primary 主要な行動呼びかけとして。
名称: Enabled
種類: bool?
デフォルト: True
概要: GridButton.IsButtonEnabled述語結果に関係なく、ボタンの有効状態を上書きします。
名称: Icon
種類: Icon?
概要: ボタンにオプションのアイコンが表示されます。
名称: IsButtonEnabled
種類: Func<IEnumerable<GridRowContext>, bool>
概要: 現在の行選択に対して、ボタンが有効かどうかを判定するために述語を評価します。
名称: IsButtonVisible
種類: Func<IEnumerable<GridRowContext>, bool>
概要: 現在の行選択に対して、ボタンが見えるかどうかを判定する述語です。
名称: IsOpenRecordButton
種類: bool
デフォルト: False
概要: グリッドの「編集」ボタンが指定されています。グリッド上でこのプロパティを「true」に設定するボタンは1つだけです。 このボタンのイベントハンドラは、グリッド内の行が「ダブルクリック」されたときに呼び出されます。
名称: Label
種類: string?
概要: ボタンに表示されるテキストラベル。
名称: Tooltip
種類: string?
概要: ユーザーがボタンにカーソルを合わせるとオプションのツールチップが表示されます。

イベント

名称
種類
概要
OnClickEventCallback<GridContext>
ボタンを押すと発射され、現在の Components.GridContext をハンドラーに伝えます。
名称: OnClick
種類: EventCallback<GridContext>
概要: ボタンを押すと発射され、現在の Components.GridContext をハンドラーに伝えます。