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>
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
Previous
Next

Author: CloudFountain

We started as a side business in 1999 and have since grown to become a leading provider of IT solutions for businesses. With around 30 employees across several countries, we offer a wide range of services, including IT support, hosting, and custom software development.Over the years, we have served approximately 1000 customers, ranging from small startups to large enterprises. Our mission is to provide cutting-edge technology solutions that help our clients achieve their business goals. We pride ourselves on our exceptional customer service and attention to detail, and we work closely with each client to understand their unique needs and provide tailored solutions that meet their specific requirements.At CloudFountain, we believe that technology can be a powerful tool for growth and success. That’s why we stay on top of the latest trends and advancements in the industry, so we can provide our clients with the best possible solutions. Whether you need IT support, hosting services, or custom software development, our team of experts is here to help. Contact us today to learn more about how we can help your business succeed.