+ Start a Discussion
AJAYAJAY 

not able to get details from LWC

I was trying to create a LWC component and keep it in lightning record page and see the details of the record. But the component is not showing the data.

Can anyone help me with this?

Below are all the details:

Apex Controller:
public with sharing class caseDetailsContollerLWC {
    @AuraEnabled(cacheable=true)
    public static list<case> caseDetails(Id recordId){
        return [select id,casenumber,status,priority,subject,description from case where Id=:recordId];
        //return c;
    }
    }

LWC JS:
import { LightningElement,api,wire } from 'lwc';
import SUBJECT from '@salesforce/schema/Case.subject';
import DESCRIPTION from '@salesforce/schema/Case.description';
import CASENUMBER from '@salesforce/schema/Case.casenumber';
import STATUS from '@salesforce/schema/Case.status';
import PRIORITY from '@salesforce/schema/Case.priority';
const fields=['subject','description','casenumber','status','priority'];
import caseDetails from  '@salesforce/apex/caseDetailsContollerLWC.caseDetails'
export default class caseDetailsLWC extends LightningElement {
@api recordId;
@wire(caseDetails,{recordId:'$recordId',fields})
caseDetails({ error, data }) {
    if (data) {
        this.data  = data;
        this.error = undefined;
    } else if (error) {
        this.error = error;
        this.data  = undefined;
    }
}
}

LWC HTML:
<!--
@File Name          : caseDetailsLWC.html
@Description        : 
@Author             : ChangeMeIn@UserSettingsUnder.SFDoc
@Group              : 
@Last Modified By   : ChangeMeIn@UserSettingsUnder.SFDoc
@Last Modified On   : 3/2/2020, 10:52:24 PM
@Modification Log   : 
Ver       Date            Author                Modification
1.0    3/2/2020   ChangeMeIn@UserSettingsUnder.SFDoc     Initial Version
-->
<template>
    <div class="slds-m-around_medium">
        <template if:true={caseDetails.data}>
            <template for:each={caseDetails.data} for:item="content">
                <p key={content.Id}>{content.Id}</p>
                <p key={content.subject}>{content.subject}</p>
                <p key={content.description}>{content.description}</p>
                <p key={content.priority}>{content.priority}</p>
                <p key={content.casenumber}>{content.casenumber}</p>
               
            </template>
        </template>
        <template if:true={caseDetails.error}>
            No data
        </template>
    </div>
    
    </template>

LWC Meta XML:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="customSearch">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
     <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
 
Best Answer chosen by AJAY
MagulanDuraipandianMagulanDuraipandian
Did you add this on the Case Lightning Record Page using App Builder?

You can achieve this without apex since you are in record context. Check the below link for example

https://www.infallibletechie.com/2020/03/lwc-lightning-web-component-in-record.html

All Answers

MagulanDuraipandianMagulanDuraipandian
Did you add this on the Case Lightning Record Page using App Builder?

You can achieve this without apex since you are in record context. Check the below link for example

https://www.infallibletechie.com/2020/03/lwc-lightning-web-component-in-record.html
This was selected as the best answer
AJAYAJAY
That did work. Thanks Magulan. But i wanted to do this with Apex as i have some more custom functionality to come in. Is there any way we can do that?
MagulanDuraipandianMagulanDuraipandian
It should work with Apex too. Remove <target>lightning__HomePage</target> and <target>lightning__AppPage</target> from the LWC and try.
Check this example - http://www.infallibletechie.com/2019/11/lightning-record-edit-form-and.html
vinay mvinay m

Hi Ajay,

   To make it work with Apex make changes a below 

@wire(caseDetails({ error, data }) {
    if (data) {
        this.something= data.fields;
        this.error = undefined;
    } else if (error) {
        this.error = error;
        this.something = undefined;
    }
}


and in HTML pass value for each element as "{something.field_API_Name.value}"

Hope this helps. Please mark it as best answer, so that it will help others.