Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<style>
table tr td{
padding: 10px;
border: 1px solid black;
}
</style>
<div style="background:white;padding:20px;">
<table>
<tr>
<td>
<lightning-input type="text" label="Account ID"></lightning-input>
</td>
<td>
<lightning-button label="Get Details" onclick={fetchAccount}></lightning-button>
</td>
</tr>
<tr>
<td>Demo With Property</td>
<td>
<c-wireservicewithproperty accid={accountid}></c-wireservicewithproperty>
</td>
</tr>
<tr>
<td>Demo With Function</td>
<td>
<c-wireservicewithfunction accid={accountid}></c-wireservicewithfunction>
</td>
</tr>
</table>
</div>
</template>
import { LightningElement, track } from 'lwc';
export default class WireServiceDemo extends LightningElement {
@track accountid;
fetchAccount(){
this.accountid = this.template.querySelector('lightning-input').value;
}
renderedCallback(){
console.log('Render Completed - Wire Service Demo');
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="WireServiceDemo">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>
<template>
Account Name: {accountName}
</template>
import { LightningElement, track, wire, api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
export default class WireServiceUsingFunction extends LightningElement {
@track accountName;
@api accid;
@wire(getRecord, { recordId: '$accid', fields: ['Account.Name'] })
wiredAccount({ error, data }) {
if (data) {
this.accountName = data.fields.Name.value;
}
}
renderedCallback(){
console.log('Render Completed - Wire Service Using Function');
}
}
<template>
Website: {website}
</template>
import { LightningElement,wire,api } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
export default class WireServiceUsingProperty extends LightningElement {
@api accid;
@wire(getRecord, { recordId: '$accid', fields: ['Account.Website'] })
account;
get website(){
if( typeof this.account.data !== 'undefined' ){
return this.account.data.fields.Website.value
}
return '';
}
renderedCallback(){
console.log('Render Completed - Wire Service Using Property');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.