EP 17 | Embed LWC in Aura Component & Pass Data using Custom Events | LWC Stack ☁️⚡️

Kapil June 14, 2021

  LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-17


LWC HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<template>
    <template if:true={accounts.data}>
        <template for:each={accounts.data} for:item="account">
            <a href="#" key={account.Id} data-account-id={account.Id} onclick={handleSelect}>
                <lightning-layout>
                     <lightning-layout-item padding="horizontal-small">
                        <p>{account.Name}</p>
                    </lightning-layout-item>
                </lightning-layout>
            </a>
        </template>
    </template>
</template>

LWC JS
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { LightningElement,wire } from 'lwc';
import getAccList from '@salesforce/apex/AccountController.getAccList';

export default class GetAccountList extends LightningElement {
    @wire(getAccList) accounts;
    
    handleSelect(event) {
        console.log('####Value : '+event.currentTarget.dataset.accountId);
        event.preventDefault();
        const selectEvent = new CustomEvent('accountselect', {
            detail: { accountId: event.currentTarget.dataset.accountId }
        });
        console.log('####After select event');
        this.dispatchEvent(selectEvent);
        console.log('####After dispatch event');
    }
}

Aura Component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="accountId" type="Id" />
    <aura:attribute name="selectedAccount" type="Account" />
    <div style="background-color:white; padding:10px">
        <force:recordData aura:id="getAccount" recordId="{!v.accountId}" fields="['Name', 'Phone',]"
            targetFields="{!v.selectedAccount}" />
        <p>I am in Aura Component</p>
        <table class="slds-table slds-table_bordered">
            <tr>
                <td>Account Name</td>
                <td>{!v.selectedAccount.Name}</td>
            </tr>
            <tr>
                <td>Account Phone</td>
                <td>{!v.selectedAccount.Phone}</td>
            </tr>
        </table>

        <lightning:card title="LWC">
            <b>I am Web Component</b>
            <c:getAccountList onaccountselect="{!c.handleAccountSelect}" />
        </lightning:card>
    </div>
</aura:component>

Aura JS
1
2
3
4
5
6
7
({
    handleAccountSelect: function (component, event) {
        var service = component.find('getAccount');
        component.set('v.accountId', event.getParam('accountId'));
        service.reloadRecord();
    }
})
APEX
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
public with sharing class AccountController{
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccList(){
        return [SELECT Id, Name, Phone FROM ACCOUNT ORDER BY CreatedDate desc Limit 10];
    }

    @AuraEnabled(cacheable=true)
    public static List<Account> findAccList(String keyword){
        String key='%'+keyword+'%';
        return [SELECT Id, Name,Phone FROM ACCOUNT WHERE Name LIKE:key ORDER BY CreatedDate desc Limit 10];
    }
    @AuraEnabled(cacheable=true)
    public static Account getSingleAccount(){
        return [SELECT Id, Name, Phone FROM ACCOUNT ORDER BY CreatedDate desc Limit 1];
    }

}

Output


Watch complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)
Tags:

Post a Comment

0 Comments