When working with Lightning Components embedded inside a Visualforce page, a common challenge arises when you want to perform navigation actions such as redirecting to a record page or opening a new record form. Normally, Lightning provides navigation events like $A.get("e.force:navigateToURL") and $A.get("e.force:createRecord"). However, these events only work when the component is hosted inside the one.app container, meaning they function in Salesforce Lightning Experience and Salesforce Mobile App, but not when the component is running inside a Visualforce page. The Visualforce host does not automatically recognize the force:* navigation events, and so nothing happens when these events are fired.
To make navigation work in such cases, you need a two-step approach. The first step is ensuring the Lightning component can fire the navigation events properly. The second step is handling these events explicitly in the Visualforce host page and performing the required redirection.
For example, if you try to fire a navigation event directly from your component like this:
var event = $A.get('e.force:navigateToObjectHome');
event.setParams({
scope: 'Contact'
});
event.fire();
This code tries to get the force:navigateToObjectHome event using $A.get. The setParams function assigns the target object, here “Contact”. The fire() method executes the event to navigate to the Contact object’s home page. However, in a Visualforce environment this fails because the force namespace library is not loaded by default. Therefore, without extra configuration, this will throw an error when executed from a VF page.
In a Visualforce page, this results in an error because the force namespace library is not loaded. To fix this, you need to explicitly declare a dependency on the force:* events inside your Lightning dependency application. This is done by extending ltng:outApp and adding an event dependency as shown below:
<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>
This code defines a Lightning dependency application that extends ltng:outApp, which is necessary for embedding components into Visualforce using Lightning Out. The aura:dependency tag includes the custom component so that it can be loaded. The second dependency explicitly loads all navigation events from the force namespace. This ensures that navigation events like navigateToObjectHome are available and won’t throw errors when fired. It essentially makes the Visualforce page aware of Lightning navigation events.
This ensures that navigation events such as force:navigateToObjectHome or force:createRecord are recognized by your Lightning components even when hosted in a Visualforce page. At this stage, the events will fire successfully, but nothing will happen because Visualforce does not automatically handle them.
The second step is to define event handlers in the Visualforce page. These handlers explicitly capture the fired events and then use either the sforce.one navigation methods (when inside Lightning Experience or Salesforce1) or a traditional window.location redirect (when inside Salesforce Classic). For example, you can handle the force:navigateToObjectHome event like this:
$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) {
// VF page in Salesforce1 or Lightning Experience
sforce.one.navigateToObjectHome(event.$params$.scope);
} else {
// VF page in Classic
// Handle object-specific redirects
if (event.$params$.scope === 'Contact') {
window.location = '{!URLFOR($Action.Contact.Tab, $ObjectType.Contact)}';
}
}
}
});
});
});
This code starts with $Lightning.use, which loads the dependency app that includes your component. Then createComponent inserts the Lightning component into the Visualforce page inside the myLightningComponent div. Inside the callback, $A.eventService.addHandler is used to listen for force:navigateToObjectHome. When the event is fired, the handler checks if sforce.one is available (meaning Lightning Experience or Salesforce1). If available, it uses sforce.one.navigateToObjectHome to navigate properly. Otherwise, it falls back to window.location to manually redirect in Classic using the appropriate URL.
This approach ensures that your Lightning component code remains clean and environment-agnostic. The components still fire navigation events without worrying whether they are running in Lightning Experience, Salesforce Mobile App, or Visualforce. The logic for how those events are handled resides in the Visualforce host, which interprets the events and redirects accordingly.
The main benefit of this method is that it avoids putting conditional checks like isLightning, isSalesforce1, or isVF directly inside your Lightning components. Instead, components simply raise navigation events, and the hosting context decides how to handle them. This keeps your components reusable across multiple contexts.
While this works well in Lightning Experience and Visualforce, you may need additional adjustments for Salesforce1 Mobile depending on your organization’s needs, but the concept remains the same: fire navigation events from Lightning components, and then handle them properly in the Visualforce host page to perform the redirection.
Job-Oriented Salesforce Course with Real-Time Projects and Money Back Guarantee
Our Salesforce Course is designed to provide you with a deep understanding of the Salesforce platform, equipping you with the essential skills to succeed in the CRM field. The program covers important modules such as Salesforce Admin, Developer, and AI, blending theory with hands-on practice. You’ll gain practical experience through real-world projects and assignments, enabling you to solve complex business challenges using Salesforce solutions. Our expert instructors ensure that you gain both technical proficiency and relevant industry knowledge to thrive within the Salesforce ecosystem.
Beyond technical skills, our Salesforce training in Bangalore offers personalized mentorship, exam preparation, and interview coaching to enhance your career prospects. You’ll have access to comprehensive study materials, live project experience, and dedicated support throughout your learning journey. Upon completing the course, you’ll be fully prepared for certification exams and equipped with the problem-solving skills that employers seek. Start your Salesforce journey with us and unlock a world of career opportunities. Enroll for a Free Demo now!
Leave a Reply
You must be logged in to post a comment.