Notes
As a Salesforce Administrator, I want to understand JavaScript array methods using Lightning Web Components (LWC) so that I can enhance my development skills and improve my custom Salesforce applications.
Description:
In this user story, we aim to create a Lightning Web Component (LWC) that demonstrates various JavaScript array methods. Each method will be executed by clicking a corresponding button, and the result of each method will be displayed below the button. This will help Salesforce Administrators and Developers to understand and visualize the behavior of JavaScript array methods within the context of a Salesforce application.
Acceptance Criteria:
- The component must display a series of buttons, each corresponding to a different JavaScript array method.
- Each button must execute the associated array method on a predefined array
[3, 4, 5, 6] when clicked.
- The result of each method execution must be displayed below the respective button.
- The component must be easily deployable and configurable within a Salesforce Lightning App, Record, or Home Page.
ArrayMethodsDemo.html
<template>
<lightning-card title="Create Account">
<div class="slds-p-around_medium">
<lightning-input label="Account Name" value={accountName} onchange={handleChange} data-field="name"></lightning-input>
<lightning-input label="Industry" value={industry} onchange={handleChange} data-field="industry"></lightning-input>
<lightning-input label="Phone" value={phone} onchange={handleChange} data-field="phone"></lightning-input>
<lightning-button label="Create Account" onclick={handleCreate} variant="brand" class="slds-m-top_medium"></lightning-button>
</div>
<p if:true={message} class="slds-p-around_medium">{message}</p>
</lightning-card>
</template>
ArrayMethodsDemo.js
import { LightningElement, track } from 'lwc';
import createAccount from '@salesforce/apex/AccountController.createAccount';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CreateAccountForm extends LightningElement {
@track accountName = '';
@track industry = '';
@track phone = '';
@track message = '';
handleChange(event) {
const field = event.target.dataset.field;
if (field === 'name') {
this.accountName = event.target.value;
} else if (field === 'industry') {
this.industry = event.target.value;
} else if (field === 'phone') {
this.phone = event.target.value;
}
}
handleCreate() {
createAccount({ name: this.accountName, industry: this.industry, phone: this.phone })
.then(result => {
this.message = result;
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'
})
);
});
}
}
APEX
public with sharing class AccountController {
@AuraEnabled
public static String createAccount(String name, String industry, String phone) {
try {
Account acc = new Account(
Name = name,
Industry = industry,
Phone = phone
);
insert acc;
return 'Account created successfully with ID: ' + acc.Id;
} catch (Exception e) {
throw new AuraHandledException('Error: ' + e.getMessage());
}
}
}
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>
