Pass Parent Record ID from Related List Button to LWC

Suppose you have a scenario where you want to pass parent record id i.e., an account id from related list button of contact to lwc. In this article we will learn How to Pass Parent Record ID from Related List Button to LWC in Salesforce and display it inside lightning web component.

In this article I will show you exactly how to do that using a List Button, an Aura wrapper, and a simple LWC.

Because Salesforce list buttons can’t launch LWCs directly, we use an Aura wrapper to bridge the gap and pass the Account ID.

Create LWC Component

Lets create an LWC Component named testListHandler.

testListHandler.js

import { LightningElement, api } from 'lwc';

export default class TestListHandler extends LightningElement {
    @api accountId;

    connectedCallback() {
        console.log('Creating Contact under Account:', this.accountId);
        // You can call Apex or use lightning-record-edit-form to create the Contact
    }
}

testListHandler.html

<template>
    <lightning-card title="Create New Contact">
        <div class="slds-p-around_medium">
            <p>Account Id: {accountId}</p>
            <!-- Replace this with your custom contact form -->
        </div>
    </lightning-card>
</template>

testListHandler.js-meta.xml

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

Create the Aura Wrapper

Lets create an aura component named TestListAuraWrapper

TestListAuraWrapper.cmp

<aura:component implements="lightning:isUrlAddressable">
    <aura:attribute name="accountId" type="String" />
    <aura:attribute name="body" type="Aura.Component[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    {!v.body}
</aura:component>

TestListAuraWrapperController.js

({
    doInit: function(component, event, helper) {
        console.log('@@@@@ do init called');
        var pageRef = component.get("v.pageReference");
        var accountId = pageRef && pageRef.state && pageRef.state.c__accountId;

        $A.createComponent("c:testListHandler", {
            accountId: accountId
        }, function(content, status) {
            if (status === "SUCCESS") {
                component.set("v.body", [content]);
            } else {
                console.error("Failed to load testListHandler. Status: " + status);
            }
        });
    }
})

Create a List Button on Contact

Go to Setup → Object Manager → Contact → Buttons, Links, and Actions, and create a new List Button:

• Type: List Button
• Behavior: Display in existing window without sidebar or header
• Content Source: URL
• URL:

/lightning/cmp/c__TestListAuraWrapper?c__accountId={!Account.Id}

Have a look at the below screenshot.

Add the Button to the Account Page Layout

• Go to Object Manager → Account → Page Layouts
• Edit the layout
• In the Contacts related list, click the wrench icon
• Go to Buttons tab, add your new button and save.

Now, when users click the button from the Contacts related list on an Account, your LWC will open and receive the correct Account ID — ready to use in your Contact creation logic.

I hope you found this article helpful.

Also Read: Pass Parent Record Id to LWC using Aura Wrapper

Learn LWC from here