How to navigate in lightning out?

Actually I am using lightning components with a visualforce page, because this is the only way to override standard button (using VF) today. The problem is that, i need to redirect my user to the new record page on a certain action, but :




Is not working. Because as stated in the doc :

“This event is handled by the container. It’s supported in Lightning Experience and Salesforce1 only.”

But the worst part is that even if I am in lightning experience, but the fact that i’m using a VF, it is considering me out of lightning.

But for such cases, what salesforce has to provide for navigation ? Is there no method I can use for this redirection ?


I ran into the same issue. I have Lightning Components I want to use in VF pages AND in Lightning apps running in the Lightning Experience. I also didn’t want to update the components to check to see which environment they were running in (no isSalesforce1, isVF, isLightning checks in any components). Ideally, the components raise the navigation events, and they work regardless of whether the host is the container or a VF page.

After some digging, I got this working. The first step is to get the navigation events firing properly in the components. The code below assigns null to the event variable when running in a VF page because the force namespace library hasn’t been loaded. The result is an error in the browser.

var event = $A.get('e.force:navigateToObjectHome');

    scope: 'Contact'

Fortunately, the fix is straightforward. Add the dependency to your Lightning dependency app.

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:myLightningComponent"/>
    <!-- Load the navigation events in the force namespace. -->
    <aura:dependency resource="markup://force:*" type="EVENT"/>

With this change, the navigation events will fire properly in your components; however there’s still a problem. Nothing happens. This brings us to the second step which is to add handlers for these events in the VF host page. These handlers will explicitly perform navigation by either calling the appropriate method or setting window.location. You can set up the handlers in the VF page after the component is created. For example, you can handle the force:navigateToObjectHome event with the following code:

$Lightning.use("c:myLightningComponentDep", function() {
    var attributes = {}; // Set component attributes here

    $Lightning.createComponent('c:myLightningComponent', attributes, 'myLightningComponent',
        function(cmp) {
                event: 'force:navigateToObjectHome',
                handler: function(event) {
                    if (sforce && {
                        // VF page in S1 or Lightning Exp
                    } else {
                        // VF page in Classic
                        // Ugg! We need an if branch for each possible object type.
                        // Is there a better way of doing this?
                        if (event.$params$.scope === 'Contact') {
                            window.location = '{!URLFOR($Action.Contact.Tab, $ObjectType.Contact)}';

This approach has worked well for me, and it has the added benefit of requiring no changes to the Lightning components. I haven’t gotten this working in Salesforce1 yet as my organization doesn’t use Salesforce1, although I assume the approach is similar.

Source : Link , Question Author : vanessen , Answer Author : Joe B

Leave a Comment