【LWC】選択リスト値を動的に取得する

はじめに

LWCでSalesforceの選択リスト項目を表示させるには、標準のlightning-input-fieldが使用できます。しかしdata-tableの中などで選択リストを実装するにはinput-fieldは使用できません。
comboboxという選択リストを実装するコンポーネントがあるのですが、これは下記のように選択リスト値をこちらで指定する必要があります。そのため選択リスト値が増えた場合コードの修正をする必要があります。
今回はdata-table内でコードの修正をしなくて済むように選択リスト値を動的に取得する方法について調べてみました。

options = [
    { label: 'New', value: 'new' },
    { label: 'In Progress', value: 'inProgress' },
    { label: 'Finished', value: 'finished' },
  ];

オブジェクトのレコードタイプを取得

まずレコードタイプのIDを取得します。
LWCには選択リスト値を取得するための標準ライブラリとしてgetPickListValuesとgetPickListValuesByRecordTypeがあるのですがどちらもレコードタイプIDを指定する必要があります。

@wire(getObjectInfo, { objectApiName: ACCOUNT})
opportunityInfo({data, error}) {
    if(data) {
        const rtis = data.recordTypeInfos;
        //console.log(Object.keys(rtis).find(rti => rtis[rti].name === 'マスタ'));
        this.recordType = Object.keys(rtis).find(rti => rtis[rti].name === 'マスタ');
    } else if(error) {
        console.log('error');
    } 
}

この例ではマスタレコードタイプのIDを取得してます。getObjectInfoで取得できるrecordTypeInfosにはdeveloperNameは入ってないためnameで取得する必要があります。デフォルトのレコードタイプの場合もう少し簡単に取得できるのですが今回は割愛します。

選択リスト値を取得

先ほど取得したレコードタイプIDを使用して選択リスト値を取得します。

 @wire(getPicklistValuesByRecordType, { recordTypeId: '$recordType', objectApiName: ACCOUNT})
  ratingValues({data, error}){
      if(data) {
        this.picklistValue = data.picklistFieldValues.Rating.values;
        for(let i = 0; i < this.picklistValue.length; i++) {
            this.options.push({label: this.picklistValue[i].label, value: this.picklistValue[i].value});
        }
        // 選択リスト値取得後にカラムセットを呼び出し
        this.setColumns();
      } else if(error) {
          console.log('error');
      }
  }

// カラムをセット
setColumns() {
    this.columns = [
        { label: 'Name', fieldName: 'Name', editable: true },
        { label: 'Account Number', fieldName: 'AccountNumber', editable: true },
        { label: '顧客番号', fieldName: 'customerNumber__c', type: 'inputtext',
            typeAttributes: {
                placeholder: '', value: { fieldName: 'customerNumber__c' } 
                , context: { fieldName: 'Id' } 
            } 
        },
        {
            label: 'Rating', fieldName: 'Rating', type: 'picklist', typeAttributes: {
                placeholder: 'Choose rating', options: this.options
                , value: { fieldName: 'Rating' } 
                , context: { fieldName: 'Id' } 
            }
        }
    ];
  }

これで下記のように動的に値を取得できるためメンテナンス性はあがると思います。
指定できるレコードタイプIDは１つなため、複数のレコードタイプの選択リスト値を表示する場合は別の方法をとる必要があります。
返却されたデータの構造についてはご自身でお試しください。
注意点としてはdata-tableで使用する場合、columnsを選択リスト値取得後に指定する必要があるということです。