Friday, June 7, 2019

lightning/uiObjectInfoApi Example (getPicklistValues)

Suppose we want to fetch "Type" picklist value of Account object.

getPicklistValues.js-meta.xml


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="getPicklistValues">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>   
    </targets>
</LightningComponentBundle>


getPicklistValues.html

<template>
    <lightning-card title="Get Picklist Values">
        <template if:true={typePicklistValues.data}>
            <lightning-combobox name="type"
                                label="Account Type"
                                value={selectedValue}
                                placeholder="Select"
                                options={typePicklistValues.data.values}
                                onchange={performBusinessLogic} >
            </lightning-combobox>
        </template>
    </lightning-card>
</template>


getPicklistValues.js
import { LightningElement, track, wire} from 'lwc';
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import Type_FIELD from '@salesforce/schema/Account.Type';

export default class PicklistValuesDemo extends LightningElement {
    @track selectedValue;

    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    @wire(getPicklistValues, { recordTypeId: '$objectInfo.data.defaultRecordTypeId', fieldApiName: Type_FIELD})
    typePicklistValues;

    performBusinessLogic(event){
        this.selectedValue = event.detail.value;
        console.log("selectedValue === "+this.selectedValue);
    }
}


Output:


LWC to LWC Communication using Lightning Messaging Service (Part - 2)

In my previous post ( previous post link ) we have learn how to create a Lightning Messaging Service with 6 steps and today we will use the ...