Navigation in LWC

Navigation in LWC :


There are a few steps to navigate from LWC :

  1. import {NavigationMixin } from ‘lightning/navigation;
  2. Apply the navigationMixin to the component’s base class to gain access t its APIs.

  • export default class NavigationExample extends NavigationMixin (Lightning element)

  1. NavigationMixin has two methods :

  • Navigate
  • GenerateURL

Limitations of NavigationMixin :

Lightning Navigation doesn’t work if we are using LWC

  • inside visualforce page.
  • inside aura component.

We will see one example of Navigate, let’s create a component to navigate to the record detail page from LWC.

ContactCreateForm.html:

<template>
	<lightning-card>
		<lightning-record-form
		object-api-name={objectApiName}
		fields={fields}
		onsuccess={handleSuccess}>
		</lightning-record-form>
	</lightning-card>
</template>        

ContactCreateForm.js :

import { LightningElement } from  'lwc';
import { ShowToastEvent } from  'lightning/platformShowToastEvent';
import CONTACT_OBJECT from  '@salesforce/schema/Contact';
import FIRST_NAME from  '@salesforce/schema/Contact.FirstName';
import LAST_NAME from  '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from  '@salesforce/schema/Contact.Email';
import { NavigationMixin } from  'lightning/navigation';
export  default  class ContactCreator extends NavigationMixin (LightningElement) {
objectApiName = CONTACT_OBJECT;
fields = [FIRST_NAME, LAST_NAME, EMAIL_FIELD];
handleSuccess(event) {
	const toastEvent = new ShowToastEvent({
	title: "Contact created",
	message: "Record ID: " + event.detail.id,
	variant: "success"
	});
	this.dispatchEvent(toastEvent);
	this.navigateToNewContactPage(event.detail.id);
}
navigateToNewContactPage(contactId) {
		this[NavigationMixin.Navigate]({
		type: 'standard__recordPage',
			attributes: {
			recordId: contactId,
			objectApiName: 'Contact',
			actionName: 'view'
			}
		});
	}
}        

contactCreateForm.js-meta.xml :

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle  xmlns="https://soap.sforce.com/2006/04/metadata">
<apiVersion>48.0</apiVersion>
<isExposed>true</isExposed>
<targets>
	<target>lightning__AppPage</target>
	<target>lightning__HomePage</target>
	<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>        

要查看或添加评论,请登录

sweety kumari的更多文章

  • Streamlining Salesforce Development: Using a Wrapper Class to Pass User Input from LWC to Apex

    Streamlining Salesforce Development: Using a Wrapper Class to Pass User Input from LWC to Apex

    In today's Salesforce-driven business landscape, creating efficient and scalable applications is key to delivering…

    4 条评论
  • Understanding the Fault Connector in Salesforce Flow

    Understanding the Fault Connector in Salesforce Flow

    Salesforce Flow is a powerful tool that allows users to automate complex business processes by defining a series of…

    3 条评论
  • Comparable Interface in Salesforce

    Comparable Interface in Salesforce

    The Comparable Interface in Salesforce is a fundamental tool for adding custom sorting capabilities to lists of objects…

    1 条评论
  • How to Use Lightning Web Component (LWC) Slots

    How to Use Lightning Web Component (LWC) Slots

    In Lightning Web Components (LWC), a slot is a feature that allows you to create a component with a designated area…

    2 条评论
  • How to get record Id in your LWC when you want to place your component in related list

    How to get record Id in your LWC when you want to place your component in related list

    To get the record ID when placing your LWC component in a related list, you can use the lightning__RecordContext…

    2 条评论
  • Understanding JavaScript Variables: Exploring the Differences and Usage

    Understanding JavaScript Variables: Exploring the Differences and Usage

    JavaScript variables are used to store values or data that can be accessed and manipulated throughout the execution of…

    2 条评论
  • Database.Stateful in Batch Apex Class

    Database.Stateful in Batch Apex Class

    Sateful and Stateless Batch Apex : In Batch Apex, the Stateful and stateless terms refer to whether or not the batch…

  • Lightning Message Service(LMS) in LWC :

    Lightning Message Service(LMS) in LWC :

    Lightning Message Service(LMS) in LWC : To communicate/pass data between two components that is not having any…

    1 条评论
  • Design Attribute in LWC :

    Design Attribute in LWC :

    What is? When you want to expose any attribute to the end user so that the user can modify the values of the component…

社区洞察

其他会员也浏览了