Notes
HTML
<template>
<lightning-card title="Fetch and Insert Accounts">
<div class="slds-p-around_medium">
<lightning-button label="Fetch Accounts"
variant="brand" onclick={handleFetchAccounts}>
</lightning-button>
<template if:true={accounts.length}>
<table class="slds-table slds-table_bordered slds-m-top_medium">
<thead>
<tr>
<th>Name</th>
<th>Account Number</th>
</tr>
</thead>
<tbody>
<template for:each={accounts} for:item="acc">
<tr key={acc.AccountNumber}>
<td>{acc.Name}</td>
<td>{acc.AccountNumber}</td>
</tr>
</template>
</tbody>
</table>
<lightning-button label="Create Accounts"
variant="success" class="slds-m-top_medium"
onclick={handleCreateAccounts}>
</lightning-button>
</template>
<p if:true={message} class="slds-p-around_medium">{message}</p>
</div>
</lightning-card>
</template>
JavaScript
<template>
<lightning-card title="Fetch and Insert Accounts">
<div class="slds-p-around_medium">
<lightning-button label="Fetch Accounts"
variant="brand" onclick={handleFetchAccounts}>
</lightning-button>
<template if:true={accounts.length}>
<table class="slds-table slds-table_bordered slds-m-top_medium">
<thead>
<tr>
<th>Name</th>
<th>Account Number</th>
</tr>
</thead>
<tbody>
<template for:each={accounts} for:item="acc">
<tr key={acc.AccountNumber}>
<td>{acc.Name}</td>
<td>{acc.AccountNumber}</td>
</tr>
</template>
</tbody>
</table>
<lightning-button label="Create Accounts"
variant="success" class="slds-m-top_medium"
onclick={handleCreateAccounts}>
</lightning-button>
</template>
<p if:true={message} class="slds-p-around_medium">{message}</p>
</div>
</lightning-card>
</template>
Apex
import { LightningElement, track } from 'lwc';
import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';
import createAccounts from '@salesforce/apex/AccountController.createAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class FetchAccounts extends LightningElement {
@track accounts = [];
@track message = '';
handleFetchAccounts() {
fetchAccounts()
.then(data => {
this.accounts = data;
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error Fetching Data',
message: error.body.message,
variant: 'error'
})
);
});
}
handleCreateAccounts() {
createAccounts({ accounts: this.accounts })
.then(result => {
this.message = result;
this.accounts = [];
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: result,
variant: 'success'
})
);
})
.catch(error => {
this.message = 'Error: ' + error.body.message;
this.dispatchEvent(
new ShowToastEvent({
title: 'Error',
message: error.body.message,
variant: 'error'
})
);
});
}
}
Meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="createAccountForm">
<apiVersion>58.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
</targets>
</LightningComponentBundle>
JSON
[
{
"Name": "Acme Corporation",
"AccountNumber": "AC-12345"
},
{
"Name": "XYZ Inc.",
"AccountNumber": "AC-98765"
},
{
"Name": "ABC Inc.",
"AccountNumber": "AC-54321"
},
{
"Name": "123 Company",
"AccountNumber": "AC-24680"
},
{
"Name": "ABC Corporation",
"AccountNumber": "AC-55555"
},
{
"Name": "Sunflower Enterprises",
"AccountNumber": "AC-67890"
},
{
"Name": "Bluebird Logistics",
"AccountNumber": "AC-24680"
},
{
"Name": "Sunrise Farms",
"AccountNumber": "AC-13579"
}
]
