Salesforce LWC學習(十二) Dependence Picklist實現

本篇可參看：

Salesforce LWC學習(六) @salesforce & lightning/ui*Api Reference

salesforce零基礎學習（八十七）Apex 中Picklist類型通過Control 字段值獲取Dependent List 值

擁有dependence的picklist在項目中經常出現，我們在項目中需要展示級聯的picklist展示。Salesforce lwc中可以通過wire adapter + combobox來實現級聯，步驟和代碼如下。

1. 在Account中聲明兩個字段，Controlling_Picklist__c以及Master_Picklist__c兩個picklist字段，其中Master_Picklist作為主

 

 2. 通過getObjectInfo的wire adapter獲取record type等信息，然后通過getPicklistValuesByRecordType可以獲取表中所有的picklist的metadata信息。

這里先可以看一下picklist metadata信息如下。我們在第二個鏈接中可以看到dependence picklist通過valid for進行了關聯，所以我們成功的關鍵也是通過valid for進行了關聯。

{
    "picklistFieldValues": {
        "Controlling_Picklist__c": {
            "controllerValues": {
                "M2": 1, 
                "M3": 2, 
                "M1": 0
            }, 
            "values": [
                {
                    "validFor": [
                        0
                    ], 
                    "label": "M1->D1", 
                    "value": "M1->D1", 
                    "attributes": null
                }, 
                {
                    "validFor": [
                        0
                    ], 
                    "label": "M1->D2", 
                    "value": "M1->D2", 
                    "attributes": null
                }, 
                {
                    "validFor": [
                        1
                    ], 
                    "label": "M2->D1", 
                    "value": "M2->D1", 
                    "attributes": null
                }, 
                {
                    "validFor": [
                        1
                    ], 
                    "label": "M2->D2", 
                    "value": "M2->D2", 
                    "attributes": null
                }
            ], 
            "defaultValue": null, 
            "url": "/services/data/v47.0/ui-api/object-info/Account/picklist-values/0120I000000OaFoQAK/Controlling_Picklist__c"
        }, 
        "Master_Picklist__c": {
            "controllerValues": {}, 
            "values": [
                {
                    "validFor": [], 
                    "label": "M1", 
                    "value": "M1", 
                    "attributes": null
                }, 
                {
                    "validFor": [], 
                    "label": "M2", 
                    "value": "M2", 
                    "attributes": null
                }, 
                {
                    "validFor": [], 
                    "label": "M3", 
                    "value": "M3", 
                    "attributes": null
                }
            ], 
            "defaultValue": null, 
            "url": "/services/data/v47.0/ui-api/object-info/Account/picklist-values/0120I000000OaFoQAK/Master_Picklist__c"
        }
    }
}

 代碼實現如下：

dependentPicklistInLWC.html：使用combobox展示兩個下拉列表，設置相關的事件處理

<template>
    <lightning-card title="Custom Dependent Picklist using Lightning Web Components"><br/>
        <lightning-layout>
            <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
                <lightning-combobox label="master picklist" 
                                    name="master" 
                                    onchange={handleMasterPicklistChange} 
                                    options={masterValues} 
                                    placeholder="--None--" 
                                    value={selectedMasterValue}></lightning-combobox>
            </lightning-layout-item>
            <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
                <lightning-combobox label="controlling picklist" 
                                    name="controlling"
                                    onchange={handleControllingPicklistChange} 
                                    options={controllingValues} 
                                    placeholder="--None--" 
                                    value={selectedControllingValue}
                                    ></lightning-combobox>
            </lightning-layout-item>
            
        </lightning-layout>
    </lightning-card>
</template>

dependentPicklistInLWC.js：使用getObjectInfo以及getPicklistValuesByRecordType去進行Picklist的select option的構造，這里的關鍵就是理解好valid for

/* eslint-disable no-console */
import { LightningElement, wire, track } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class DependentPickListInLWC extends LightningElement {

    //存儲controlling picklist的所有的值
    @track masterValues = [];
    //存儲dependent picklist的所有的值
    @track controllingValues = [];
    //選擇的controlling picklist 的值
    @track selectedMasterValue;
    //選擇的dependent picklist的值
    @track selectedControllingValue;
    
    @track error;
    //用來記錄master picklist中的 value -> valid for的列表集合
    master2ValidForValues;
    //用來記錄controlling picklist的value以及valid for等信息的列表集合
    controllingValuesWithValidFor = [];

    // 獲取account 的schema info
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    // 獲取 control picklist的值並且組裝dependent picklist
    @wire(getPicklistValuesByRecordType, { objectApiName: ACCOUNT_OBJECT, recordTypeId: '$objectInfo.data.defaultRecordTypeId'})
    countryPicklistValues({error, data}) {
        if(data) {
            this.error = null;
            let masterOptions = [];
            
            data.picklistFieldValues.Master_Picklist__c.values.forEach(key => {
                masterOptions.push({
                    label : key.label,
                    value: key.value
                })
            });

            this.masterValues = masterOptions;

            let controllingOptions = [];

            this.master2ValidForValues = data.picklistFieldValues.Controlling_Picklist__c.controllerValues;
            //用來記錄controlling picklist的value以及valid for等信息的列表集合 Picklist values
            this.controllingValuesWithValidFor = data.picklistFieldValues.Controlling_Picklist__c.values;
            this.controllingValuesWithValidFor.forEach(key => {
                controllingOptions.push({
                    label : key.label,
                    value: key.value
                })
            });

            this.controllingValues = controllingOptions;
        }
        else if(error) {
            this.error = JSON.stringify(error);
        }
    }

    handleMasterPicklistChange(event) {
        //set selected master Value
        this.selectedMasterValue = event.target.value;
        this.selectedControllingValue = '';
        let controllingList = [];

        if(this.selectedMasterValue) {
            //通過valid for進行mapping，匹配的放進controlling list中
            this.controllingValuesWithValidFor.forEach(conValues => {
                if(conValues.validFor.some(item => item === this.master2ValidForValues[this.selectedMasterValue])) {
                    controllingList.push({
                        label: conValues.label,
                        value: conValues.value
                    })
                }
            })

            this.controllingValues = controllingList;
        }
    }

    handleControllingPicklistChange(event) {
        this.selectedControllingValue = event.target.value;
    }
}

效果展示：當選擇了左側的master以后，右側的controlling值便會動態改變。

 

 當然，我們使用這個大前提是當前的object支持getObjectInfo等wire adapter，如果不支持我們需要通過后台schema方式去搞定，比如Task/Event對象並不支持，我們就沒法通過前端搞定，那樣就只能通過第二個鏈接中的方式去從后台去構建進行獲取。

總結：篇中主要介紹了可以使用wire adapter情況下dependence picklist的實現。篇中有錯誤地方歡迎指出，有不懂的歡迎留言。