Salesforce LWCで動的に選択リストを作る

これは何？

この記事は「24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022」の15日目の記事です。10日後に立派なSalesforceエンジニアになるために今日からはLightning Web Component (LWC)で動的な選択リストを作ってみたいと思います。

何を作る？

lightning-comboboxを使うことで選択肢リストを作ることができる。サンプルでは以下のように選択肢を定義しているが、これだとメンテナンス性が悪いので、このように定義リストをコード内に書くのではなく、オブジェクトから動的にとってくるようにしたい。

select.js

    get options() {
        return [
            { label: 'New', value: 'new' },
            { label: 'In Progress', value: 'inProgress' },
            { label: 'Finished', value: 'finished' },
        ];
    }

今回は例としてAccountオブジェクトにある「会社形態(Ownership)」という選択肢リストに登録されている選択肢をとってきて、comboboxの選択肢として動的に表示する。

完成したコンポーネントのイメージ

作り方

@wireデコレータを使うことでApexなしにオブジェクトから選択肢を取得してくることができる。
今回はgetPickListValuesを使って選択リスト値を取得してこようと思うが、このメソッドを呼び出すためにはレコードタイプIDを指定する必要があるので、まずはレコードタイプIDの取得を行う。
レコードタイプIDはgetObjectInfoから取ってくる。getObjectInfoのサンプルコードを参考に以下のようにレコードタイプ名を指定してレコードタイプIDを取得する。

select.js

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT})
    objectInfo({data, error}) {
        if(data) {
            const rtis = data.recordTypeInfos;
            this.recordTypeId = Object.keys(rtis).find(rti => rtis[rti].name === '取ってきたいレコードタイプ名');
        } else if(error) {
            console.log('error');
        } 
    }

これでレコードタイプIDが取ってこれたのでgetPickListValuesにrecordTypeIdを渡して選択肢リストを取得する。

select.js

    @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: ACCOUNT_OWNERSHIP_FIELD })
    ownershipOptions;

これで選択肢リストがownershipOptionsに渡されるのであとはテンプレート側からcomboboxを呼び出すときに選択肢として指定する。ownershipOptions.data.valuesとすることで目的の配列が取得できる。またownershipOptionsが取得できる前にページを表示しようとするとエラーで落ちてしまうのでif:true={ownershipOptions.data}を忘れずに。

select.html

<div if:true={ownershipOptions.data} class="wrapper">
    <lightning-combobox
    label="会社形態"
    options={ownershipOptions.data.values}
    data-field-name="Ownership"
    onchange={handleOwnershipChange}
></lightning-combobox>
</div>

まとめ

select.js

import { LightningElement, wire } from "lwc";
import { getPicklistValues, getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import ACCOUNT_OWNERSHIP_FIELD from '@salesforce/schema/Account.Ownership';

export default class AccountSearch extends LightningElement {
    recordTypeId = null;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT})
    objectInfo({data, error}) {
        if(data) {
            const rtis = data.recordTypeInfos;
            this.recordTypeId = Object.keys(rtis).find(rti => rtis[rti].name === 'レコードタイプ名');
        } else if(error) {
            console.log('error');
        } 
    }

    @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: ACCOUNT_OWNERSHIP_FIELD })
    ownershipOptions;
}

select.html

<template>
    <lightning-card  title="動的選択肢リスト">
        <lightning-layout>
            <lightning-layout-item padding="around-small">
                <div if:true={ownershipOptions.data} class="wrapper">
                    <lightning-combobox
                    label="会社形態"
                    options={ownershipOptions.data.values}
                    data-field-name="Ownership"
                    onchange={handleOwnershipChange}
                ></lightning-combobox>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

これでcomboboxの選択肢をオブジェクトの項目から動的に取ってくることができた！
ちなみにレコードタイプがデフォルトのもの以外に設定されていない時はもうちょっとシンプルでこれだけでOK。

select.js

export default class AccountSearch extends LightningElement {
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    accountObjectInfo;

    @wire(getPicklistValues, { 
             recordTypeId: '$accountObjectInfo.data.defaultRecordTypeId', 
             fieldApiName: ACCOUNT_OWNERSHIP_FIELD })
    ownershipOptions;
}

最後に

今日はLightning Web Component (LWC)で動的な選択リストを作ってみました。自前で検索フォームとかを作る時にはとても役に立ちそう！
LWC関連は一旦ここまでにして、明日はVisualforceページについてみていこうと思います。