Apex Code Development You need to sign in to do that
Don't have an account?
unable to display result in lwc
Hello there, I have created lwc application to show contact records, I'm able to fetch records and print in on console but it doesn't load result in app page and lightning page, it shows blank page.
can anyone pls assist in this, here's my code.
//html code
<template>
<template for:each={wiredAccounts.data} for:item="acc">
<p key={acc.id}>
{acc.Name}
</p>
</template>
</template>
------------------------------------
// js code
import { LightningElement, wire, track } from 'lwc';
import displayCon from '@salesforce/apex/method.displayCon';
export default class ContactRecord extends LightningElement {
@wire (displayCon) wiredAccounts({data,error}){
if (data) {
console.log(data);
} else if (error) {
console.log(error);
}
}
}
-----------------------------------------------
// class code
public with sharing class method {
@AuraEnabled(cacheable=true)
public static List<Contact> displayCon(){
List<Contact> con;
try {
con = [Select Id, Name, Phone, email From Contact LIMIT 20];
} catch (Exception e) {
System.debug(e.getMessage());
}
return con;
}
}
----------------------------------------------
//xml file
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
---------------------------------------
// app code
<aura:application extends="force:slds">
<c:contactRecord/>
</aura:application>
can anyone pls assist in this, here's my code.
//html code
<template>
<template for:each={wiredAccounts.data} for:item="acc">
<p key={acc.id}>
{acc.Name}
</p>
</template>
</template>
------------------------------------
// js code
import { LightningElement, wire, track } from 'lwc';
import displayCon from '@salesforce/apex/method.displayCon';
export default class ContactRecord extends LightningElement {
@wire (displayCon) wiredAccounts({data,error}){
if (data) {
console.log(data);
} else if (error) {
console.log(error);
}
}
}
-----------------------------------------------
// class code
public with sharing class method {
@AuraEnabled(cacheable=true)
public static List<Contact> displayCon(){
List<Contact> con;
try {
con = [Select Id, Name, Phone, email From Contact LIMIT 20];
} catch (Exception e) {
System.debug(e.getMessage());
}
return con;
}
}
----------------------------------------------
//xml file
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
---------------------------------------
// app code
<aura:application extends="force:slds">
<c:contactRecord/>
</aura:application>
There is a mismach in variable names in js file and html file..
in js file we have conList but in html file we have ConList.
I have modified the code and try with below.
Html:
<template> <h2> Contact Datatable</h2> <template if:true={conList}> <lightning-datatable data={conList} columns={columns} key-field="Id"> </lightning-datatable> </template> <template if:true={error}> {error} </template> </template>ContactDatatableLWCExample.jsimport { LightningElement ,api, wire, track} from 'lwc'; import getContactList from '@salesforce/apex/ContactHelper.getContactList'; export default class ContactDatatableLWCExample extends LightningElement { @track columns = [{ label: 'First Name', fieldName: 'FirstName', type: 'text', sortable: true }, { label: 'Last Name', fieldName: 'LastName', type: 'text', sortable: true }, { label: 'Phone', fieldName: 'Phone', type: 'phone', sortable: true }, { label: 'Email', fieldName: 'Email', type: 'text', sortable: true } ]; @track error; @track conList ; @wire(getContactList) wiredContacts({ error, data }) { if (data) { this.conList = data; } else if (error) { this.error = error; } } }<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>54.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__HomePage</target> <target>lightning__AppPage</target> </targets> </LightningComponentBundle>Apex Class:
public with sharing class ContactHelper { @AuraEnabled(cacheable=true) public static List<Contact> getContactList() { return [SELECT Id, FirstName, LastName, phone, email FROM Contact]; } }If this helps, Please mark it as best answer.
Thanks!!
All Answers
try with below code.
Html
<template> <h2> Contact Datatable</h2> <template if:true={ConList}> <lightning-datatable data={ConList} columns={columns} key-field="Id"> </lightning-datatable> </template> <template if:true={error}> {error} </template> </template>ContactDatatableLWCExample.jsimport { LightningElement ,api, wire, track} from 'lwc'; import getContactList from '@salesforce/apex/ContactHelper.getContactList'; export default class ContactDatatableLWCExample extends LightningElement { @track columns = [{ label: 'First Name', fieldName: 'FirstName', type: 'text', sortable: true }, { label: 'Last Name', fieldName: 'LastName', type: 'text', sortable: true }, { label: 'Account', fieldName: 'Account.Name', type: 'Lookup', sortable: true }, { label: 'Phone', fieldName: 'Phone', type: 'phone', sortable: true }, { label: 'Email', fieldName: 'Email', type: 'url', sortable: true } ]; @track error; @track conList ; @wire(getContactList) wiredContacts({ error, data }) { if (data) { this.conList = data; } else if (error) { this.error = error; } } }<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>54.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__HomePage</target> <target>lightning__AppPage</target> </targets> </LightningComponentBundle>Apex class:
public with sharing class ContactHelper { @AuraEnabled(cacheable=true) public static List<Contact> getContactList() { return [SELECT Id, FirstName, LastName, Account.Name, email FROM Contact]; } }Keep this component in lightning home page or app page.
If this helps, Please mark it as best answer.
Thanks!!
I copied code exactly as you have given and it's still the same, it only shows title as contact datatable.
can you execute in your system, is it working ?
There is a mismach in variable names in js file and html file..
in js file we have conList but in html file we have ConList.
I have modified the code and try with below.
Html:
<template> <h2> Contact Datatable</h2> <template if:true={conList}> <lightning-datatable data={conList} columns={columns} key-field="Id"> </lightning-datatable> </template> <template if:true={error}> {error} </template> </template>ContactDatatableLWCExample.jsimport { LightningElement ,api, wire, track} from 'lwc'; import getContactList from '@salesforce/apex/ContactHelper.getContactList'; export default class ContactDatatableLWCExample extends LightningElement { @track columns = [{ label: 'First Name', fieldName: 'FirstName', type: 'text', sortable: true }, { label: 'Last Name', fieldName: 'LastName', type: 'text', sortable: true }, { label: 'Phone', fieldName: 'Phone', type: 'phone', sortable: true }, { label: 'Email', fieldName: 'Email', type: 'text', sortable: true } ]; @track error; @track conList ; @wire(getContactList) wiredContacts({ error, data }) { if (data) { this.conList = data; } else if (error) { this.error = error; } } }<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>54.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__HomePage</target> <target>lightning__AppPage</target> </targets> </LightningComponentBundle>Apex Class:
public with sharing class ContactHelper { @AuraEnabled(cacheable=true) public static List<Contact> getContactList() { return [SELECT Id, FirstName, LastName, phone, email FROM Contact]; } }If this helps, Please mark it as best answer.
Thanks!!
Thank you very much.
any suggestion