レコードの読み込み

レコードの読み込みは、lightning-record-form を使用し、レコード ID を渡すことで、すべてマークアップ内で行うことができます。カスタムレイアウトが必要な場合は、lightning-record-view-form を使用します。フォームベースのコンポーネントではできないカスタマイズが必要な場合には、getRecord などのワイヤアダプタを使用してください。

lightning-record-form を使用したレコードの表示

レコードを表示するための最も簡単な方法は、lightning-record-form を使用することです。レコードは 2 つのモードで表示できます。

view: インライン編集が有効な出力項目を使用してフォームを読み込みます。編集可能な項目には編集アイコンが表示されています。ユーザが編集アイコンをクリックすると、フォームのすべての項目の編集ができる状態になり、フォームに [送信] ボタンと [キャンセル] ボタンが表示されます。
read-only: 参照のみモードでは、出力項目のみでフォームを読み込みます。フォームには、編集アイコンや [送信] ボタンおよび [キャンセル] ボタンは表示されません。

次のコードでは、指定された項目を使用して、ビューモードで取引先レコードを表示しています。項目の表示ラベルと値は、表示密度の設定に基づいて表示されます。ビューモードは、record-id が指定された場合のデフォルトです。

1<!-- myComponent.html -->
2<template>
3  <lightning-record-form record-id={recordId} object-api-name={objectApiName} fields={fields}>
4  </lightning-record-form>
5</template>

パフォーマンスが向上するように、できる限りレイアウトではなく項目を指定します。プロビジョニングされた項目をコンポーネントではなくシステム管理者が制御する場合にのみレイアウトを指定します。コンテキストユーザのレイアウトに割り当てられているすべての項目の受信をコンポーネントで制御する必要があります。

Note

実際のレコード ID を指定するか、またはこの例を取引先レコードページに配置することでレコード ID を継承します。

1// myComponent.js
2import { LightningElement, api } from "lwc";
3export default class MyComponent extends LightningElement {
4  @api recordId;
5  @api objectApiName;
6  fields = ["AccountId", "Name", "Title", "Phone", "Email"];
7}

例

次の例では、github.com/trailheadapps/lwc-recipes リポジトリにある recordFormDynamicContact コンポーネントを使用しています。

lightning-record-view-form を使用したカスタム項目レイアウトを持つレコードの表示

カスタム項目レイアウトでレコードを表示するには、lightning-record-view-form コンポーネントを使用します。フォームの項目を作成するには、lightning-output-field コンポーネントを使用します。個別の項目を含めることで、Lightning Design System のユーティリティクラス (グリッドシステムなど) を使用したカスタム項目レイアウトをデザインできます。

1<!-- recordViewCustomLayout.html -->
2<template>
3  <lightning-record-view-form record-id={recordId} object-api-name="Account">
4    <div class="slds-grid">
5      <div class="slds-col slds-size_1-of-2">
6        <lightning-output-field field-name="Name"></lightning-output-field>
7        <lightning-output-field field-name="Phone"></lightning-output-field>
8      </div>
9      <div class="slds-col slds-size_1-of-2">
10        <lightning-output-field field-name="Industry"></lightning-output-field>
11        <lightning-output-field field-name="AnnualRevenue"></lightning-output-field>
12      </div>
13    </div>
14  </lightning-record-view-form>
15</template>

実際のレコード ID を指定するか、またはこの例を取引先レコードページに配置することでレコード ID を継承します。

1// recordViewCustomLayout.js
2import { LightningElement, api } from "lwc";
3export default class MyComponent extends LightningElement {
4  // Expose a recordId property.
5  @api recordId;
6}

組織の表示密度の設定に合わせてフォームを設計するか、またはフォーム密度によって表示密度の設定を上書きできます。「フォームの表示密度の変更」を参照してください。

Note

getRecord を使用したカスタムユーザインターフェースでのレコードデータの表示

lightning-output-field を使用してレコードの項目を表示する方法を説明しました。カスタムユーザインターフェースでデータを表示するには、ワイヤアダプタの getRecord または getRecords を使用します。

次の例では、基本コンポーネントの lightning-formatted-text を使用して取引先名を表示しています。

1<!-- recordViewGetRecord.html -->
2<template>
3  <lightning-record-view-form record-id={recordId} object-api-name={accountObject}>
4    <div class="slds-grid">
5      <div class="slds-col slds-size_1-of-2">
6        <!-- Other record data here -->
7      </div>
8      <div class="slds-col slds-size_1-of-2">
9        <lightning-formatted-text value={nameValue} class="slds-text-heading_large">
10        </lightning-formatted-text>
11      </div>
12    </div>
13  </lightning-record-view-form>
14</template>

コンポーネントの JavaScript コードで、Account オブジェクトと Account.Name 項目への参照をインポートします。

getRecord ワイヤアダプタは、lightning-record-view-form で使用される標準 lightning-output-field ではなく、lightning-formatted-text コンポーネントにカスタム表示のための Name 項目を読み込みます。
getFieldValue(record, field) 関数は Name 項目の値を取得します。

1// recordViewGetRecord.js
2import { LightningElement, api, wire } from "lwc";
3/* Wire adapter to fetch record data */
4import { getRecord, getFieldValue } from "lightning/uiRecordApi";
5import ACCOUNT_OBJECT from "@salesforce/schema/Account";
6import NAME_FIELD from "@salesforce/schema/Account.Name";
7
8export default class AccountViewer extends LightningElement {
9  /** Id of record to display. */
10  @api recordId;
11
12  /* Expose schema objects/fields to the template. */
13  accountObject = ACCOUNT_OBJECT;
14
15  /* Load Account.Name for custom rendering */
16  @wire(getRecord, { recordId: "$recordId", fields: [NAME_FIELD] })
17  record;
18
19  /** Get the Account.Name value. */
20  get nameValue() {
21    return this.record.data ? getFieldValue(this.record.data, NAME_FIELD) : "";
22  }
23}

getRecord を使用した親レコードのデータの表示

レコードとその親レコードのデータを表示するには、前の例のように getRecord と共に lightning-record-view-form を使用します。{object}.{parentObject}.{field} の表記を使用して、親レコードのデータをインポートします。

次の例では、基本コンポーネントの lightning-formatted-email を使用して取引先レコードの所有者のメールアドレスを表示しています。

1<!-- recordViewGetRecordParent.html -->
2<template>
3  <lightning-record-view-form object-api-name={objectApiName} record-id={recordId}>
4    <lightning-messages></lightning-messages>
5    <lightning-output-field field-name={nameField}></lightning-output-field>
6
7    <div class="slds-form-element slds-form-element_stacked">
8      <span class="slds-form-element__label">Owner Email</span>
9      <div class="slds-form-element__control">
10        <lightning-formatted-email value={ownerField}> </lightning-formatted-email>
11      </div>
12    </div>
13  </lightning-record-view-form>
14</template>

コンポーネントの JavaScript コードは Account オブジェクトと Account.Owner.Email 項目への参照をインポートします。

getRecord ワイヤアダプタは、lightning-record-view-form で使用される標準 lightning-output-field ではなく、lightning-formatted-email コンポーネントにカスタム表示のための Account.Owner.Email 項目を読み込みます。
getFieldValue(record, field) 関数は Account.Owner.Email 項目の値を取得します。

1// recordViewGetRecordParent.js
2import { LightningElement, api, wire } from "lwc";
3
4import { getRecord, getFieldValue } from "lightning/uiRecordApi";
5import ACCOUNT_OBJECT from "@salesforce/schema/Account";
6import NAME_FIELD from "@salesforce/schema/Account.Name";
7import OWNER_EMAIL_FIELD from "@salesforce/schema/Account.Owner.Email";
8
9export default class RecordViewFormParentData extends LightningElement {
10  objectApiName = ACCOUNT_OBJECT;
11  nameField = NAME_FIELD;
12
13  @api recordId;
14  @api objectApiName;
15
16  /* Load Account.Owner.Email for custom rendering */
17  @wire(getRecord, {
18    recordId: "$recordId",
19    fields: [OWNER_EMAIL_FIELD],
20  })
21  record;
22
23  /* Get the Account.Owner.Email value. */
24  get ownerField() {
25    return this.record.data ? getFieldValue(this.record.data, OWNER_EMAIL_FIELD) : "";
26  }
27}

関連トピック

ワイヤサービスについて

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。