Code samples to quickly start playing with Lightning Web Components:
getContactList.html
| <template> | |
| <lightning-card title=”Related Contacts” icon-name=”custom:custom63″> | |
| <div> | |
| <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 style=”list-style-type: none;” key={it.value.Id}> | |
| <article> | |
| <h3 title=”Anypoint Connectors”><a | |
| href=”javascript:void(0);”>{it.value.Name}</a></h3> | |
| <div> | |
| <ul> | |
| <li>Title: {it.value.Title}</li> | |
| </ul> | |
| <ul> | |
| <li>Phone: {it.value.Phone}</li> | |
| </ul> | |
| <ul> | |
| <li>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> |
view rawgetContactList.html hosted with 
by GitHub
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; | |
| } | |
| } |
view rawgetContactList.js hosted with by GitHub
*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> | |
| <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 style=”list-style-type: none;” key={it.value.Id}> | |
| <article> | |
| <h3 title=”Anypoint Connectors”><a | |
| href=”javascript:void(0);”>{it.value.Name}</a></h3> | |
| <div> | |
| <ul> | |
| <li>Title: {it.value.Title}</li> | |
| </ul> | |
| <ul> | |
| <li>Phone: {it.value.Phone}</li> | |
| </ul> | |
| <ul> | |
| <li>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> |
view rawgetContactList.html hosted with by GitHub
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; | |
| } | |
| } |
view rawgetContactList.js hosted with by GitHub
*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 GitHub