Friday, June 7, 2019

lightning/uiRecordApi Example (Get Record)

Example to get a record.
Note: For simplicity I have use hard coded record id for this example under getRecord.js file, so please modify this id with your record id you want to fetch. 

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


getRecord.html
<template>
    <lightning-card title="Get Account Details">
            <lightning-layout>
                <lightning-layout-item>
                    Account Name : {accName}
                    <br/>
                    Account Site : {accSite}
                </lightning-layout-item>
            </lightning-layout>
        </lightning-card>
</template>

getRecord.js

import { LightningElement, wire, api, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import ACCOUNT_NAME from '@salesforce/schema/Account.Name';
import ACCOUNT_SITE from '@salesforce/schema/Account.Site';
import  ACCOUNT_OWNER from '@salesforce/schema/Account.Owner.Name';

export default class GetRecord extends LightningElement {
    @api recordId;
    @track accSite;
    @track accName;
    @track accOwner;

    @wire(getRecord, { recordId: '0017F0dgfdsfxIQQA0', fields: [ACCOUNT_NAME, ACCOUNT_SITE], optionalFields: [ACCOUNT_OWNER] })
    accountRecord({data, error}){
        if(data){
            this.accName = data.fields.Name.value;
            this.accSite = data.fields.Site.value;
        } else if(error){
            console.log("error === "+error);
        }
    }
}


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 ...