LWC Get Pick-list Field Values
LWC does have a wire adapter that pulls in picklist values dynamically.
import { LightningElement, wire, track } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import INDUSTRY_FIELD from '@salesforce/schema/Account.Industry';
import {getRecord, getFieldValue} from 'lightning/uiRecordApi';
const fields = [INDUSTRY_FIELD];
export default class Example extends LightningElement {
@api recordId;
@track selectedOption;
@track options;
/*
* There is no guarantee that the pick-list values will return first
* Because of this, we check to see if a selected option already exists
* If it does, we verify it is a valid value for the picklist.
* If it is not valid, we set the selected option to the default value.
* If it is valid, no changes are made
* If there is no selected option, we use the default option
*
* Note: recordTypeId is required. If your object has no record types create
* at least 1.
*/
@wire(getPicklistValues, { recordTypeId: '012000000000000AAA', fieldApiName: INDUSTRY_FIELD })
setPicklistOptions({error, data}) {
if (data) {
this.options = data.values;
if (this.selectedOption) {
let optionIsValid = this.options.some(function(item) {
return item.value === this.selectedOption;
}, this);
if (!optionIsValid) {
this.selectedOption = data.defaultValue;
}
} else {
this.selectedOption = data.defaultValue;
}
} else if (error) {
console.log(error);
}
}
/*
* As with above, there is no guarantee to which order these functions execute
* If the options list exists, we will check to see if our value is valid.
* If it is, set our value as the selected value
* If it is not, do nothing
* If the options list does not exist, we will create an options list with
* a single value using this records picklist value.
*/
@wire(getRecord, {recordId:'$recordId', fields})
account({error, data}) {
if (data) {
let industryValue = getFieldValue(data, INDUSTRY_FIELD);
if (!this.options) {
this.options = [{label:industryValue, value:industryValue}];
}
let industryIsValid = options.some(function(item) {
return item.value === industryValue;
}, this);
if (industryIsValid) {
this.selectedOption = industryValue;
}
} else if (error) {
console.log(error);
}
}
}
I had some free time this morning, and this is how you can control wire adapter run order. I misspoke earlier about requiring usage of use getter/setters, the important bit is actually how you forcefully (re)invoke the wire.
Wires are invoked based on some kind of change (the reactive part) and a null
to truthy
change is perfectly valid way to (re)invoke it.
If you inspect both error
and data
when supplied with a falsey / undefined reactive var when the component is constructed, both come back undefined and it fails silently (this is good).
However, something like this will (re)invoke a wire adapter:
<template>
<lightning-combobox
label="Example"
value={selectedOption}
options={options}
></lightning-combobox>
</template>
import { LightningElement, api, wire, track } from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import TYPE_FIELD from '@salesforce/schema/Account.Type';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
const fields = [TYPE_FIELD];
export default class Example extends LightningElement {
@api recordId;
@track selectedOption;
@track options;
// private
_recordTypeId;
// Step 1
@wire(getRecord, {recordId:'$recordId', fields})
account({error, data}) {
if (data) {
let typeValue = getFieldValue(data, TYPE_FIELD);
this.selectedOption = typeValue;
this._recordTypeId = '012000000000000AAA'; // setting this value will re-invoke the wire
} else if (error) {
console.log(error);
}
}
// Step 2, determined by when the reactive bind is changed
@wire(getPicklistValues, { recordTypeId: '$_recordTypeId', fieldApiName: TYPE_FIELD })
setPicklistOptions({error, data}) {
if (data) {
// Apparently combobox doesn't like it if you dont supply any options at all.
// Even though selectedOption was assigned in step 1, it wont "select" it unless it also has options
this.options = data.values;
} else if (error) {
console.log(error);
}
}
}