Code samples to quickly start playing with Lightning Web Components:
getContactList.html
<template> | |
<lightning-card title=”Related Contacts” icon-name=”custom:custom63“> | |
<div class=”slds-m-around_medium“> | |
<template if:true={contacts.data}> | |
<template for:each={contacts.data} for:item=”contact“> | |
<p key={contact.Id}>{contact.name}</p> | |
</template> | |
<template iterator:it={contacts.data}> | |
<li class=”slds-item” style=”list-style-type: none;” key={it.value.Id}> | |
<article class=”slds-tile slds-tile_board“> | |
<h3 class=”slds-tile__title slds-truncate” title=”Anypoint Connectors“><a | |
href=”javascript:void(0);“>{it.value.Name}</a></h3> | |
<div class=”slds-tile__detail“> | |
<ul class=”slds-list_horizontal slds-has-dividers_right“> | |
<li class=”slds-item“>Title: {it.value.Title}</li> | |
</ul> | |
<ul class=”slds-list_horizontal slds-has-dividers_right“> | |
<li class=”slds-item“>Phone: {it.value.Phone}</li> | |
</ul> | |
<ul class=”slds-list_horizontal slds-has-dividers_right“> | |
<li class=”slds-item“>Email: {it.value.Email}</li> | |
</ul> | |
</div> | |
</article> | |
</li> | |
</template> | |
</template> | |
<template if:true={contacts.error}> | |
<p>{contacts.error}</p> | |
</template> | |
</div> | |
</lightning-card> | |
</template> |
getContactList.js
/*eslint no-console: [“error”, { allow: [“warn”, “error”] }] */ | |
import { LightningElement, track, wire, api } from ‘lwc’; | |
import findContacts from ‘@salesforce/apex/ContactController.getContacts’; | |
/** The delay used when debouncing event handlers before invoking Apex. */ | |
const DELAY = 300; | |
export default class ApexWireMethodWithParams extends LightningElement { | |
@track searchKey = ‘‘; | |
@api recordId; | |
@wire(findContacts, { searchKey: ‘$searchKey‘ }) | |
contacts; | |
//connectedCallback function is similar to init method in Lightning Components. | |
connectedCallback(){ | |
this.searchKey = this.recordId; | |
} | |
} |
*connectedCallBack(): Check out this function. This is a replacement of “init” event in Aura component.
Apex Controller
public class ContactController { | |
public List<Contact> contactList {get;set;} | |
public ContactController(){ | |
this.contactList = new List<Contact>(); | |
} | |
@AuraEnabled(cacheable=true) | |
public static list<Contact> getContacts(string searchKey){ | |
List<Contact> lst = new List<Contact>([SELECT Id, Name, Title, Phone, Email FROM Contact WHERE Accountid = :searchKey ]); | |
return lst; | |
} | |
} |
view rawContactController.java hosted with
by GitHubCode samples to quickly start playing with Lightning Web Components:
getContactList.html
<template> | |
<lightning-card title=”Related Contacts” icon-name=”custom:custom63“> | |
<div class=”slds-m-around_medium“> | |
<template if:true={contacts.data}> | |
<template for:each={contacts.data} for:item=”contact“> | |
<p key={contact.Id}>{contact.name}</p> | |
</template> | |
<template iterator:it={contacts.data}> | |
<li class=”slds-item” style=”list-style-type: none;” key={it.value.Id}> | |
<article class=”slds-tile slds-tile_board“> | |
<h3 class=”slds-tile__title slds-truncate” title=”Anypoint Connectors“><a | |
href=”javascript:void(0);“>{it.value.Name}</a></h3> | |
<div class=”slds-tile__detail“> | |
<ul class=”slds-list_horizontal slds-has-dividers_right“> | |
<li class=”slds-item“>Title: {it.value.Title}</li> | |
</ul> | |
<ul class=”slds-list_horizontal slds-has-dividers_right“> | |
<li class=”slds-item“>Phone: {it.value.Phone}</li> | |
</ul> | |
<ul class=”slds-list_horizontal slds-has-dividers_right“> | |
<li class=”slds-item“>Email: {it.value.Email}</li> | |
</ul> | |
</div> | |
</article> | |
</li> | |
</template> | |
</template> | |
<template if:true={contacts.error}> | |
<p>{contacts.error}</p> | |
</template> | |
</div> | |
</lightning-card> | |
</template> |
getContactList.js
/*eslint no-console: [“error”, { allow: [“warn”, “error”] }] */ | |
import { LightningElement, track, wire, api } from ‘lwc’; | |
import findContacts from ‘@salesforce/apex/ContactController.getContacts’; | |
/** The delay used when debouncing event handlers before invoking Apex. */ | |
const DELAY = 300; | |
export default class ApexWireMethodWithParams extends LightningElement { | |
@track searchKey = ‘‘; | |
@api recordId; | |
@wire(findContacts, { searchKey: ‘$searchKey‘ }) | |
contacts; | |
//connectedCallback function is similar to init method in Lightning Components. | |
connectedCallback(){ | |
this.searchKey = this.recordId; | |
} | |
} |
*connectedCallBack(): Check out this function. This is a replacement of “init” event in Aura component.
Apex Controller
public class ContactController { | |
public List<Contact> contactList {get;set;} | |
public ContactController(){ | |
this.contactList = new List<Contact>(); | |
} | |
@AuraEnabled(cacheable=true) | |
public static list<Contact> getContacts(string searchKey){ | |
List<Contact> lst = new List<Contact>([SELECT Id, Name, Title, Phone, Email FROM Contact WHERE Accountid = :searchKey ]); | |
return lst; | |
} | |
} |