Developer
JavaScript LightningComponent LightningWebComponent LWC Salesforce

【Lightning Web Component】ページ遷移の実装方法

Developer
この記事は約5分で読めます。

こんにちは、アンダーソンです。
今回は、LWCでのページ遷移について解説していきたいと思います。
LWCではURLを直接指定するというよりも、
型を指定して、IDを指定して遷移させるというやり方になります。

公式のHELPにもある通り、

 Lightning コミュニティでは、各タイプに注釈があるように、PageReference オブジェクトのサポートは制限付きです。このオブジェクトは、Lightning Out ではサポートされません。

PageReference の型

なのでここは注意しましょう。
型は下記の通りです。

  • アプリケーション
  • Lightning コンポーネント
  • ナレッジ記事
  • ログインページ
  • 名前付きページ (コミュニティ)
  • 名前付きページ (標準)
  • ナビゲーション項目ページ
  • オブジェクトページ
  • レコードページ
  • レコードリレーションページ
  • Web ページ

基本的な使い方はよく似ているのでこのうちよく使うモノをピックアップしていきたいと思います。

スポンサーリンク

ナビゲーションサービスを使う

まずLWCでのページ遷移はナビゲーションサービス関数でクラスを宣言しておきます。

import { NavigationMixin } from 'lightning/navigation';

export default class TestLwc extends NavigationMixin(LightningElement) {}

これでOKです。
次にURLを指定せずに遷移させる方法とURLを生成するメソッドがあるのでみていきます。

URLの生成

URLの生成では『NavigationMixin.GenerateUrl』を使います。

this.accountHomePageRef = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Account',
                actionName: 'home'
            }
        };
        this[NavigationMixin.GenerateUrl](this.accountHomePageRef)
            .then(url => this.url = url);

これでurlに取引先のホームページのurlが代入されるので
window.openや、aタグのhref属性で指定することができます。

そのまま遷移させる

URLを生成せずに、型を指定してそのページに遷移させる場合は『NavigationMixin.Navigate』を使います。

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

型を変数に代入しておいて変数を指定する方法もOKです。
onclickで呼び出される関数にこれを用意しておけばページ遷移されるという仕組みですね。

型によって違う設定方法

では基本的な使い方は押さえたところで、型の違いをみていきましょう。
今回はよく使うであろう(？)3つを用意しました。

アプリケーション

アプリケーションページはアプリケーションを指定してそのページに遷移させることができます。
例えば標準で用意されているセールスとかサービス、マーケティングとかであれば、

このページからAPI参照名をみてそれを指定します。
標準で用意されているものは名前空間が『standard__』カスタムだと『c__』から始まる点に注意です。

下記実際のコードです。



change(){         
    this[NavigationMixin.Navigate]({
        type: 'standard__app',
        attributes: {
            appTarget: 'standard__LightningSales',
        }
    })
}

これで標準のセールスアプリケーションに遷移します。

オブジェクトページ

次はオブジェクトのページです。今回はTest1というオブジェクトのリストビューに飛ばしてみる動きを実装してみました。

リストビューに遷移させる際には基本の型はrecentで最近参照した〜になっているので必要に応じて『filterName』を指定します。filterNameはURLから確認できます。
では実際のコードです。

this[NavigationMixin.Navigate]({
    type: 'standard__objectPage',
    attributes: {
        objectApiName: 'Test1__c',
        actionName: 'list'
    },
    state: {
        filterName : '00B6F00000IyU6EUAV'
    }
})

standard__objectPageでオブジェクトページを指定し、objectApiNameで対象のオブジェクトを指定します。
actionNameはhome、list、newの3つ用意されているので場合に応じて使い分けましょう。

最後にfilterNameを指定(今回は明示的にlistにしてるので)してOKですね。

レコードページ

最後にレコードページです。
オブジェクトページに似ていますが、こちらでは遷移させるレコードのIdを指定します。
実際のコードです。

this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
    attributes: {
        recordId: 'a0B6F00001gPYuQUAW',
        objectApiName: 'Test1__c',
        actionName: 'view'
    }
})

actionNameはclone,edit,viewの3つがサポートされています。
関数を用意しておいてIdに変数を渡してあげたりすると汎用的に使えますね。

まとめ

いかがでしたか？結構簡単にページ遷移ができるので是非試してみてください。
関数を用意しておいてIdやオブジェクト名を指定して呼び出すみたいなことをすると
コードもスッキリするのでおすすめです。

その他の開発に関する記事はこちらです。

Developerも含めた試験問題にチャレンジしてみましょう。

スポンサーリンク