tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning ComponentからVisualforce Pagesに遷移する方法

Lightning ComponentからVisualforce Pagesに遷移する方法についてです。今回のはWinter'16でGAになったLigtning Experienceに関連する話になります。


Lightning ExperienceのURLは『/one/one.app』という感じになりました。そのため今までの『/apex/VFPages』という指定では遷移できません。

(/one/one.app#/apex/thePageNameもダメでした。)
f:id:tyoshikawa1106:20151028180834p:plain


Lightning ComponentからVisualforceページに遷移するには『e.force:navigateToURL』と『setParams』を使用します。

$A.get("e.force:navigateToURL").setParams({
    "url": "/apex/" + pageName
}).fire();

f:id:tyoshikawa1106:20151028181050p:plain


これで次のようにページ遷移を行うことができました。

Lightning Component

f:id:tyoshikawa1106:20151028181153p:plain

遷移後のVisualforce Pages

f:id:tyoshikawa1106:20151028181312p:plain


Visualforceは表示できましたが、1つ落とし穴があります。Lightning Experienceの場合、location.hrefをつかった『/id』のようにリンク指定は無効となります。そのため、『sforce.one.navigateToSObject』を使用する必要がでてきます。


このとき、ページ遷移処理を単純にnavigateToSObjectに差し替えてしまうと、Classic環境の方で動作しなくなってしまいます。どちらで開いているか判定を行い切り替えるようにした方がいいみたいです。


Lightning Experienceかの判定はSalesforce1判定と同じ方法で対応できそうでした。
f:id:tyoshikawa1106:20151028182119p:plain


Lightning Experience対応していないと思われるスキルレコードの場合でもこんな感じに遷移できました。
f:id:tyoshikawa1106:20151028182417p:plain

Lightning Experienceと標準ヘッダー

VisualforceにはshowHeader="true"で標準ヘッダーを表示する仕組みがあります。
f:id:tyoshikawa1106:20151028182754p:plain


このshowHeader="true"を宣言しているVisualforceページでもExperienceで表示したときはshowHeader="false"と同じような感じで表示されます。
f:id:tyoshikawa1106:20151028182919p:plain


以上がLightning ComponentからVFページに遷移する方法についてです。ExperienceでVFページを使用する場合、いくつか注意点がありましたがそこを修正すれば問題なく利用できそうです。