Pass whole record using data-record-id using LWC in Salesforce

Pass whole record using data-record-id using LWC in Salesforce

Inside the iterator, use it.index. Using the index, get the full record information from the list/array of records.

Apex Class:

public with sharing class AccountController {
 
    @AuraEnabled( cacheable = true )
    public static List< Account > fetchAccounts() {
        
        return [ SELECT Id, Name, Industry, ParentId
                   FROM Account
                  LIMIT 10 ];
         
    }
     
}

Sample.html:

<template>

    <div class="slds-box slds-theme--default">
        <template if:true = {records}>                  
                <div style = "height: 300px;">
                    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
                        <tr>
                            <th scope = "col">Name</th>
                            <th scope = "col">Industry</th>
                        </tr>
                        <template iterator:it = {records}>
                            <tr key = {it.value.Id}>
                                <td><a href="#" data-record-id={it.index} onclick={viewAccount}>{it.value.Name}</a></td>
                                <td>{it.value.Industry}</td>
                            </tr>
                        </template>
                    </table>
                </div>                  
     
            </template>      
            <template if:true = {error}>  
                {error}>                  
            </template>  
    </div>
    
</template>

Sample.javascript:

import { LightningElement, wire } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
import { NavigationMixin } from 'lightning/navigation';

export default class Sample extends NavigationMixin( LightningElement ) {

    records;
    error;

    @wire( fetchAccounts )  
    wiredAccount( { error, data } ) {

        if (data) {

            this.records = data;
            this.error = undefined;

        } else if ( error ) {

            this.error = error;
            this.records = undefined;

        }

    }

    viewAccount( event ) {

        let strIndex = event.target.dataset.recordId;
        let recs =  JSON.parse( JSON.stringify( this.records ) );
        let rowId = recs[ strIndex ].Id;
        let strName = recs[ strIndex ].Name;
        console.log( 'Record Id is ' + rowId );
        console.log( 'Name Id is ' + strName );
        event.preventDefault();
        event.stopPropagation();

        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: rowId,
                objectApiName: 'Account',
                actionName: 'view'
            },
            state: {
                c__sample: strName
            }
        });


    }

}

Sample.meta.xml:

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

sampleAccount.html:

<template>
    <lightning-card>
        Record Id is {recordId}
        <br/>
        Sample value is {strSample}
    </lightning-card>
</template>

sampleAccount.javascript:

import { LightningElement, wire, api } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';

export default class SampleAccountLWC extends LightningElement {

    strSample;
    @api recordId;

    @wire(CurrentPageReference)
    currentPageReference;

    connectedCallback() {
       
        console.log( 'Param ' + this.currentPageReference.state.c__sample );
        this.strSample = this.currentPageReference.state.c__sample;
   
    }

}

sampleAccount.meta.xml:

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

Output:

Leave a Reply