EP-24 | Navigations in Lightning Web Components | LWC Stack ☁️⚡️

Kapil June 23, 2021

   LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together !

Please check complete code below from LWC Stack EP-24


HTML 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <lightning-card title="Navigations" icon-name="utility:user">
    <div class="slds-var-m-around_medium">
      <lightning-button
        label="Navigate to Home"
        class="slds-var-m-around_medium"
        onclick={navigateToHome}
      ></lightning-button>
      <br /><br />
      <lightning-button
        label="Navigate to New Contact"
        class="slds-var-m-around_medium"
        onclick={navigateToNewContact}
      ></lightning-button>
      <br /><br />
      <lightning-button
        label="Navigate to New Contact with Default"
        class="slds-var-m-around_medium"
        onclick={navigateToNewContactWithDefault}
      ></lightning-button>
      <br /><br />
      <lightning-button
        label="Navigate to Contact ListView"
        class="slds-var-m-around_medium"
        onclick={navigateToContactListView}
      ></lightning-button>
      <br /><br />
      <lightning-button
        label="Navigate to Tab"
        class="slds-var-m-around_medium"
        onclick={navigateToTab}
      ></lightning-button>
    </div>
  </lightning-card>
</template>
JS 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { LightningElement } from "lwc";
import { NavigationMixin } from "lightning/navigation";
import { encodeDefaultFieldValues } from "lightning/pageReferenceUtils";

export default class Navigations extends NavigationMixin(LightningElement) {
  navigateToHome() {
    this[NavigationMixin.Navigate]({
      type: "standard__namedPage",
      attributes: {
        pageName: "home"
      }
    });
  }
  navigateToNewContact() {
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Contact",
        actionName: "new"
      }
    });
  }
  navigateToNewContactWithDefault() {
    const defaultValues = encodeDefaultFieldValues({
      FirstName: "Salesforce",
      LastName: "Bolt"
    });

    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Contact",
        actionName: "new"
      },
      state: {
        defaultFieldValues: defaultValues
      }
    });
  }
  navigateToContactListView() {
    this[NavigationMixin.Navigate]({
      type: "standard__objectPage",
      attributes: {
        objectApiName: "Contact",
        actionName: "list"
      },
      state: {
        filterName: "Recent"
      }
    });
  }
  navigateToTab() {
    this[NavigationMixin.Navigate]({
      type: "standard__navItemPage",
      attributes: {
        apiName: "LWCStack"
      }
    });
  }
}


Output


Checkout complete video tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks

Happy Coding :)
Tags:

Post a Comment

0 Comments