Enter a Valid Url and Try Again Lightning Component
Navigation Service in LWC(Lightning Web Components)
Navigation Service in LWC(Lightning Web Components)
To navigate in Lightning Experience, Lightning Communities, and the Salesforce app, use the navigation service, lightning/navigation.
Thelightning/navigation service is supported just in Lightning Experience, Lightning Communities, and the Salesforce app. Information technology isn't supported in other containers, such as Lightning Components for Visualforce, or Lightning Out. This is true even if y'all access these containers inside Lightning Experience or the Salesforce app. We can apply navigation services in LWC to Navigate to Pages, Records, and Lists.
There are different types of navigation options bachelor. Let's discuss the basic one
Basic Navigation
Use the navigation service, lightning/navigation, to navigate to many different page types, like records, list views, and objects. Also use the navigation service to open files.
Instead of a URL, the navigation service uses a PageReference. A PageReference is a JavaScript object that describes the folio blazon, its attributes, and the state of the folio. Using a PageReference insulates your component from future changes to URL formats. It besides allows your component to exist used in multiple applications, each of which can use different URL formats.
Navigation service uses a PageReference. PageReference is a JavaScript object that describes the page type, its attributes, and the land of the page.
Page type(String) and attributes(Object) are required parameters, state(Object) is optional parameter.
Utilise Navigation Service in LWC
Hither are steps to use the navigation service
- Beginning, we need to import the lightning/navigation module.
import { NavigationMixin } from 'lightning/navigation'; - Use the NavigationMixin function to your component'south base class.
export default class MyCustomElement extends NavigationMixin(LightningElement) {} - Create a obviously JavaScriptPageReferenceobject that defines the page
- To dispatch the navigation asking, call the navigation service'southward [NavigationMixin.Navigate](pageReference, [supplant])
navigateNext() { this[NavigationMixin.Navigate]({ blazon: 'standard__navItemPage', attributes: { apiName: this.tabName, }, }); }
The NavigationMixin adds ii APIs to your component'due south course. Since these APIs are methods on the class, they must be invoked with this reference.
- [NavigationMixin.Navigate](pageReference, [replace]): A component calls this[NavigationMixin.Navigate] to navigate to another page in the application.
- [NavigationMixin.GenerateUrl](pageReference): A component calls this[NavigationMixin.GenerateUrl] to get a hope that resolves to the resulting URL. The component can employ the URL in the href attribute of an anchor. Information technology tin besides use the URL to open a new window using the window.open up(url) browser API.
Navigation Service in LWC Example
navigationExampleLWC.html
<template> <lightning-card championship="Navigation Service in LWC(Lightning Web Components)"> <lightning-bill of fare title="Navigate To Record Example"> <lightning-button label="New Account" onclick={navigateToNewAccountPage}></lightning-button> <lightning-button label="View Account" onclick={navigateToViewAccountPage}></lightning-push> <lightning-button characterization="Edit Account" onclick={navigateToEditAccountPage}></lightning-button> </lightning-card> <lightning-card championship="Navigate To Views"> <lightning-push label="Account Contempo list View" onclick={navigateToAccountListView}></lightning-push button> <lightning-button label="Business relationship Related List" onclick={navigateToContactRelatedList}></lightning-button> </lightning-carte du jour> <lightning-card title="Navigate To Home"> <lightning-push label="Navigate to Home" onclick={navigateToHomePage}></lightning-push button> <lightning-button label="Navigate to Contact Abode " course="slds-m-around_medium" onclick={navigateToContactHome}></lightning-button> </lightning-card> <lightning-card championship="Navigate To Other"> <lightning-button label="Navigate to Chatter Home" onclick={navigateToChatter}></lightning-button> <lightning-button label="Navigate to Reports" onclick={navigateToReports}></lightning-button> <lightning-button label="Navigate to Tab" onclick={navigateToTab}></lightning-push button> <lightning-button label="Navigate to SFDCPoint" onclick={navigateToWebPage}></lightning-button> <lightning-push button label="Navigate to Files " form="slds-m-around_medium" onclick={navigateToFilesHome}></lightning-push> </lightning-card> <lightning-card title="Navigate To Component"> <lightning-push button label="Navigate to Visualforce page " onclick={navigateToVFPage}></lightning-push> <lightning-button label="Navigate to Aureola Lightning Component " grade="slds-k-around_medium" onclick={navigateToLightningComponent}></lightning-button> </lightning-card> </lightning-carte du jour> </template> navigationExampleLWC.js
import { LightningElement, api } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; export default grade NavigationExampleLWC extends NavigationMixin(LightningElement) { @api recordId; // Navigate to New Account Page navigateToNewAccountPage() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'new' }, }); } // Navigate to View Account Page navigateToViewAccountPage() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 'view' }, }); } // Navigate to Edit Business relationship Page navigateToEditAccountPage() { this[NavigationMixin.Navigate]({ blazon: 'standard__recordPage', attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 'edit' }, }); } // Navigation to Account Listing view(recent) navigateToAccountListView() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Business relationship', actionName: 'list' }, country: { filterName: 'Recent' }, }); } // Navigation to Contact related list of account navigateToContactRelatedList() { this[NavigationMixin.Navigate]({ type: 'standard__recordRelationshipPage', attributes: { recordId: this.recordId, objectApiName: 'Account', relationshipApiName: 'Contacts', actionName: 'view' }, }); } //Navigate to home folio navigateToHomePage() { this[NavigationMixin.Navigate]({ type: 'standard__namedPage', attributes: { pageName: 'home' }, }); } // Navigation to contant object dwelling house folio navigateToContactHome() { this[NavigationMixin.Navigate]({ "type": "standard__objectPage", "attributes": { "objectApiName": "Contact", "actionName": "home" } }); } //Navigate to chatter navigateToChatter() { this[NavigationMixin.Navigate]({ type: 'standard__namedPage', attributes: { pageName: 'chatter' }, }); } //Navigate to Reports navigateToReports() { this[NavigationMixin.Navigate]({ blazon: 'standard__objectPage', attributes: { objectApiName: 'Report', actionName: 'home' }, }); } //Navigate to Files home navigateToFilesHome() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'ContentDocument', actionName: 'dwelling house' }, }); } // Navigation to lightning component navigateToLightningComponent() { this[NavigationMixin.Navigate]({ "type": "standard__component", "attributes": { //Here customLabelExampleAura is name of lightning aura component //This aureola component should implement lightning:isUrlAddressable "componentName": "c__customLabelExampleAura" } }); } // Navigation to spider web folio navigateToWebPage() { this[NavigationMixin.Navigate]({ "type": "standard__webPage", "attributes": { "url": "https://www.sfdcpoint.com/" } }); } //Navigate to visualforce page navigateToVFPage() { this[NavigationMixin.GenerateUrl]({ blazon: 'standard__webPage', attributes: { url: '/noon/AccountVFExample?id=' + this.recordId } }).so(generatedUrl => { window.open up(generatedUrl); }); } // Navigation to Custom Tab navigateToTab() { this[NavigationMixin.Navigate]({ type: 'standard__navItemPage', attributes: { //Name of whatever CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs apiName: 'CustomTabName' }, }); } } navigationExampleLWC.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>48.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle>
Now we can add this LWC component on the Account Record page.
- Go to Account detail tape page
- Click Setup (Gear Icon) and selectEdit Page.
- Under Custom Components, find your navigationExampleLWC component and drag it on correct-hand side top.
- ClickSave andactivate.
We will get the post-obit output
Navigate to New Record LWC
// Navigate to New Business relationship Folio navigateToNewAccountPage() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'new' }, }); } Navigate to View Tape LWC
// Navigate to View Business relationship Page navigateToViewAccountPage() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 'view' }, }); } Navigate to the Edit Record LWC
// Navigate to Edit Business relationship Page navigateToEditAccountPage() { this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: this.recordId, objectApiName: 'Account', actionName: 'edit' }, }); } Navigate to Listing View LWC
// Navigation to Account List view(recent) navigateToAccountListView() { this[NavigationMixin.Navigate]({ blazon: 'standard__objectPage', attributes: { objectApiName: 'Account', actionName: 'listing' }, state: { filterName: 'Contempo' }, }); } Navigate to Related List LWC
// Navigation to Contact related listing of account navigateToContactRelatedList() { this[NavigationMixin.Navigate]({ type: 'standard__recordRelationshipPage', attributes: { recordId: this.recordId, objectApiName: 'Account', relationshipApiName: 'Contacts', actionName: 'view' }, }); } Navigate to Home Page LWC
//Navigate to habitation page navigateToHomePage() { this[NavigationMixin.Navigate]({ blazon: 'standard__namedPage', attributes: { pageName: 'home' }, }); } Navigate to Object Home LWC
// Navigation to contant object home page navigateToContactHome() { this[NavigationMixin.Navigate]({ "type": "standard__objectPage", "attributes": { "objectApiName": "Contact", "actionName": "dwelling house" } }); } Navigate to Churr Home LWC
//Navigate to chatter navigateToChatter() { this[NavigationMixin.Navigate]({ blazon: 'standard__namedPage', attributes: { pageName: 'churr' }, }); } Navigate to Reports Tab LWC
//Navigate to Reports navigateToReports() { this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: 'Report', actionName: 'habitation' }, }); Navigate to Files Dwelling LWC
//Navigate to Files home navigateToFilesHome() { this[NavigationMixin.Navigate]({ blazon: 'standard__objectPage', attributes: { objectApiName: 'ContentDocument', actionName: 'home' }, }); } Navigate to Lightning Component LWC
// Navigation to lightning component navigateToLightningComponent() { this[NavigationMixin.Navigate]({ "blazon": "standard__component", "attributes": { //Here customLabelExampleAura is name of lightning aureola component //This aura component should implement lightning:isUrlAddressable "componentName": "c__customLabelExampleAura" } }); } Navigate to Web Page LWC
// Navigation to web folio navigateToWebPage() { this[NavigationMixin.Navigate]({ "type": "standard__webPage", "attributes": { "url": "https://world wide web.sfdcpoint.com/" } }); } Navigate to Visualforce page LWC
//Navigate to visualforce folio navigateToVFPage() { this[NavigationMixin.GenerateUrl]({ type: 'standard__webPage', attributes: { url: '/apex/AccountVFExample?id=' + this.recordId } }).then(generatedUrl => { window.open(generatedUrl); }); } Navigate to Custom Tab LWC
// Navigation to Custom Tab navigateToTab() { this[NavigationMixin.Navigate]({ type: 'standard__navItemPage', attributes: { //Proper name of whatsoever CustomTab. Visualforce tabs, web tabs, Lightning Pages, and Lightning Component tabs apiName: 'CustomTabName' }, }); } For more than details delight refer to official link.
headlamtharnilich.blogspot.com
Source: https://www.sfdcpoint.com/salesforce/navigation-service-in-lwc/
0 Response to "Enter a Valid Url and Try Again Lightning Component"
Post a Comment