Introduction:
In this section, I will explain how to navigate to a record page in LWC. After creating a record on the Account, Redirect Record Page, where the next step is to navigate to the current UI page. The code is provided below.
HTML :
<template>
<lightning-card title=”How to Create Account With Contact In LWC” icon-name=”standard:account”>
<div class=”slds-grid slds-wrap”>
<div class=”slds-col slds-col-size_12-of-12 slds-p-horizontal_medium slds-m-bottom_medium”>
<lightning-input label=”Name”
onchange={handleNameChange}
value={accountName}
name=”accountName”
class=”slds-m-bottom_x-small”></lightning-input>
</div>
<div class=”slds-col slds-col-size_12-of-12 slds-p-horizontal_medium slds-m-bottom_medium slds-p-top_medium”>
<lightning-button label=”Save”
variant=”brand”
onclick={saveAction}></lightning-button>
</div>
</div>
</lightning-card>
</template>
JavaScript:
import { LightningElement, track } from ‘lwc’;
import { createRecord } from ‘lightning/uiRecordApi’;
import { ShowToastEvent } from ‘lightning/platformShowToastEvent’;
import { NavigationMixin } from ‘lightning/navigation’;
import accObj from ‘@salesforce/schema/Account’;
import nameFld from ‘@salesforce/schema/Account.Name’;
export default class HowToRedirectAccount extends NavigationMixin(LightningElement) {
@track accountName;
@track accountId;
handleNameChange(event) {
if (event.target.name == ‘accountName’) {
this.accountName = event.target.value;
}
}
navigateToRecord() {
this[NavigationMixin.Navigate]({
type: ‘standard__recordPage’,
attributes: {
recordId: this.accountId,
actionName: ‘view’
}
});
}
saveAction() {
const fields = {};
fields[nameFld.fieldApiName] = this.accountName;
const accRecordInput = { apiName: accObj.objectApiName, fields };
createRecord(accRecordInput)
.then(account => {
this.accountId = account.id;
this.dispatchEvent(
new ShowToastEvent({
title: ‘Success’,
message: ‘Account created’,
variant: ‘success’,
}),
);
this.navigateToRecord();
this.accountId=”;
})
.catch(error => {
this.dispatchEvent(
new ShowToastEvent({
title: ‘Error creating record’,
message: error.body.message,
variant: ‘error’,
}),
);
});
}
}
HTML (Template) Part:
1.<lightning-card> Component:
• Represents a card in the Salesforce Lightning Design System (SLDS).
Attributes:
• title: “How to Create Account With Contact In LWC”
• icon-name: “standard:account”
2.Container (<div>):
• SLDS grid and wrap classes (slds-grid slds-wrap).
• Contains two child <div> elements, each spanning the full width of the container.
3.Account Name Input Field (<lightning-input>):
• Allows users to input the name of the account.
• Attributes:
• label: “Name”
• onchange: Calls the handleNameChange method when the input value changes.
• value: Binds to the accountName property for two-way data binding.
• name: “accountName”
• class: SLDS styling class (slds-m-bottom_x-small) for a small bottom margin.
4.Save Button (<lightning-button>):
• Triggers the saveAction method when clicked.
• Attributes:
• label: “Save”
• variant: “brand” (indicating a primary action)
• onclick: Calls the saveAction method when the button is clicked.
JavaScript (Controller) Part:
1.Import Statements:
• Import necessary modules from the Lightning Web Component framework.
• createRecord for creating a new record.
• ShowToastEvent for displaying toast messages.
• NavigationMixin for navigating to a record page.
• accObj and nameFld for referencing the Account object and its Name field.
2.@track Properties:
• accountName: Holds the name of the account.
• accountId: Holds the ID of the created account.
3.handleNameChange Method:
• Updates accountName based on user input in the name field.
4.navigateToRecord Method:
• Uses NavigationMixin to navigate to the view page of the newly created Account.
• Attributes:
• type: Specifies the type of navigation (standard__recordPage).
• attributes: Contains recordId (ID of the account) and actionName (set to ‘view’).
5.saveAction Method:
• Creates a new account record using createRecord and the provided account name.
• Displays a success toast message upon successful account creation.
• Calls navigateToRecord to navigate to the view page of the newly created account.
• Resets accountId to an empty string.
Error Handling (catch block):
• Displays an error toast message if there’s an issue creating the account.
Conclusion:
•The Lightning web component offers a cohesive solution for creating records and seamlessly navigating to the view page within the same UI, providing users with a streamlined experience.
•Incorporates best practices, including error handling, structured code, and effective use of Lightning base components and modules.
• This component is a valuable part of a Salesforce Lightning Experience solution for managing and interacting with records.
Redirect Links :
https://www.merfantz.com/blog/how-to-call-lightning-web-component-from-visualforce-page/
https://www.merfantz.com/blog/aura-components-vs-lightning-web-components/
Author Bio
