jデータガイドライン
Lightning データサービス
ワイヤサービスについて
レコードデータの取得
エラーの処理
ワイヤサービスでの基本コンポーネントの使用
Apex からの API のコール
この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
ワイヤサービスでの基本コンポーネントの使用
基本コンポーネントを使用することで、レコードデータの表示と操作を簡素化して開発をスピードアップできます。
ユーザが最も簡単に Salesforce レコードを表示、編集、作成するための方法は lightning-record*form コンポーネントを使用することです。「基本コンポーネントの比較」を参照してください。
Note
基本コンポーネントの使用によるユーザ入力の取得
カスタムユーザインターフェースを作成する場合や、lightning-record*form ではニーズを満たすことができない場合は、ワイヤサービスで他の基本コンポーネントを使用することを検討してください。たとえば、カスタムフォームの構築やレコードデータの表示には、lightning-input および lightning-formatted-* コンポーネントを使用します。
これらのコンポーネントの詳細は、「コンポーネントの参照」を参照してください。
lightning-checkbox-group1 つ以上のオプションを選択するための 2 つ以上のチェックボックスを表示します。
lightning-combobox選択可能なオプションのドロップダウンリストを表示します。
lightning-input指定されたユーザ入力の種別に応じて項目を表示します。
lightning-input-address住所の入力に対して複合項目を表示します。
ワイヤーサービスでの
lightning-inputの使用例については、github.com/trailheadapps/lwc-recipes リポジトリのldsCreateRecordコンポーネントを参照してください。lightning-input-location地理位置情報の入力に対して複合項目を表示します。
lightning-input-name名前の入力に対して複合項目を表示します。
lightning-input-rich-textコンテンツを書式設定するためのツールバー付きリッチテキストエディタを表示します。
lightning-radio-group1 つ以上のオプションを選択するための 2 つ以上のチェックボックスを表示します。
lightning-textarea複数行のテキスト入力項目を表示します。
lightning-input は多くの項目種別をサポートしていますが、異なる項目種別を操作する場合は他の基本コンポーネントの使用も検討してください。
ユーザインターフェースに、挨拶文の選択リストと [名] および [姓] 項目を含めたいとします。lightning-combobox を使用して挨拶文の選択リストを含めるか、または lightning-input-name を使用できます。次の例では、lightning-input-name を使用して、挨拶文の選択リストと [名] および [姓] 項目を現在値と共に表示しています。使用事例に最適な基本コンポーネントを決めるには、「コンポーネントの参照」を参照してください。
例: カスタムフォームの作成
次の例では、取引先責任者の挨拶文、名、および姓の値を表示して編集するためのカスタムフォームを作成しています。項目には、取引先責任者レコードからの現在値が表示されます。
lightning-record*form コンポーネントを使用することで、少ない行数のコードで同様の結果が得られます。
Note
1<template lwc:if={contact.data}>
2 <div class="slds-m-around_medium">
3 <lightning-input-name
4 label="Contact Name"
5 first-name={firstname}
6 last-name={lastname}
7 salutation={salutation}
8 options={salutations}
9 class="slds-m-bottom_x-small"
10 required>
11 </lightning-input-name>
12 </div>
13</template>
項目の初期値を表示するには、getRecord ワイヤアダプタを使用します。
lightning-input-name の選択リストオプションを入力するには。getPicklistValues ワイヤアダプタを使用します。次の例では、デフォルトのレコードタイプ ID を使用しています。現在選択されている挨拶文の値を表示するには、Contact.Salutation 項目の参照をインポートします。
1import { LightningElement, api, wire } from "lwc";
2import { getRecord } from "lightning/uiRecordApi";
3import { getPicklistValues } from "lightning/uiObjectInfoApi";
4
5import FIRSTNAME_FIELD from "@salesforce/schema/Contact.FirstName";
6import LASTNAME_FIELD from "@salesforce/schema/Contact.LastName";
7import SALUTATION_FIELD from "@salesforce/schema/Contact.Salutation";
8
9const namefields = [FIRSTNAME_FIELD, LASTNAME_FIELD, SALUTATION_FIELD];
10
11export default class GetContactName extends LightningElement {
12 @api recordId; // provided by the contact record page
13
14 @wire(getPicklistValues, { recordTypeId: "012000000000000AAA", fieldApiName: SALUTATION_FIELD })
15 salutationValues;
16
17 @wire(getRecord, { recordId: "$recordId", fields: namefields })
18 contact;
19
20 get firstname() {
21 return this.contact.data.fields.FirstName.value;
22 }
23
24 get lastname() {
25 return this.contact.data.fields.LastName.value;
26 }
27
28 get salutation() {
29 return this.contact.data.fields.Salutation.value;
30 }
31
32 // creates the options array for lightning-input-name
33 get salutations() {
34 let salutationOptions = [];
35 Object.entries(this.salutationValues.data.values).forEach((val) => {
36 let values = val[1];
37 salutationOptions.push({ label: values.label, value: values.value });
38 });
39 return salutationOptions;
40 }
41}基本コンポーネントを使用したレコードデータの表示
レコードデータを表示するための最も簡単な方法は、lightning-record-form または lightning-record-view-form を使用することです。カスタムユーザインターフェースにレコードデータを表示するには、以下の基本コンポーネントの使用を検討してください。これらのコンポーネントの詳細は、「コンポーネントの参照」を参照してください。
lightning-formatted-address住所複合項目用のコンポーネントです。
lightning-formatted-addressは住所をリンク付きで表示します。リンクをクリックすると、その場所が Google マップ上で示されます。リンクは新しいタブで開きます。住所を示して静的な地図を表示することで、コンテキストがより名書くになります。lightning-formatted-date-time日付または日付/時間項目用のコンポーネントです。
lightning-formatted-date-timeは日付と時間を表示します。lightning-formatted-emailメール項目用のコンポーネントです。
lightning-formatted-emailはmailto:URL スキームが付いているハイパーリンクとしてメールを表示します。lightning-formatted-location地理位置情報項目用のコンポーネントです。
lightning-formatted-locationはlatitude, longitudeの形式を使用して 10 進数の度数で地理位置情報を表示します。lightning-formatted-name名前項目用のコンポーネントです。
lightning-formatted-nameは、敬称とサフィックスを含めることができる名前を表示します。lightning-formatted-number通貨、数値、パーセント項目用のコンポーネントです。
lightning-formatted-numberは指定された形式で数値を表示します。lightning-formatted-phone電話項目用のコンポーネントです。
lightning-formatted-phoneはtel:URL スキームが付いているハイパーリンクとして電話番号を表示します。lightning-formatted-rich-textリッチテキスト項目用のコンポーネントです。
lightning-formatted-rich-textは許可リストに登録されているタグと属性を使用して書式設定されたリッチテキストを表示します。lightning-formatted-textテキスト項目用のコンポーネントです。
lightning-formatted-textはテキストを表示し、改行を禁則処理で置き換え、リンクを追加します。lightning-formatted-time時間項目用のコンポーネントです。
lightning-formatted-timeはユーザのロケール形式で時間を表示します。lightning-formatted-urlURL 項目用のコンポーネントです。
lightning-formatted-urlは URL をハイパーリンクとして表示します。
例: カスタムレコードと地図の表示
次の例では、取引先責任者レコードページに住所と静的な地図を表示します。住所または地図をクリックすると、Google マップ上でその場所が開きます。lightning-record-form および lightning-record-view-form コンポーネントは静的地図を提供しないため、この例では lightning-formatted-address コンポーネントを使用しています。
1<template>
2 <lightning-card title="Display Contact Address" icon-name="standard:contact">
3 <template lwc:if={contact.data}>
4 <div class="slds-m-around_medium">
5 <lightning-formatted-address
6 street={street}
7 city={city}
8 country={country}
9 province={state}
10 postal-code={postal}
11 show-static-map
12 ></lightning-formatted-address>
13 </div>
14 </template>
15 </lightning-card>
16</template>
住所複合項目を表示するには、getRecord ワイヤアダプタを使用します。
1import { LightningElement, api, wire } from "lwc";
2import { getRecord } from "lightning/uiRecordApi";
3
4import STREET_FIELD from "@salesforce/schema/Contact.MailingStreet";
5import CITY_FIELD from "@salesforce/schema/Contact.MailingCity";
6import STATE_FIELD from "@salesforce/schema/Contact.MailingState";
7import COUNTRY_FIELD from "@salesforce/schema/Contact.MailingCountry";
8import POSTAL_FIELD from "@salesforce/schema/Contact.MailingPostalCode";
9
10const FIELDS = [STREET_FIELD, CITY_FIELD, STATE_FIELD, COUNTRY_FIELD, POSTAL_FIELD];
11
12export default class GetContactAddress extends LightningElement {
13 @api recordId; // provided by the contact record page
14
15 @wire(getRecord, { recordId: "$recordId", fields: FIELDS })
16 contact;
17
18 get street() {
19 return this.contact.data.fields.MailingStreet.value;
20 }
21
22 get city() {
23 return this.contact.data.fields.MailingCity.value;
24 }
25
26 get state() {
27 return this.contact.data.fields.MailingState.value;
28 }
29
30 get country() {
31 return this.contact.data.fields.MailingCountry.value;
32 }
33
34 get postal() {
35 return this.contact.data.fields.MailingPostalCode.value;
36 }
37}The Japanese Summer '24 guide is now live
j