How to Navigate Record Detail Page as View mode and Edit Mode in LWC - Lightning Web Component | How to use Navigation Service (NavigationMixin.Navigate) to Navigate Edit and View Mode Page in LWC

Hey guys, today in this post we are going to learn about How to Navigate Record Detail Page as View mode and Edit Mode in LWC – Lightning Web Component Salesforce.

Here are the steps to use the navigation service.

Navigation service uses a PageReference.And a page reference is JavaScript that describes its page type, its attributes, and the state of the page.
First, we need to import the lightning/navigation module.
Use this Syntax:- Import {NavigationMixin} from ‘lightning/navigation;

Apply the NavigationMixin function to your component’s base Class.

👉 Download Free Ebook →

👉 Get Free Course →

Challenges in your career

🎯 If You Are Facing Any Of These 6 Challenges in your career.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

Final Output →

Other related post that would you like to learn in Salesforce

Create HTML Page →

Step 1:- Create HTML Page : navigationPageLwc.html

navigationPageLwc.html [HTML PAGE]

```
    <template>
```
```
 
```

<!-- Navigate to Edit and View Mode Page -->

```
 
```

<lightning-card title="Navigate to Record Detail Page as View mode and Edit Mode">

```
 
```
```
    <div class="slds-m-around_medium">
```

        <TABLE class="slds-table slds-table_bordered slds-table_col-bordered">

```
            <tr>
```

                <td STYLE="width:50%;">Navigation TO VIEW recod page AND Edit mode page IN Salesforce</td>

```
                <td STYLE="width:50%;">
```

                    <lightning-button variant="brand" label="Navigation record view page" onclick={actionToNavigateRecordView}></lightning-button>

```
 
```

                    <lightning-button variant="brand" label="Navigation record Edit page" onclick={actionToNavigateEditView} STYLE="margin-left:20px;"></lightning-button>

```
                </td>
```
```
            </tr>   
```
```
 
```
```
 
```
```
        </table>
```
```
    </div>
```
```
 
```
```
</lightning-card>
```
```
 
```
```
</template>
```

Create navigationPageLwc.js →

Step 2:- Create JavaScript Page : function.js

navigationPageLwc.js [JavaScript Page]

  import { LightningElement, api } FROM 'lwc';

import {NavigationMixin} FROM 'lightning/navigation';

```
 
```

export DEFAULT class NavigationPageLwc extends NavigationMixin(LightningElement) {

```
 
```
```
 
```
```
   /// Navigate Record VIEW Mode
```
```
 
```
```
   actionToNavigateRecordView(){
```
```
 
```
```
      this[NavigationMixin.Navigate]({
```
```
         TYPE:'standard__recordPage',
```
```
         attributes:{
```
```
           recordId:this.recordId, 
```
```
           objectApiName:'Account',
```
```
           actionName:'view'
```
```
         }
```
```
      });
```
```
 
```
```
   }
```
```
 
```
```
 
```
```
 //Navigation TO Edit Mode
```
```
 
```
```
 actionToNavigateEditView(){
```
```
 
```
```
   this[NavigationMixin.Navigate]({
```
```
      TYPE:'standard__recordPage',
```
```
      attributes:{
```
```
        recordId:this.recordId, 
```
```
        objectApiName:'Account',
```
```
        actionName:'edit'
```
```
      }
```
```
   });
```
```
 
```
```
 }
```
```
 
```
```
 
```
```
}
```

Create Lightning Web Component Meta XML

Step 3:- Create Lightning Web Component : navigationPageLwc-meta.xml

SFDX:Lightning Web Component >> New >> navigationPageLwc-meta.xml

navigationPageLwc-meta.xml [LWC Meta Data XML]

     <?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

```
    <apiVersion>59.0</apiVersion>
```
```
    <isExposed>true</isExposed>
```
```
    <targets>
```

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

```
    </targets>
```
```
 
```
```
</LightningComponentBundle>
```

Further post that would you like to learn in Salesforce

FAQ (Frequently Asked Questions)

How do I edit records in LWC?

The simplest way to create a form that enables you to edit a record is to use lightning-record-form . To customize the form layout or preload custom values, use lightning-record-edit-form . If you need more flexibility than these components provide, see Build Custom UI to Create and Edit Records.

How do I navigate to another page in LWC?

Use the navigation service, lightning/navigation , to navigate to many different page types, like records, list views, and objects. In the component's JavaScript class, import the `NavigationMixin` function from the lightning/navigation module.

What is detail page and edit page in Salesforce?

Whenever user try to create a new record or edit an existing record user can input the values for the fields, this page is nothing but edit page. After creating a new record or editing an existing record, user can see the information of the record; this page is nothing but detail page.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net

How to Navigate Record Detail Page as View mode and Edit Mode in LWC – Lightning Web Component | How to use Navigation Service (NavigationMixin.Navigate) to Navigate Edit and View Mode Page in LWC