How to navigate in Lightning Out with Visualforce?

Question

I am using Lightning Components within a Visualforce page to override a standard button, which is currently the only way to do so. The problem is that I need to redirect the user to a new record page after a specific action. However, the typical navigation methods such as $A.get("e.force:navigateToURL") and $A.get("e.force:createRecord") are not working. The documentation states that these events are handled by the one.app container and are supported only in Lightning Experience and Salesforce1. The issue arises because, even though I’m in Lightning Experience, using a Visualforce page causes the environment to be considered “outside” of Lightning.

Is there a method to redirect users to a new record page in this scenario, even when using Lightning Components in a Visualforce page?

Answer

The issue occurs because the $A.get("e.force:navigateToURL") and $A.get("e.force:createRecord") events are designed to work only in the Lightning Experience container or Salesforce1, and Visualforce pages are not part of this container. To address this, there are a few steps you can take to ensure that navigation works properly even when using Lightning components in Visualforce pages.

Boost your Salesforce career with CRS Info Solutions expert-led Salesforce online training, hands-on projects, and free demo sessions for beginners and professionals!!!

Solution 1: Loading Dependencies for Navigation Events in Lightning Out

To enable the navigation events to fire properly from within a Lightning component on a Visualforce page, first ensure that the necessary dependencies are loaded in your Lightning component application. This includes loading the force namespace events.

Here is an example of how to set up the necessary dependency in your Lightning component application:

<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"/>
</aura:application>

Explanation: The above code defines a Lightning application that extends ltng:outApp, enabling it to be used within Lightning Out. It adds a dependency to include the myLightningComponent, ensuring that the component is available in the app. Additionally, it loads all events from the force namespace (such as navigation events) using the <aura:dependency> tag to ensure these events can be triggered within the component.

Solution 2: Handling Navigation Events in Visualforce

After setting up the dependencies, the next step is to handle the navigation events in the Visualforce page itself. You can use the sforce.one methods or window.location to perform the navigation based on the environment.

Here’s an example of handling the force:navigateToObjectHome event and performing the navigation:

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

    $Lightning.createComponent('c:myLightningComponent', attributes, 'myLightningComponent',
        function(cmp) {
            $A.eventService.addHandler({
                event: 'force:navigateToObjectHome',
                handler: function(event) {
                    if (sforce && sforce.one) {
                        // Handle navigation in Salesforce1 or Lightning Experience
                        sforce.one.navigateToObjectHome(event.$params$.scope);
                    } else {
                        // Handle navigation in Salesforce Classic
                        if (event.$params$.scope === 'Contact') {
                            window.location = '{!URLFOR($Action.Contact.Tab, $ObjectType.Contact)}';
                        }
                    }
                }
            });
    });
});

Explanation: The above code dynamically loads a Lightning component (myLightningComponent) in a Visualforce page using $Lightning.createComponent. It then listens for the force:navigateToObjectHome event and checks whether the page is in Salesforce1/Lightning Experience or Classic. Depending on the environment, it either uses sforce.one.navigateToObjectHome for navigation or manually redirects to a specific URL for Classic.

This solution works by checking if the page is running inside Salesforce1 or Lightning Experience (using sforce.one), and if so, it performs the navigation via sforce.one.navigateToObjectHome. If the page is running in Salesforce Classic, the appropriate URL is set manually using window.location.

Summing Up

Navigating in Lightning Out requires a workaround since standard navigation events like $A.get("e.force:navigateToURL") do not work in Visualforce pages. The key solution is to load the necessary force namespace dependencies in your Lightning application and handle navigation explicitly in the Visualforce page. By using $Lightning.use() to create the component and adding event handlers, you can redirect users dynamically based on the environment—leveraging sforce.one in Lightning Experience or Salesforce1, and falling back to window.location in Salesforce Classic. This approach ensures seamless navigation without modifying the Lightning component itself, making it a flexible and reusable solution.

Kickstart Your Salesforce Career with Expert Training in Delhi

Elevate your career with top-notch Salesforce training in Delhi at CRS Info Solutions. Our comprehensive courses are designed to help you succeed in the rapidly expanding Salesforce ecosystem, providing hands-on training with real-world project experience. Whether you’re aiming to become a skilled Salesforce Admin, Developer, or dive into the latest AI-driven modules, we’ve got you covered under the guidance of industry professionals.

Our Salesforce training programs cater to both beginners and experienced professionals seeking to enhance their expertise. We offer personalized learning, detailed course materials, and thorough support for certification preparation and job interviews, ensuring you’re fully equipped for success in the Salesforce industry.

Start your journey with a free demo session today and take the first step toward a fulfilling Salesforce career!!!

Related Posts:

Difference Between Salesforce Visualforce Vs. Salesforce Lightning
Salesforce Lightning Edition Features.