19

The LWC framework includes the NavigationMixin.Navigate functionality that can be used to obtain URLs or perform navigation to generated URLs. This supports a number of different page types, as covered in the documentation.

What I can't find is how to create a URL to a specific Visualforce page, with parameters and compatible with communities. Using the "web page" navigation type seems wrong to me, since the URL for a Visualforce page varies based on whether access is direct or within a community.

Do you know what the correct approach is for navigating from a flexipage via an LWC component to a Visualforce page in the same org, passing the page some parameters?

2
  • My guess (and only dynamic option to get VF page URL I am aware of) would be to have an apex method retuning a URL with System.Page.existingPageName which can be used in LWC's method navigateToWebPage
    – Raul
    Commented Jul 10, 2019 at 14:17
  • IIRC the existing page URL stuff has problems with communities, but I'll look into again. Thanks @Raul
    – Phil W
    Commented Jul 10, 2019 at 16:07

3 Answers 3

13

OK, so we didn't find a direct way to do it.

Failed approach

Initially we thought that the following approach should work for normal and community usage. In essence we implemented a component with navigation mixin then used something like:

this[NavigationMixin.GenerateUrl]({
        type: 'standard__navItemPage',
        attributes: {
            apiName: "customTabName",
        },
        // query string parameters
        state: {
            c__showPanel: 'true' // Value must be a string
        }
    }).then(url => {
        window.open(url)
    });

Importantly, this wasn't actually trying navigate directly to a Visualforce page, but rather to a custom tab into which the page is placed (clearly the tab needs to be accessible by the user). Note the use of window.open allows the URL to be opened in a separate tab or window within the browser.

Unfortunately, the "query string parameters" included do NOT get through to the Visualforce page - this because of the use of iframes across domains.

The Solution

We eventually found a way to do this, i.e. invoke a Visualforce page with query parameters from an LWC, though it was a lot more complex:

  1. Create a cacheable, Aura Enabled Apex method that returns an object holding the Page.pagename.getUrl()** value and an indication whether the page is in a community (using Site.getSiteId() != null)
  2. Have the LWC invoke this method using a wire
  3. Have the LWC use the returned URL value:
  4. When in a community: just use window.open with the URL with added query parameters (since communities don't support navigation to a page reference as a standard web page)
  5. When not in a community: with NavigationMixin but treating it as a "standard_webPage". The URL itself has the required query parameters added before being used as the "url" attribute for the NavigationMixin.generateUrl call. The mixin promise uses window.open.

The LWC code looks something like:

handleClick(event) {
    event.stopPropagation();

    if (this._url) {
        // Add query parameters to the URL
        //
        // Note that these aren't added in the standard way (using the 'state' property of the mixin object)
        // because then they wouldn't get passed to the iframe containing the visualforce page. It's possible
        // that this is unintended behaviour of the mixin and in the future Salesforce may change it and
        // properties added manually like this may no longer be supported.
        const urlWithParameters = this._url +
            '?' + this._queryParameters;

        if (this._isCommunity) {
            // Navigation to PageReference type standard__webPage not supported in communities.
            window.open(urlWithParameters);
        } else {
            this[NavigationMixin.GenerateUrl]({
                type: 'standard__webPage',
                attributes: {
                    url: urlWithParameters
                }
            }).then(generatedUrl => {
                window.open(generatedUrl);
            });
        }
    }
}

** Update:

We actually found that when using with communities that include a URL suffix that the Page.pagename.getUrl() did not add the community URL suffix and therefore didn't work. This was remedied by having a known static resource and using the following:

String theURL = PageReference.forResource('theknownresource').
        substringBefore('/resource/') +
        Page.pagename.getUrl();

This then works outside communities, in a community with no URL suffix, in a community with a URL suffix and in a community with multiple URLs.

2
  • I'm not sure what you mean by this Page.pagename.getUrl(); I don't see a method like this in apex classes
    – JJSHHS
    Commented May 24, 2021 at 4:38
  • If you have a Visualforce page called MyPage, this page's PageReference is accessible in Apex using [System.]Page.MyPage, as covered here. Read the documentation for PageReference for what you can then do with that (including getting the relative URL).
    – Phil W
    Commented May 24, 2021 at 7:35
13

Yes its possible to open a vf page in Lwc. I m sharing the lwc must haves

  1. import { NavigationMixin } from 'lightning/navigation';
  2. export default class Re_myClass extends NavigationMixin (LightningElement)
    eventhandler() {
        this[NavigationMixin.Navigate]({
            type: 'standard__webPage',
            attributes: {
                url: '/apex/vf page name'
            }
        })
    }

This really worked for me!

6
  • Did you try sending query parameters and did you try it in a community site? Also, did you get the lightning chrome around the VF page?
    – Phil W
    Commented Apr 10, 2020 at 19:41
  • 2
    What I am saying is that this solution does not work for communities.
    – Phil W
    Commented Apr 11, 2020 at 10:35
  • 1
    You don't need query parameters if you just pass the parameters in the url - url: '/apex/VFPage?Id=XXXXXXX' Commented Jul 5, 2020 at 1:14
  • 1
    That's exactly what my solution does; see my answer with urlWithParameters variable. NB: "/apex/VFPage" does not work in communities.
    – Phil W
    Commented Dec 16, 2020 at 17:25
  • 1
    @gorav that post also will fail to work in a community. See my answer instead.
    – Phil W
    Commented Sep 26, 2022 at 19:42
1

I had to navigate control from LWC component to a VF Page on community. I made the VF Page accessible in communities first following the steps in the following link:

(https://help.salesforce.com/articleView?id=community_builder_use_visualforce.htm&type=0)

Then on the anchor tag:

<a href={myURL} target="_blank">tag</a>

on JS file:

myURL = window.location.href.replace("/s/", "/VFPageName");

My VF page did not need any parameters. But you can use JS to build your url bind that into href of anchor tag.

3
  • Did you test this with communities that have multiple URLs? By that I mean those that have more than one path that maps to the community. The approach I described works for all types of community (and outside communities too).
    – Phil W
    Commented Dec 16, 2020 at 17:23
  • I tested this on two communities. If you are able to generate a URL in JS that takes you correctly to the page, then this works. Thanks.
    – Uday
    Commented Dec 16, 2020 at 17:39
  • The question is, how are you generating the URL? Also note that outside communities if you want the Lightning Page "chrome" you can't just directly navigate to the VF page IIRC, but you do need to jump through some hoops like we have in our solution. The point of our solution is compatibility between platform and community use of the LWC and its linked VF page.
    – Phil W
    Commented Dec 16, 2020 at 17:53

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .