Create Parent and Child record along with file in single LWC Screen
This scenario has been designed for developer who possess Intermediate skills in Lightning Web Component.
Problem Statement
- Create a Lightning Web Component
- Create form to create account, contact related to same account and upload a file from single screen
- Add below input fields:-
- Account Name
- Contact First Name
- Contact Last Name
- Contact Email
- Account WebSite
- Contact phone Number
- Add a file input so that user can upload the file from local system
- Add buttons in footer section –
- Save
- Save and new
- Cancel
- When clicked on Save, It should take you to newly created contact record page
- When clicked Save and New, Save the record and open a new form
- When clicked on cancel, form field value should be cleared
Do you need help?
Are you stuck while working on this requirement? Do you want to get review of your solution? Now, you can book dedicated 1:1 with me on Lightning Web Component completely free.
GET IN TOUCH
Schedule a 1:1 Meeting with me
Also check out https://salesforcediaries.com/category/lightning-web-com
Hi Everyone!
Just now I Complete the above requirement…!
Hi Everyone!
Just now I Complete the above requirement…!
Html.File
———————
Js file
———
import { LightningElement,wire,api,track } from ‘lwc’;
import AccountRecordCreation from ‘@salesforce/apex/Account_Handler.AccountRecordCreation’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
import { NavigationMixin } from ‘lightning/navigation’;
export default class ContactRelatedAccounts extends NavigationMixin(LightningElement) {
name;
industry;
phone;
firstname;
lastname;
website;
handleNameChange(event) {
this.name = event.target.value;
console.log(“name1”, this.name);
}
handleIndChange(event) {
this.industry = event.target.value;
console.log(“Industry”, this.industry);
}
handlePhnChange(event) {
this.phone = event.target.value;
console.log(“Phone”, this.phone);
}
handleFirstNameChange(event){
this.firstname = event.target.value;
console.log(“FirstName”, this.firstName);
}
handleLastNameChange(event){
this.lastname = event.target.value;
console.log(“LastName”, this.lastname);
}
// SAVE AND NEW THE DATA
handleClick() {
AccountRecordCreation({ name:this.name, industry: this.industry, firstname : this.firstname, lastname: this.lastname,phone:this.phone})
.then(result => {
this.message = result;
this.error = undefined;
if(this.message !== undefined) {
this.name = ”;
this.industry = ”;
this.phone = ”;
this.firstName= ”;
this.lastName = ”;
this.dispatchEvent(
new ShowToastEvent({
title: ‘Success’,
message: ‘Account created’,
variant: ‘success’,
}),
);
}
console.log(JSON.stringify(result));
console.log(“result”, this.message);
})
.catch(error => {
this.message = undefined;
this.error = error;
this.dispatchEvent(
new ShowToastEvent({
title: ‘Error creating record’,
message: error.body.message,
variant: ‘error’,
}),
);
console.log(“error”, JSON.stringify(this.error));
});
}
// save the data and navigate the account object
handleClick1() {
AccountRecordCreation({ name:this.name, industry: this.industry, firstname : this.firstname, lastname: this.lastname,phone:this.phone})
.then(result => {
this.message = result;
this.error = undefined;
if(this.message !== undefined) {
this.name = ”;
this.industry = ”;
this.phone = ”;
this.firstName= ”;
this.lastName = ”;
this.dispatchEvent(
new ShowToastEvent({
title: ‘Success’,
message: ‘Account created’,
variant: ‘success’,
}),
);
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: this.message,
objectApiName: ‘Contact’,
actionName: ‘view’,
},
});
}
console.log(JSON.stringify(result));
console.log(“result”, this.message);
})
.catch(error => {
this.message = undefined;
this.error = error;
this.dispatchEvent(
new ShowToastEvent({
title: ‘Error creating record’,
message: error.body.message,
variant: ‘error’,
}),
);
console.log(“error”, JSON.stringify(this.error));
});
}
// to clear the all data
handleClick2() {
this.name = ”;
this.industry = ”;
this.phone = ”;
this.firstName= ”;
this.lastName = ”;
}
}
xml file
————-
54.0
true
lightning__AppPage
lightning__HomePage
lightning__RecordPage