How To Use Navigation And Toast Messages in LWC Inside Visualforce Page?

How To Use Navigation And Toast Messages in LWC Inside Visualforce Page?

The navigation and toast messages in the lightning web component of the Visualforce page are not working as a result of a lightning out library. If you have ever come across such an issue, in this blog you will be able to find out what the underlying causes are and get an idea of how the Visualforce page’s lightning web component’s navigation and toast messages can be used in the right approach.

Let us start the process!


Create a lightning web component in Visual Studio and specify the name of the component as: lwcInsideVfPage.html


Here I created two lightning buttons, which are navigateToAccount and displayToastMessage. When we click on the navigateToAccount button, it will navigate to the Account Object and when we click on the displayToastMessage button, it will display the Toast message.



<lightning-button variant=”brand” label=”navigate ToAccount”




<lightning-button variant=”brand” label=”displayToastMessage”






Here I am using the @api decorator to access the property from the visualforce page to LWC.

import { LightningElement , api} from “lwc’;

export default class LwcInsideVfpage extends LightningElement {

@api navigateToList;

@api toast;


// here ‘/001’ is the key prefix of Account Object







<?xml version=”1.0″ encoding=”UTF-8″?>

<Lightning ComponentBundle







‘ <target>lightning_HomePage</target>



Step 2:

In step 2 create a new lightning application in aura with the name: lightningApplication.App.

Here in the aura dependency resource, you have to specify the name of the lightning web component.

<aura: application extends=”ltng:outApp” access=”Global” >

<aura: dependency resource=”c:lwcInsideVfPage”/>



In step 3 create a visualforce Page .In visualForce page I declare standardController =”Account” so ,you have created a list view button in Account object only. If given another object name, it creates a list view button in that object only.


<apex: page showHeader=”false” sidebar=”false” standardController=”Account”


<apex: includelightning />

<div id=”lightning” />


$Lightning.use(“c:lightningApplication”, function() {


“navigateToList” : navigateToList,

“toast” :showToast


function(cmp) {

console.log(‘Component Loaded’);



function navigateToList(url) {

if(typeof sforce != ‘undefined’ && sforce && { (url);

} else


window.location.href = url;


function showToast() {{

“message”: “lwc Toast Message Inside Vf Page Successfully”,

“type”: “error”



</apex: page>


➤ First, create a list view button on the account object to see the output.

➤ Go to Object Manager and search for the account object.

➤ Click on buttons, links, and actions. Then you will see the New Button or Link at the top right.

➤ Click it.

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

how can salesforce experience cloud drive customer engagement rates
How Can Salesforce Experience Cloud Drive Customer Engagement Rates?
salesforce world tour essentials mumbai
Salesforce World Tour Essentials Mumbai (19 June, 2024)
benefits of using salesforce for higher education Industry
Benefits Of Using Salesforce For Higher Education Industry?
salesforce for real estate
Salesforce for Real Estate: How Salesforce CRM Can Help Realtors
salesforce consumer goods cloud store setup
A Detailed Look into Salesforce Consumer Goods Cloud Store Setup
Scroll to Top