Lightning Web Components: Show Child Records for a Parent

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>

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