アカウント
一次接触
LookupRecordContextコンポーネントは親RecordContextのルックアップフィールドで参照されたレコードを読み込み、編集アクセスを提供します。BaseColumnEditから継承するため、他のエディタと同様にColumnNameパラメータで列にバインドします。
RecordContext内にLookupRecordContextを配置し、ルックアップフィールドにマッピングするColumnNameを指定すると、コンポーネントは親レコードからルックアップ値を自動で読み取り、Dataverseから参照されたレコードを取得し、それをネストRecordContextとして公開します。LookupRecordContext内に置かれたエディタは、検索したレコードのフィールドにバインドします。
ColumnNameパラメータは親レコード上のルックアップカラムを参照しなければなりません。コンポーネントはこれを使ってターゲットテーブルとIDを記録します。
{/* <LookupRecordContext> 編集は</LookupRecordContext>
LOOKED-UPレコードのテーブル — アカウントではなくリンクされた連絡先です。 */}
<RecordContext table="account" queryParameterName="id">
<LookupRecordContext columnName="primarycontactid">
<TextEdit columnName="firstname" />
<TextEdit columnName="lastname" />
<TextEdit columnName="emailaddress1" />
</LookupRecordContext>
</RecordContext><RecordContext TableName="account" QueryParameterName="id">
<LookupRecordContext ColumnName="primarycontactid">
<ColumnEdit ColumnName="firstname" />
<ColumnEdit ColumnName="lastname" />
<ColumnEdit ColumnName="emailaddress1" />
</LookupRecordContext>
</RecordContext>RecordContextと同様に、ChildContentの代わりにContextTemplateパラメータを使って、マークアップの対象TableRecord直接アクセスできます。
{/* Reactには <ContextTemplate> — LOOKED-UP レコードを読んで</ContextTemplate>みてください
子コンポーネント内の「useRecordContext」を通じて(ルックアップは
したがって、このフックは連絡先を返すものではなく、
アカウント)。 */}
function PrimaryContactHeading() {
const { record } = useRecordContext();
const first = String(record?.['firstname']?.value ?? '');
const last = String(record?.['lastname']?.value ?? '');
return <h3>主な接触: {first} {last}</h3>;
}
<RecordContext table="account" queryParameterName="id">
<LookupRecordContext columnName="primarycontactid">
<PrimaryContactHeading />
<TextEdit columnName="emailaddress1" />
</LookupRecordContext>
</RecordContext><RecordContext TableName="account" QueryParameterName="id">
<LookupRecordContext ColumnName="primarycontactid">
<ContextTemplate>
<h3>主な接触: @context["firstname"] @context["lastname"]</h3>
<ColumnEdit ColumnName="emailaddress1" />
</ContextTemplate>
</LookupRecordContext>
</RecordContext>LookupRecordContext内のフィールドの変更は、親のMainContextセーブ操作の一部として保存されます。OnBeforeSaveコールバックはカスタムロジックを実行したり、セーブをキャンセルしたりするために使えます。
function MyPage() {
const onBeforeSave = async () => {
// 検索したレコードを保存する前にカスタムロジックを適用します。
// 投げてセーブをキャンセルします。
};
return (
<MainContext>
<MenuBar>
<SaveContextButton />
<RefreshContextButton />
</MenuBar>
<RecordContext table="account" queryParameterName="id">
<TextEdit columnName="name" />
<LookupRecordContext
columnName="primarycontactid"
onBeforeSave={onBeforeSave}
>
<TextEdit columnName="firstname" />
<TextEdit columnName="lastname" />
</LookupRecordContext>
</RecordContext>
</MainContext>
);
}<MainContext>
<MenuBar>
<SaveContextButton />
<RefreshContextButton />
</MenuBar>
<RecordContext TableName="account" QueryParameterName="id">
<ColumnEdit ColumnName="name" />
<LookupRecordContext ColumnName="primarycontactid"
OnBeforeSave="OnBeforeSave">
<ColumnEdit ColumnName="firstname" />
<ColumnEdit ColumnName="lastname" />
</LookupRecordContext>
</RecordContext>
</MainContext>
@code {
private async Task OnBeforeSave(CancelEventArgs eventArgs)
{
// 検索したレコードを保存する前にカスタムロジックを
}
}RecordContextプロパティは、リフレッシュやダーティステートのチェックなどのプログラム操作のために内RecordContextへのアクセスを提供します。
{/* 外部のリファレンスハンドルはなく、Reactのイディオムは「子供」と書くことです
'useRecordContext' でネストされたコンテキストを表示し、必要なものを公開します
(こちらはリフレッシュボタンです)。フックはLOOKED-UPレコードの
コンテキストのため、『refresh()』は連絡先をリロードし、親アカウントはリロードしません。 */}
function RefreshContactButton() {
const { refresh } = useRecordContext();
return <button onClick={() => refresh()}>連絡先を更新してください</button>;
}
<LookupRecordContext columnName="primarycontactid">
<RefreshContactButton />
<TextEdit columnName="firstname" />
</LookupRecordContext><LookupRecordContext @ref="_lookupContext" ColumnName="primarycontactid">
<ColumnEdit ColumnName="firstname" />
</LookupRecordContext>
@code {
private LookupRecordContext _lookupContext;
private async Task RefreshContact()
{
await _lookupContext.RecordContext.RefreshAsync();
}
}以下の例は、primarycontactid検索フィールドにバインドされたLookupRecordContextを使って、プライマリコンタクトの詳細をインラインで表示するアカウントフォームを示しています。
名称 | 種類 | デフォルト | 概要 |
|---|---|---|---|
ChildContent | RenderFragment? | コンポーネントの子コンテンツ | |
ColumnName* | string | テーブルレコードからエディタをバインドするための論理カラム名。 | |
ContextTemplate | RenderFragment<TableRecord> | 読み込まれたレコードを受け取ったフラグメントをレンダリングし、表示や編集を行います。 | |
Description | string? | 説明はツールチップに表示されます。 | |
Disabled | bool? | エディターを無効にすべきか。 | |
DisplayLabelWhenAvailable | bool | True | ラベルが可能であれば表示するかどうかを明記しています。 |
DisplayTooltipWhenAvailable | bool | True | ツールチップが表示されるかどうかを指定します。 |
DisplayValidationErrorMessage | bool | True | コンポーネントが検証に失敗したときに検証エラーメッセージを表示するべきでしょうか? |
IsVisible | bool | True | エディターは見えますか? |
Label | string? | 編集者用のラベルとして表示されるテキスト。 | |
ReadOnly | bool? | エディターは読み取り専用であるべきです。 | |
RecordContext | RecordContext | プログラム操作のための内部 LookupRecordContext.RecordContext へのアクセスを提供します。 | |
Required | bool? | 価値が求められるかどうか。 | |
Value | LookupValue? | このコンテキストで管理される現在のルックアップ値(参照)。 |
ChildContentColumnName*ContextTemplateDescriptionDisabledDisplayLabelWhenAvailableDisplayTooltipWhenAvailableDisplayValidationErrorMessageIsVisibleLabelReadOnlyRecordContextLookupRecordContext.RecordContext へのアクセスを提供します。RequiredValue名称 | 種類 | 概要 |
|---|---|---|
OnBeforeSave | EventCallback<CancelEventArgs> | コールバックから電話がかかってきて、セーブ前に電話がかかってきた。セーブ操作をキャンセルすることが可能です。 |
ValueChanged | EventCallback<ColumnValueBase> | バウンド値を更新するコールバックを取得または設定します。 |
OnBeforeSaveValueChanged名称 | パラメータ | 種類 | 概要 |
|---|---|---|---|
GetValidationErrors | List<string> | 現在の検証エラーの集合を返します。 |
GetValidationErrors