How to navigate to Related Listing using Lightning Web Component(LWC) in Salesforce?

Sample Code:
HTML:
<template>
    <lightning-card>
        <lightning-button label={buttonLabel} variant="brand" onclick={navigateToRelatedList}></lightning-button>
    </lightning-card>
</template>

JavaScript:
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class RelatedListNavigation extends NavigationMixin( LightningElement ) {

    @api recordId;
    @api parentObjectName;
    @api relationshipApiName;
    @api buttonLabel;

    navigateToRelatedList() {
       
        this[ NavigationMixin.Navigate ]( {
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: this.parentObjectName,
                relationshipApiName: this.relationshipApiName,
                actionName: 'view'
            }
        } );

    }

}

js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>  
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="parentObjectName" type="String" label="Parent Object Name" description="Enter the parent object name" required="true"/>
            <property name="relationshipApiName" type="String" label="Relationship Name" description="Enter the relationship API name" required="true"/>
            <property name="buttonLabel" type="String" label="Button Label" description="Enter the Button" required="true"/>
        </targetConfig>
    </targetConfigs>  
</LightningComponentBundle>
 
Configuration in Lightning Record Page:
 

 
Output:
 
 



No comments:

Post a Comment