ページ参照を使用した Lightning Experience および Salesforce モバイルアプリケーションでのナビゲーション

これらのナビゲーションリソースは、Lightning Experience と Salesforce モバイルアプリケーションでのみサポートされています。Visualforce 用 Lightning コンポーネント、Lightning Out、コミュニティなど、他のコンテナではサポートされていません。Lightning Experience や Salesforce モバイルアプリケーション内でこれらのコンテナにアクセスした場合も同じです。

次のリソースを使用して、アプリケーションのナビゲーションを簡易化します。例は「コンポーネントライブラリ」を参照してください。

lightning:navigation

ページまたはコンポーネントに移動するには、lightning:navigation で navigate() メソッドを使用します。これは navigateTo* イベントの代替となる方法で、両方ともサポートされています。

コンポーネントで URL を生成するには、lightning:navigation で generateUrl() メソッドを使用して URL を解決します。

generateUrl() は Promise を返します。Promise は生成された URL でコールバックします。

メモ

lightning:isUrlAddressable

URL を介して直接コンポーネントに移動できるようにするには、コンポーネントに lightning:isUrlAddressable インターフェースを追加します。

コンポーネントへの直接移動では、pageReference および lightning:isUrlAddressable を force:navigateToComponent イベントの代わりに使用します。force:navigateToComponent イベント情報の対応付けとは異なり、ナビゲーションディスパッチシステムを使用して pageReference 属性のみが入力されます。情報は、参照先ページ参照の state プロパティを使用してアドレス指定されたコンポーネントに渡されます。lightning:isUrlAddressable は、参照先コンポーネントの属性を自動的に設定しません。v.pageReference.state からパラメータを取得し、参照先コンポーネントの init ハンドラを使用して手動で設定します。

ヒント

pageReference は、ページ種別および対応する属性を記述する、明確に定義された構造を提供します。pageReference では次のプロパティがサポートされています。

1var pageReference = {
2    type: 'standard__objectPage',
3    attributes: {
4        objectApiName: 'Account',
5        actionName: 'list'
6    },
7    state: {
8        filterName: 'MyAccounts'
9    } 
10};

pageReference.state のキー - 値ペアは URL クエリパラメータに逐次化されるため、そのすべての値は文字列です。state の値を使用するコードは、値を正しい形式で適切に解析する必要があります。state 配列の値を削除するには、その値を未定義として定義します。

pageReference オブジェクトを直接変更することはできません。state を更新するには、新しい pageReference オブジェクトを作成し、Object.assign() を使用して値をコピーします。

state パラメータは名前空間が設定されている必要があります。たとえば、名前空間が abc でパラメータが accountId の管理パッケージは、abc__accountId として表されます。カスタムコンポーネントの名前空間は c__ です。名前空間のないパラメータは、Salesforce が使用するために予約されています。この名前空間の制限は、Winter '18 の CRUC で導入され、Spring '19 に適用されています。

force:navigateToComponent から lightning:isUrlAddressable への移行

現在 force:navigateToComponent イベントを使用している場合、lightning:isUrlAddressable を使用するコンポーネントに要求をリダイレクトして、ブックマークされたリンクの後方互換性を提供できます。

まずは元のコンポーネントを、その定義、コントローラ、ヘルパー、レンダラ、CSS を含めてコピーします。新しいコンポーネント実装を lightning:isUrlAddressable インターフェースにします。

cmp.get("v.pageReference").state からのナビゲーション要求で渡された値を読み取るように新しいコンポーネントを変更します。

1// Add a handler to your component 
2<aura:handler name="init" value="{!this}" action="{!c.init}" />
3
4// Controller example
5({
6    init: function(cmp, event, helper) {
7        var pageReference = cmp.get("v.pageReference");
8        cmp.set("v.myAttr", pageReference.state.c__myAttr);
9        // myAttr can be modified, but isn’t reflected in the URL 
10    }
11})

新しいコンポーネントで、コンポーネントの init ハンドラでページの state の値をコピーするのに使用されていない URL から対応付けられた属性を削除します。

古いコンポーネントに移動するインスタンスを新しい API と新しいコンポーネントのアドレスに変更します。たとえば、$A.get("e.force:navigateToComponent").setParams({componentDef: "c:oldCmp", attributes: {"myAttr": "foo"}}).fire(); などの force:navigateToComponent のインスタンスを削除します。

1cmp.find("navigationService").navigate({
2    type: "standard__component",
3    attributes: {
4        name: "c:myCmpCopy" },
5    state: { "c__myAttr": "foo" }});

1({
2    init: function(cmp, event, helper) {
3        cmp.find("navigation").navigate({
4            type: "standard__component",
5            attributes: {
6                componentName: "c__componentB" },
7            state: {
8                c__myAttr: cmp.get("v.myAttr")
9            } 
10        }, true); // replace = true 
11    }
12})