Different navigations possible in LWC components

We know that we want to move from one page to other page in the web, and why not we could do that within the Salesforce Lightning web components a.k.a LWCs.
Below are the actions that we can perform to navigate from LWC components.

Navigate to a web page like “https://sunilkhuwal.wordpress.com“, I like to give this url Meh. 😊😊
Navigate to Object Home page like Account home page
Navigate to Record Detail page like Account record Detail page(In your case it could any other object’s record page.
Navigate to the Object List page, like Account List View page
Navigate to file Preview
While I am writing Salesforce might have introduced new mode of navigation in LWC.

We will discuss the code pattern individually for each of these styles. But before that just one thing that you need to do in the js file part. Keep note of the “LightningElement” should be encapsulated inside of the NavigationMixin like NavigationMixin(LightningElement) while exporting the default class

import { LightningElement } from "lwc";
import { NavigationMixin } from "lightning/navigation";
export default class NavigationServiceExample extends NavigationMixin(
  LightningElement
) {
   //Navigations method
}

Navigate to a web page like “https://sunilkhuwal.wordpress.com“

I am keeping a one time html file to show how that would be called from. For rest of the examples only javascript should be enough, if you still have any issues you can comment here and I’ll respond to that.

<template>
  <lightning-card title="Navigation Examples">
    <div class="slds-p-around_medium">
      <lightning-button
        label="Open Sunil Web"
        onclick={openWebHandler}
      ></lightning-button>
    </div>
</lightning-card>
</template>

openWebHandler() {
    this[NavigationMixin.Navigate]({
      type: "standard__webPage",
      attributes: {
        url: "https://sunilkhuwal.wordpress.com"
      }
    });
  }

Navigate to Object Home page like Account home page

openAccountHandler() {
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Account",
        actionName: "home"
      }
    });
  }

Navigate to Record Detail page like Account record Detail page

openAccountRecordHandler() {
    this[NavigationMixin.Navigate]({
      type: "standard__recordPage",
      attributes: {
        objectApiName: "Account",
        actionName: "view",
        recordId: "$recordId"
      }
    });
  }

Navigate to the Object List page, like Account List View page

openAccountListHandler() {
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Account",
        actionName: "list"
      }
    });
  }

Navigate to file Preview

openFilePreviewHandler() {
    this[NavigationMixin.Navigate]({
      type: "standard__namedPage",
      attributes: {
        pageName: "filePreview"
      },
      state: {
        //The file record id has to be passed in here
        recordIds: "$fileId1,$fileId2",
        selectedRecordId: "$fileId1"
      }
    });
  }

Config file navigationExamples.js-meta.xml

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

If you know any other type of navigations pls fill in the comments, so that we can update this post to help more people.

Peace 🤘

Leave a comment Cancel reply