Navigating to a Visualforce Page from a Lightning Web Component in a Salesforce Community

A few days ago, I received a requirement that seemed straightforward at first: I needed to navigate to a Visualforce page from within a Salesforce Lightning Web Component (LWC). As a developer, this kind of task isn’t entirely new, but each project brings its own set of challenges and nuances.

Initial Attempts and Roadblocks

My first attempts were guided by what seemed like a logical approach. I had an LWC with a button, and my initial thought was to simply redirect to the Visualforce page on button click. Here’s a snippet of what I initially tried:

<lightning-button label="Go to VF Page" onclick={navigateToVFPage}></lightning-button>

And in my JavaScript controller:

navigateToVFPage() {
    window.location.href = '/apex/MyVisualforcePage';
}

However, this approach didn’t work as expected. The page either didn’t load properly, or I was redirected to the Salesforce login page instead of the desired Visualforce page within the community.

Digging Deeper: Research and Realizations

Realizing that my approach was flawed, I delved deeper into Salesforce documentation, community forums, and various blogs. After extensive research, I discovered that handling navigation between LWCs and Visualforce pages, especially within a Salesforce community, required a more nuanced approach. The key was to use the correct URL structure and ensure that the navigation remained within the community context.

The Breakthrough: Correct URL Structure

The breakthrough came when I understood that I needed to construct the URL in a way that included the community domain and the Visualforce page. Here’s the correct approach that worked:

First, I identified the correct community URL and Visualforce page name. My community link was something like https://mycompany--dev.my.site.com/community.

I then updated my LWC’s JavaScript to build the complete URL dynamically:

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    navigateToVFPage() {
        const communityBaseURL = 'https://mycompany--dev.my.site.com/community';
        const vfPageName = 'apex/MyVisualforcePage';
        const vfPageURL = `${communityBaseURL}/${vfPageName}`;

        window.open(vfPageURL, '_self');
    }
}

And my HTML remained the same:

<lightning-button label="Go to VF Page" onclick={navigateToVFPage}></lightning-button>

Giving Permission and Enabling Visualforce Pages for Profiles

An important step that I initially overlooked was ensuring that the Visualforce page had the necessary permissions. Here’s how you can enable a Visualforce page for specific profiles:

1. Go to Setup in Salesforce.

2. Enter “Profiles” in the Quick Find box and select Profiles.

3. Select the Profile you want to give access to.

4. In the profile settings, navigate to the “Enabled Visualforce Page Access” section.

5. Click Edit, add your Visualforce page to the enabled list, and save your changes.

Without these permissions, users might encounter errors or access issues when trying to navigate to the Visualforce page.

Final Touches and Testing

With the correct URL structure in place, I performed thorough testing to ensure that the navigation worked seamlessly. The button click now correctly directed users to the Visualforce page without redirecting them to the Salesforce login page. The experience was smooth, and I was finally able to meet the requirement.