[lightning-combobox]を使用すればLWCで簡単に選択リストフォームを作成できます。
Salesforceの選択リスト項目で定義した値を使用したいなあ、と悩んでいる時に出会ったコンポーネントライブラリです。
- lightning-comboboxの使用方法
- LWCにおける選択リスト値の取得方法
今回はデフォルトのレコードタイプにおける選択リスト値のパターンと、
レコードタイプを指定した場合の選択リスト値のパターンの2パターンについてさらっと記事にしてみました。
前提：getPicklistValuesの使用
本記事では[getPicklistValues]を使用し、選択リスト値を取得してきます。
getPicklistValues を使用すると、指定したオブジェクトとフィールドに関連付けられた選択リストの値を取得できます。
使い方としては以下のような感じ。
まずはimportで宣言。
import { getPicklistValues } from 'lightning/uiObjectInfoApi';次に、@wire デコレーターを使用して、getPicklistValues を呼び出します。この際、recordTypeId と fieldApiName を指定して、取得する選択リストのフィールドを識別します。recordTypeId は、レコードのレコードタイプ ID を指定し、fieldApiName は取得する選択リスト項目の API 名を指定します。
@wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: ACCOUNT_INDUSTRY_FIELD })
industryOptions;lightning-comboboxの使用
デフォルトのレコードタイプにおける選択リスト値
それでは[lightning-combobox]を使用して画面に選択リストフォームを作成していきます。
まずはデフォルトのレコードタイプにおける選択リスト値を取得するパターンです。
import { LightningElement, wire } from 'lwc';
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
export default class RecordSearchLwc extends LightningElement {
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
accountObjectInfo;
@wire(getPicklistValues, { recordTypeId: '$accountObjectInfo.data.defaultRecordTypeId', fieldApiName: ACCOUNT_INDUSTRY_FIELD })
industryOptions;
}<template>
<div if:true={industryOptions.data} class="wrapper">
<lightning-combobox label="業種" options={industryOptions.data.values}>
</lightning-combobox>
</div>
</template>上記のjavascriptでは、@wire デコレータを使用して、getObjectInfo メソッドから返されるデータを処理しています。getObjectInfo メソッドは、指定されたオブジェクトのメタデータ情報を取得する便利なメソッドです。accountObjectInfoにその結果が格納されます。
取得したAccountのデフォルトのレコードタイプをgetPicklistValuesのrecordTypeId に指定し、リスト値を取得します。取得したリスト値をhtmlのlightning-comboboxで出力します。
レコードタイプを指定した場合の選択リスト値
続いてレコードタイプを指定した場合の選択リスト値の取得です。
Aboレコードタイプ指定の場合はちょっとひと手間加えます。
import { LightningElement, wire } from "lwc";
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_INDUSTRY_FIELD from '@salesforce/schema/Account.INDUSTRY';
export default class AccountContactSearch extends LightningElement {
recordTypeId = null;
@wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
objectInfo({data, error}) {
if(data) {
const recordTypeInfo = Object.values(data.recordTypeInfos).find(info => info.name === '法人取引先');
if(recordTypeInfo) {
this.recordTypeId = recordTypeInfo.recordTypeId;
} else {
console.error('Record type "法人取引先" not found.');
}
} else if(error) {
console.error('Error:', error);
}
}
@wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: ACCOUNT_INDUSTRY_FIELD })
industryOptions;
}
<template>
<div if:true={industryOptions.data} class="wrapper">
<lightning-combobox label="業種" options={industryOptions.data.values}>
</lightning-combobox>
</div>
</template>こちらも同じく、getObjectInfoを使用します。
上記のjavascriptではObject.values() を使用してレコードタイプ情報の配列を取得し、find メソッドを使用して特定のレコードタイプ名を持つ情報を見つけます。見つかった場合はそのレコードタイプの ID を recordTypeId に設定します。
注意点としてはレコードタイプ取得の際、info.nameはレコードタイプの表示ラベル（name）を使用します。getObjectInfoで取得できるrecordTypeInfosにDeveloperNameは含まれていないのでNameを使用しましょうってことです。こちらもhtmlに渡して完了です。
おわりに
今回はlightning-comboboxの使用、およびLWCにおける選択リスト値の取得方法についてでした。
どっちかというとレコードタイプの取得の方が使用頻度高そうですね。
使っていきます。
おわりです。
コメント