さまざまなページ種別への移動

1<!-- welcome.html -->
2<!-- lots and lots of code removed for brevity -->
3
4<div class="slds-m-vertical_large">
5  <c-navtab tab-name="lightning_components" label="Next"></c-navtab>
6</div>

1<!-- navTab.html -->
2<template>
3  <lightning-button variant="brand" label={label} title={label} onclick={navigateNext}>
4  </lightning-button>
5</template>

1// navTab.js
2import { LightningElement, api } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class Navtab extends NavigationMixin(LightningElement) {
6  @api tabName;
7  @api label;
8  navigateNext() {
9    this[NavigationMixin.Navigate]({
10      type: "standard__navItemPage",
11      attributes: {
12        apiName: this.tabName,
13      },
14    });
15  }
16}

1// navigationToPagesExample.js
2import { LightningElement, wire } from "lwc";
3import { NavigationMixin } from "lightning/navigation";
4
5export default class NavigationToPagesExample extends NavigationMixin(LightningElement) {
6  navigateToObjectHome() {
7    // Navigate to the Case object home page.
8    this[NavigationMixin.Navigate]({
9      type: "standard__objectPage",
10      attributes: {
11        objectApiName: "Case",
12        actionName: "home",
13      },
14    });
15  }
16
17  navigateToListView() {
18    // Navigate to the Contact object's Recent list view.
19    this[NavigationMixin.Navigate]({
20      type: "standard__objectPage",
21      attributes: {
22        objectApiName: "Contact",
23        actionName: "list",
24      },
25      state: {
26        // 'filterName' is a property on the page 'state'
27        // and identifies the target list view.
28        // It may also be an 18 character list view id.
29        filterName: "Recent", // or by 18 char '00BT0000002TONQMA4'
30      },
31    });
32  }
33
34  navigateToNewRecordPage() {
35    // Opens the new Account record modal
36    // to create an Account.
37    this[NavigationMixin.Navigate]({
38      type: "standard__objectPage",
39      attributes: {
40        objectApiName: "Account",
41        actionName: "new",
42      },
43    });
44  }
45
46  navigateToRecordViewPage() {
47    // View a custom object record.
48    this[NavigationMixin.Navigate]({
49      type: "standard__recordPage",
50      attributes: {
51        recordId: "a03B0000002tEurIAE",
52        objectApiName: "namespace__ObjectName", // objectApiName is optional
53        actionName: "view",
54      },
55    });
56  }
57
58  navigateToRecordEditPage() {
59    // Opens the Account record modal
60    // to view a particular record.
61    this[NavigationMixin.Navigate]({
62      type: "standard__recordPage",
63      attributes: {
64        recordId: "001B000000ZBz22IAD",
65        objectApiName: "Account", // objectApiName is optional
66        actionName: "edit",
67      },
68    });
69  }
70
71  navigateToRelatedList() {
72    // Navigate to the CaseComments related list page
73    // for a specific Case record.
74    this[NavigationMixin.Navigate]({
75      type: "standard__recordRelationshipPage",
76      attributes: {
77        recordId: "500xx000000Ykt4AAC",
78        objectApiName: "Case",
79        relationshipApiName: "CaseComments",
80        actionName: "view",
81      },
82    });
83  }
84
85  navigateToTabPage() {
86    // Navigate to a specific CustomTab.
87    this[NavigationMixin.Navigate]({
88      type: "standard__navItemPage",
89      attributes: {
90        // CustomTabs from managed packages are identified by their
91        // namespace prefix followed by two underscores followed by the
92        // developer name. E.g. 'namespace__TabName'
93        apiName: "CustomTabName",
94      },
95    });
96  }
97
98  navigateToWebPage() {
99    // Navigate to a URL
100    this[NavigationMixin.Navigate](
101      {
102        type: "standard__webPage",
103        attributes: {
104          url: "http://salesforce.com",
105        },
106      },
107      true, // Replaces the current page in your browser history with the URL
108    );
109  }
110}