+ Start a Discussion
Balaji Selva Sekaran 8Balaji Selva Sekaran 8 

Not navigating to record detail page in LWC

I have an custom object called ProductDetail__c where i am trying to fetch the data from apex method using @wire as function as shown in the screenshot and after clicking view details button , i want to navigate to the record detail page but it is not happening.

Can someone help me with this please and how to put the debug statements inorder to debug on my own.

Sorry i am new to LWC.

Apex class
============================================
public with sharing class ProductManager {
    @AuraEnabled(cacheable=True)
    public static List<ProductDetail__c> fetchProductData(){
       
        List<ProductDetail__c> ProdList=new List<ProductDetail__c>();
        ProdList=[select Id,Name,Product_Family__c,Product_Description__c,Product_Code__c from
                    ProductDetail__c where IsActive__c = True];
        return ProdList;
    }
}
==========================================
import { LightningElement, wire } from 'lwc';
import  fetchProductData  from '@salesforce/apex/ProductManager.fetchProductData';
export default class ServerProductData extends LightningElement {
    ProductDetails;
    ProductId;
    errorDetails;
    @wire(fetchProductData)
    ProductDetailInfo({error,data})
    {
        if (data)
        {
            this.ProductDetails= data;
        }
       
        else if(error){
            this.errorDetails= error;
        }
    }
    navigateDetails(event){
        this.ProductId = event.target.value;
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                recordId:this.ProductId,
                objectApiName:'ProductDetail__c',
                actionName:'view'
            }
        });
    }
}
=================================================

<template>
    <div class="slds-box">
        <template if:true={ProductDetails}>
            <div class="slds-grid slds-wrap slds-gutters">
                <template for:each={ProductDetails} for:item="Prod">
                    <div class="slds-col slds-large-size_4-of-12 slds-medium-size_1-of-12 slds-size_1-of-12 slds-p-around_small" key={Prod.Id}>
                        <lightning-card title={Prod.Name}>
                            <lightning-button label="View Details" variant="success" slot="actions" onclick={navigateDetails} value={Prod.Id}>
                            </lightning-button>
                            <div class="slds-var-p-around_small">
                                <p>{Prod.Product_Description__c}</p>
                                <p>{Prod.Product_Code__c}</p>
                            </div>
                        </lightning-card>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>
=================================================
User-added image
Best Answer chosen by Balaji Selva Sekaran 8
mukesh guptamukesh gupta
Hi Balaji,

Please use below code for JS controller:-
 
import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import  fetchProductData  from '@salesforce/apex/ProductManager.fetchProductData';
export default class ServerProductData extends NavigationMixin(LightningElement) {
    ProductDetails;
    ProductId;
    errorDetails;
    @wire(fetchProductData)
    ProductDetailInfo({error,data})
    {
        if (data)
        {
            this.ProductDetails= data;
        }
       
        else if(error){
            this.errorDetails= error;
        }
    }
    navigateDetails(event){
        this.ProductId = event.target.value;
		system.debug('Record Id=>> +this.ProductId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                recordId:this.ProductId,
                objectApiName:'ProductDetail__c',
                actionName:'view'
            }
        });
    }
}


if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 

All Answers

mukesh guptamukesh gupta
Hi Balaji,

Please use below code for JS controller:-
 
import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import  fetchProductData  from '@salesforce/apex/ProductManager.fetchProductData';
export default class ServerProductData extends NavigationMixin(LightningElement) {
    ProductDetails;
    ProductId;
    errorDetails;
    @wire(fetchProductData)
    ProductDetailInfo({error,data})
    {
        if (data)
        {
            this.ProductDetails= data;
        }
       
        else if(error){
            this.errorDetails= error;
        }
    }
    navigateDetails(event){
        this.ProductId = event.target.value;
		system.debug('Record Id=>> +this.ProductId);
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                recordId:this.ProductId,
                objectApiName:'ProductDetail__c',
                actionName:'view'
            }
        });
    }
}


if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
This was selected as the best answer
Balaji Selva Sekaran 8Balaji Selva Sekaran 8
Great thanks Mukesh,i forgot to import the NavigationMixin