NavigationMixin は、「javascript」ファイルの lightning/navigation からインポートする必要があります。 Navigate は、このモジュールで使用できるメソッドです。タイプと属性を受け取ります。 type はナビゲートしているページのタイプを指定し、属性は pageName を受け取ります。
- 設定から「Lightning App Builder」を検索し、「新規」をクリックします。
- 「アプリページ」を選択し、「次へ」をクリックします。
- ラベルに「Navigation Services」を付けます。
- 1 つのリージョンを選択し、「完了」をクリックします。
アプリを使用する準備ができました。 「アプリランチャー」で検索してください。
このガイドで説明するすべてのナビゲーション サービスの例では、同じ「meta-xml」ファイルを使用します。ここで作成したアプリ ページにコンポーネントを配置できます。サンプル コード スニペットでは、このファイル (meta-xml) を再度指定しません。
「1.0」 ?>
<ターゲット>
ホームページへの移動
Salesforce の標準ホームページに移動する場合は、次の例を参照してください。
ナビゲーション.html
ボタンを作成します。この「homeNavigation」のクリックは「js」ファイルで処理されます。
<テンプレート><稲妻カード タイトル = 「ホームナビゲーション」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
< b > ホームページにリダイレクトされます < / b >< br >< / ディビジョン >
<稲妻ボタン ラベル = 'ホームページへ' クリック時 = { ホームナビゲーション } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
ナビゲーション.js
タイプは「standard__namedPage」、pageName は「home」である必要があります。これは、homeNavigation() ハンドラー メソッド内で指定されます。
輸入 { 稲妻要素 } から '運' ;
輸入 { ナビゲーションミックスイン } から 「ライトニング/ナビゲーション」
輸出 デフォルト クラス ナビゲーション 伸びる ナビゲーションミックスイン ( 稲妻要素 ） {
// ハンドラーメソッド
// pageName がホームである必要があります
// ページのタイプはホームの standard__namedPage です
ホームナビゲーション ( ） {
これ [ ナビゲーションミックスイン。 ナビゲート ] ( {
タイプ : 'standard__namedPage' 、
属性 : {
ページ名 : '家'
}
} ）
}
}
出力：
このコンポーネントをアプリ ページに追加し、「ホームページに移動」ボタンをクリックします。
これで、ホームページが表示されました。
Chatterへの移動
Salesforce Chatter を使用して、ファイル、テキスト メッセージ、ログの詳細を共有できます。ナビゲーション サービスを使用して、Chatter に直接移動できる場合があります。
ナビゲーション.html
ボタンを作成します。この「chatterNavigation」のクリックは「js」ファイルで処理されます。
<テンプレート><稲妻カード タイトル = 「おしゃべりナビゲーション」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
< b > Chatter にリダイレクトされます < / b >< br >< / ディビジョン >
<稲妻ボタン ラベル = 「チャットに行く」 クリック時 = { おしゃべりナビゲーション } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
ナビゲーション.js
タイプは「standard__namedPage」、pageName は「chatter」である必要があります。これは、chatterNavigation() ハンドラー メソッド内で指定されます。次のスニペットを「js」クラス内に貼り付けます。
// ハンドラーメソッド// pageName は chatter である必要があります
// チャットのページのタイプは standard__namedPage です
おしゃべりナビゲーション ( ） {
これ [ ナビゲーションミックスイン。 ナビゲート ] ( {
タイプ : 'standard__namedPage' 、
属性 : {
ページ名 : 「おしゃべり」
}
} ）
}
出力：
ページを更新。これで、Chatter に移動して更新を投稿し、ファイルを共有できるようになりました。
新しいレコードへの移動
新しいレコードを作成するために特定のオブジェクト タブに移動しなくても、ナビゲーション サービスを使用して特定のオブジェクトの新しいレコードを直接作成できます。このシナリオでは、objectApiName と actionName を属性として指定する必要があります。
- objectApiName は、「Account」、「Contact」、「Case」などの Salesforce オブジェクト API 名です。
- 新しい記録を作成します。したがって、actionName は「new」である必要があります。
ナビゲーション.html
ケースレコードを作成しましょう。ボタンを作成します。この「newRecordNavigation」のクリックは「js」ファイルで処理されます。
<テンプレート><稲妻カード タイトル = 「新譜ナビ」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
< b > ここからケースを作成できます... < / b >< br >< / ディビジョン >
<稲妻ボタン ラベル = 「ケースを作成する」 クリック時 = { 新しいレコードナビゲーション } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
ナビゲーション.js
タイプは「standard__objectPage」である必要があります。これは newRecordNavigation() ハンドラー メソッド内で指定されます。次のスニペットを「js」クラス内に貼り付けます。
// ハンドラーメソッド// Case は objectApiName で、actionName は New です。
// ページのタイプは standard__objectPage です
新しいレコードナビゲーション ( ) {
これ [ ナビゲーションミックスイン。 ナビゲート 】 ( {
タイプ : 'standard__objectPage' 、
属性 : {
オブジェクトApi名 : '場合' 、
アクション名 : '新しい'
}
} )
}
出力：
ページを更新。これで、ケースに関連するレコードを作成できるようになりました。
保存すると、その記録ページに移動します。
レコードページへの移動
前のナビゲーション (例 3) と同様に、特定のレコードに移動して、詳細を表示または編集できます。属性で渡す必要があるもう 1 つのプロパティは、「recordId」(既存のレコードの ID) です。このシナリオでは、actionName は「view」である必要があります。
ナビゲーション.html
ケースレコードに移動しましょう。ボタンを作成します。この「viewRecordNavigation」のクリックは「js」ファイルで処理されます。
<テンプレート><稲妻カード タイトル = 「記録ナビゲーションの表示」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
< b > 症例記録はここからご覧いただけます... < / b >< br >< / ディビジョン >
<稲妻ボタン ラベル = 「ビューケース」 クリック時 = { ビューレコードナビゲーション } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
ナビゲーション.js
タイプは「standard__recordPage」である必要があります。これは、viewRecordNavigation() ハンドラー メソッド内で指定されます。次のスニペットを「js」クラス内に貼り付けます。
// ハンドラーメソッド// Case は objectApiName で、actionName は view です。
// ページのタイプは standard__recordPage です
ビューレコードナビゲーション ( ) {
これ [ ナビゲーションミックスイン。 ナビゲート 】 ( {
タイプ : 'standard__recordPage' 、
属性 : {
レコードID : 「5002t00000PRrXkAAL」 、
オブジェクトApi名 : '場合' 、
アクション名 : 'ビュー'
}
} )
}
出力：
ナビゲーション後にケースの詳細を確認できます。ここで、ケースの詳細を表示および編集できます。
その他のナビゲーション
リストビューとファイルに移動しましょう。リスト ビューの場合は、オブジェクト名とフィルター名が必要です。これは URL にあります。これについては例で詳しく説明します。
ファイルは ContentDocument オブジェクトに保存されます。したがって、ファイルの場合、objectApiName は「ContentDocument」、actionName は「home」になります。
リストビュー：
ファイル:
ナビゲーション.html
<テンプレート><稲妻カード タイトル = 「ナビゲーション」 >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
< b > リストビューに移動できます < / b >< br >< / ディビジョン >
<稲妻ボタン ラベル = 「リストビューに移動」 クリック時 = { viewListNavigation } >< / ライトニングボタン> < br >< br >
< ディビジョン クラス = 「slds-var-m-around_medium」 スタイル = 「高さ:20px; 幅:400px」 >
< b > ファイルに移動できます < / b >< br >< / ディビジョン >
<稲妻ボタン ラベル = 「ファイルに移動」 クリック時 = { ビューファイルナビゲーション } >< / ライトニングボタン>
< / ライトニングカード>
< / テンプレート>
ナビゲーション.js
// リストビューハンドラviewListNavigation ( ) {
これ [ ナビゲーションミックスイン。 ナビゲート 】 ( {
タイプ : 'standard__objectPage' 、
属性 : {
オブジェクトApi名 : '場合' 、
アクション名 : 'リスト' 、
州 : {
フィルター名 : 「00B2t000002oWELEA2」
}
}
} )
}
// ファイルビューハンドラー
ビューファイルナビゲーション ( ) {
これ [ ナビゲーションミックスイン。 ナビゲート 】 ( {
タイプ : 'standard__objectPage' 、
属性 : {
オブジェクトApi名 : 'コンテンツドキュメント' 、
アクション名 : '家'
}
} )
}
出力：
ケースリストビューに移動します。指定した filterName は「All Closed Cases」です。
「ファイルに移動」ボタンをクリックすると、このアプリ ページからファイルを表示できます。
結論
Salesforce LWC は、特定のページに留まったままナビゲートできる直接ナビゲーションを提供します。このガイドでは、Lightning Web コンポーネントナビゲーションサービスを使用したさまざまなナビゲーションについて学習しました。他にも多くのナビゲーションが存在しますが、すべての LWC 開発者が知っておく必要がある重要なナビゲーションについて説明しました。すべてのナビゲーションで、NavigationMixin をライトニング/ナビゲーションからインポートする必要があります。