0

I want to display some value using button click. I have written a simple js and apex. I don't see any error in console but the data is not displaying. Can anyone tell me what is wrong with my code.

apex:

public with sharing class DisplayData {
    @AuraEnabled(cacheable=true)
    public static Account displayAccRec(Id recordId)
    {
        System.debug('*** arg value'+recordId);
        return [SELECT Id, Name from Account where Id = :recordId];
    }
}

JS:

import { LightningElement, wire, track } from 'lwc';
import dispAccRec from '@salesforce/apex/DisplayData.displayAccRec';

export default class DispalyData extends LightningElement {
    @track accRec;
    @track recordId;
    DisplayAccRec;
    @wire(dispAccRec,{recordId:'$recordId'}) DisplayAccRec;
    handleClick(event)
    {
        alert('You clicked the button');
        accRec = DisplayAccRec;
    }
}

HTML:

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class="slds-m-left_x-small"
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={accRec}>
                <template for:each={accRec.data} for:item="accountInfo">
                    <p key={accountInfo.id}>{accountInfo.Name}</p>
                </template> 
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

Output: enter image description here

  • It will be easier for anyone if they want to reproduce this, if you provided the actual code instead of screenshots. At least from the information you have, it seems that your argument name that the apex expects vs. what you are passing from the JS is incorrect. – Jayant Das Oct 24 '19 at 19:56
  • @JayantDas I replaced the image with code. I changed the argument but still i am not getting the output. – Tamil Oct 24 '19 at 23:08
  • I still see the method name incorrect in the JS. Follow what has been mentioned in the answer. – Jayant Das Oct 24 '19 at 23:26
  • LWC1119: Failed to resolve [at]wire adapter "displayAccRec". Ensure it is imported. 6 | [at]track recordId; 7 | DisplayAccRec; > 8 | [at]wire(displayAccRec,{recordId:'$recordId'}) accRec; I am getting this error. – Tamil Oct 25 '19 at 0:55
1

The parameter name that you specify in the @wire must match the parameter name that the apex method is accepting. Whereas your Apex method is accepting a accId but your @wire is sending RecordId.

  • i made the change but still not result. – Tamil Oct 24 '19 at 23:14
0

As you haven't use LDS to retrieve the record, the Flexi Page(Account Record page) can't provide the recordId to your web component.

here is a solution using LDS:

HTML, you don't need a for:each as it is a single object

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class=""
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={displayAccRec.data}>
                <p>{name}</p>
            </template>
            <template if:true={displayAccRec.error}>
                {displayAccRec.error} 
            </template>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement, track, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Account.Name';

const fields = [
    NAME_FIELD
]

export default class ShowRecord extends LightningElement {
    @track name;
    @api recordId;

    @wire(getRecord, {recordId: '$recordId', fields}) displayAccRec;

    handleClick() {
        this.name = getFieldValue(this.displayAccRec.data, NAME_FIELD);
        console.log(JSON.stringify(this.displayAccRec))
    }
}

config file

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

Hope that helps

0

Do the following changes : (I have added ** where i have made changes)

Apex -

public with sharing class DisplayData {
    @AuraEnabled(cacheable=true)
    **public static List<Account> displayAccRec(String recordId)**
    {
        return [SELECT Id, Name from Account where Id = :recordId];
    }
}

JS -

import { LightningElement, wire, track } from 'lwc';
import dispAccRec from '@salesforce/apex/DisplayData.displayAccRec';

export default class DispalyData extends LightningElement {
    @track accRec;
    **@api recordId;**
    DisplayAccRec;
    @wire(dispAccRec,{recordId:'$recordId'}) DisplayAccRec;
    handleClick(event)
    {
        alert('You clicked the button');
        accRec = DisplayAccRec;
    }
}

HTML -

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class="slds-m-left_x-small"
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={accRec}>
                <template for:each={accRec.data} for:item="accountInfo">
                    <p key={accountInfo.id}>{accountInfo.Name}</p>
                </template> 
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

Tell me if this works or not , I will help further.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.