Search code examples
salesforceapexapex-codesalesforce-lightninglwc

Lightning-record-view form is not displaying the record with the id that is fetch from an apex class. Salesforce LWC,Apex

I have a record view for which the id is from apex class and then wired it and assigned to a variable, but the record is not displaying. below is my code.

apex class to get the record id of the record owned by the user

@AuraEnabled(cacheable=true)
public static Wallet__c getWalletInfo(){
    String userId = UserInfo.getUserId();
    return [SELECT Id From Wallet__c WHERE OwnerId =: userID LIMIT 1];
}

.js class - assigned the data to getId

import getWalletInfo from '@salesforce/apex/CustomWalletHandler.getWalletInfo';
import wallet from '@salesforce/schema/Wallet__c';
import walletName from '@salesforce/schema/Wallet__c.Name';
import walletBalance from '@salesforce/schema/Wallet__c.balance__c';
import walletFrom from '@salesforce/schema/Wallet__c.added_from__c';


export default class CustomWallet extends LightningElement {

objectName = wallet;
name = walletName;
balance = walletBalance;
from = walletFrom;

getId;
isUser = true;

@wire (getWalletInfo,{})
walletData({error, data}){ //data is record Id
    if(data){
        this.getId = data;
        console.log(this.getId);
        this.isUser = false;
    }else if(error) {
        // error handling
        console.error(error.body.message);
    }
}


}

html - if user has no recordc Create Wallet will display and if user has record only the record will display.

<template>
<lightning-card>
    <lightning-tabset>
        <template if:true={isUser}>
            <lightning-tab label="Create a Wallet">
                <lightning-record-form
                object-api-name="Wallet__c"
                columns="2"
                layout-type="Full"
                ></lightning-record-form>
            </lightning-tab>
        </template>
        <template if:false={isUser}>
            <lightning-tab label="My Wallet">
                <lightning-record-view-form
                record-id={getId}
                object-api-name={objectName}>
                <div class="slds-box">
                    <lightning-output-field field-name={name}>
                    </lightning-output-field>
                    <lightning-output-field field-name={balance}>
                    </lightning-output-field>
                    <lightning-output-field field-name={from}>
                    </lightning-output-field>
                </div>
            </lightning-record-view-form>
            </lightning-tab>
        </template>
    </lightning-tabset>
</lightning-card>

here is the output

Solution

  • I think you overcomplicated it a bit. What do you get when you put simpler references to object & fields?

    <lightning-record-view-form
    record-id={getId}
     object-api-name="Wallet__c">
     <div class="slds-box">
         <lightning-output-field field-name="Name"></lightning-output-field>
         <lightning-output-field field-name="Balance__c"></lightning-output-field>
         <lightning-output-field field-name="Added_From__c"></lightning-output-field>
     </div>
</lightning-record-view-form>

    And your apex method is returning whole Wallet__c object, not just the Id. With just 1 field populated but still. You can tell by seeing curly braces in your console.log's output. So you need either this.getId = data.Id; in JS or record-id={getId.Id} in HTML. Or make Apex return just an Id variable (and null if no results found I guess?)