Creating Account ,Contact & Case in single transaction with Multiple Steps in LWC

When we work with forms which is having multiple object ,its suggested practice that we split the form into multiple screens.

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