Here we will see , how to create Account,Contact & Case record in single click using multi page forms.
Its built with below component structure.
Parent Component :
- multipageForm -This is the Parent container
Child Component :
- accountForm - This is the child component which contain Account related fields
- ContactsForm - This is the child component which contain Contact related fields
- caseForm - This is the child component which contain Case related fields
multipageForm.html
<template>
<!--Loading Spinner-->
<div class="spinner">
<template if:true={isLoading}>
<lightning-spinner alternative-text="Loading" variant="brand" size="large">
</lightning-spinner>
</template>
</div>
<!--Progress indicator-->
<lightning-progress-indicator current-step={currentStep} type="path" variant="base">
<lightning-progress-step label="Account" value="1"> </lightning-progress-step>
<lightning-progress-step label="Contact" value="2"> </lightning-progress-step>
<lightning-progress-step label="Case" value="3"> </lightning-progress-step>
</lightning-progress-indicator>
<!--Step 1 : Account Form-->
<div class="stepOne">
<c-account-form class="acntForm" onaccountid={contactCreation}></c-account-form>
<lightning-button class="slds-m-top_small" label="Next" onclick={goToStepTwo}>
</lightning-button>
</div>
<!--Step 2 : Contact Form-->
<div class="stepTwo slds-hide">
<c-contacts-form class="contactForm" oncontactid={caseCreation}></c-contacts-form>
<lightning-button class="slds-m-top_small" label="Previous" onclick={goBackToStepOne}>
</lightning-button>
<lightning-button class="slds-m-top_small" label="Next" onclick={goToStepThree}>
</lightning-button>
</div>
<!--Step 3 : Case Form-->
<div class="stepThree slds-hide">
<c-case-form class="caseForm"></c-case-form>
<lightning-button class="slds-m-top_small" label="Previous" onclick={goBackToStepTwo}>
</lightning-button>
<lightning-button class="slds-m-top_small" label="Save" onclick={handleSave}>
</lightning-button>
</div>
</template>
multipageForm.js
import { LightningElement,api,track } from 'lwc';
export default class MultiPageForm extends LightningElement {
@api recordId;
@track currentStep;
@track accountId;
@track contactId;
isloading = false;
goBackToStepOne() {
this.currentStep = '1';
this.template.querySelector('div.stepTwo').classList.add('slds-hide');
this.template
.querySelector('div.stepOne')
.classList.remove('slds-hide');
}
goToStepTwo() {
this.currentStep = '2';
this.template.querySelector('div.stepOne').classList.add('slds-hide');
this.template
.querySelector('div.stepTwo')
.classList.remove('slds-hide');
}
goBackToStepTwo() {
this.currentStep = '2';
this.template.querySelector('div.stepThree').classList.add('slds-hide');
this.template
.querySelector('div.stepTwo')
.classList.remove('slds-hide');
}
goToStepThree() {
this.currentStep = '3';
this.template.querySelector('div.stepTwo').classList.add('slds-hide');
this.template
.querySelector('div.stepThree')
.classList.remove('slds-hide');
}
/*Method to create new Account */
handleSave(){
this.isloading = true;
this.template.querySelector(".acntForm").handleSubmit();
}
/*Method to create new Contact */
contactCreation(event){
this.accountId = event.detail;
this.template.querySelector(".contactForm").accountId = this.accountId ;
this.template.querySelector(".contactForm").handleSubmit();
}
/*Method to create new Case */
caseCreation(event){
this.contactId = event.detail;
this.template.querySelector(".caseForm").contactId = this.contactId ;
this.template.querySelector(".caseForm").accountId = this.accountId ;
this.template.querySelector(".caseForm").handleSubmit();
this.isloading = false;
}
}
accountForm.html
<template>
<lightning-record-edit-form class="Account" object-api-name="Account" onsuccess={handleSucess}>
<lightning-input-field field-name="Name" onchange={handleNameChange}>
</lightning-input-field>
</lightning-record-edit-form>
</template>
accountForm.js
import { LightningElement, track, api } from 'lwc';
export default class AccountForm extends LightningElement {
@track fields = {};
@api handleSubmit() {
this.template.querySelector('lightning-record-edit-form').submit(this.fields);
}
handleNameChange(event) {
this.fields.Name = event.target.value;
}
handleSucess(event) {
const accountId = event.detail.id;
const selectEvent = new CustomEvent('accountid', {
detail: accountId
});
this.dispatchEvent(selectEvent);
}
}
contactForm.html
<template>
<lightning-record-edit-form class="Contact" object-api-name="Contact" onsuccess={handleSucess}>
<lightning-input-field field-name="FirstName" onchange={firstNameChange}>
</lightning-input-field>
<lightning-input-field field-name="LastName" onchange={lastNameChange}>
</lightning-input-field>
<lightning-input-field field-name="Email" onchange={emailChange}>
</lightning-input-field>
</lightning-record-edit-form>
</template>
contactForm.js
import { LightningElement, api, track } from 'lwc';
export default class ContactsForm extends LightningElement {
@api accountId;
@track fields = {};
@api handleSubmit() {
this.fields.AccountId = this.accountId;
this.template.querySelector('lightning-record-edit-form').submit(this.fields);
}
handleSucess(event) {
const contactId = event.detail.id;
const selectEvent = new CustomEvent('contactid', {
detail: contactId
});
this.dispatchEvent(selectEvent);
}
firstNameChange(event) {
this.fields.FirstName = event.target.value;
}
lastNameChange(event) {
this.fields.LastName = event.target.value;
}
emailChange(event) {
this.fields.Email = event.target.value;
}
}
caseForm.html
<template>
<lightning-record-edit-form class="Case" object-api-name="Case" onsuccess={handleSucess}>
<lightning-input-field field-name="Origin" onchange={handleOriginChange}>
</lightning-input-field>
<lightning-input-field field-name="Subject" onchange={handleSubjectChange}>
</lightning-input-field>
<lightning-input-field field-name="Description" onchange={handleDescriptionChange}>
</lightning-input-field>
</lightning-record-edit-form>
</template>
caseForm.js
import { LightningElement,api,track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CaseForm extends NavigationMixin(LightningElement) {
@api contactId;
@api accountId;
@track fields ={};
@api handleSubmit(){
this.fields.ContactId = this.contactId;
this.fields.AccountId = this.accountId;
this.template.querySelector('lightning-record-edit-form').submit(this.fields);
}
handleSubjectChange(event){
this.fields.Subject =event.target.value;
}
handleDescriptionChange(event){
this.fields.Description =event.target.value;
}
handleOriginChange(event){
this.fields.Origin =event.target.value;
}
handleSucess (){
this[NavigationMixin.Navigate]({
type: 'standard__recordPage',
attributes: {
recordId: this.accountId,
objectApiName: 'Account',
actionName: 'view'
}
});
const evt = new ShowToastEvent({
message: "Account,Contact & Case has been created sucessfully",
variant: "success",
});
this.dispatchEvent(evt);
}
}
Demo :
GitHub :
No comments:
Post a Comment