【Lightning Web Component】checkbox-groupを試してみました

こんにちは、アンダーソンです。
今回はlightning-checkbox-groupを実装してみました。

複数の値をみやすく選択しやすくできるので、
UIの向上に繋がるのかなと思い試してみました。
静的、動的両方試してサンプルコードも置いていますので、
是非参考にしてみてください。

lightning-checkbox-groupの使い方

lightning-checkbox-groupは下記のようにマークアップしていきます。

<template>
    <lightning-card>
        <lightning-checkbox-group name="TestCheckBoxGroup"
                                  label="テストチェックボックスグループ"
                                  options={options}
                                  value={value}>
        </lightning-checkbox-group>
    </lightning-card>
</template>

import { LightningElement } from 'lwc';

export default class SelectorTest extends LightningElement {
    value = [];

    get options(){
        return [
            { label: 'Test1', value: 'option1' },
            { label: 'Test2', value: 'option2' },
        ];
    }
}

これで下記のように表示されます。

必須属性が

• name
• value
• label
• options

なのでこれを忘れると表示されないことに注意しましょう。

複数選択リストの値を表示させてみた

毎回固定値で先ほどのように選択リストの値を入れるわけにもいかないので、
次は動的に選択リストの値を取得してみました。

import { LightningElement, wire } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import MULTI_SECTION from '@salesforce/schema/Test1__c.Multiple_Selection__c';

export default class SelectorTest extends LightningElement {

    @wire(getPicklistValues,{ recordTypeId:'0126F000000w2fT', fieldApiName: MULTI_SECTION })
    multipleSelection;

    value = [];

    get options(){
        let options = [];
        let data = this.multipleSelection.data;
        if (data) {
            for ( let i = 0; i < data.values.length ; i++ ) {
                const option = data.values[i];
                options.push({label: option.label, value: option.value });
            }
            return options;
        } else {
            return null;
        } 
    }

選択リストの値を取得するためには2.3行目でimportしている
プロパティの設定が必要になります。
またレコードタイプIdも必須なので忘れないようにしましょう。

これで表示させるとこのようになります。

新しい値を追加しても自動的に表示されるようになります。

ハマったこと

初め、for ( let option in this.multipleSelection.data.values) って感じでループを
回してoption.labelとかを設定していたんですが、何度やってもundefinedで
なぜだ。。。と頭を抱えていました。

で、中をみてみるとなぜかoptionに入っていたのはインデックスの数字のみ。。。
なんでなんだｗとなりました。

なので取得する際は先ほどの書き方の方がいいのかなと思います。
何かいい方法があれば是非教えていただけるとありがたいです。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。