2

I have overridden a standard salesforce button with Visualforce page. I am using a lwc component inside it using ltng:out. Then from lightning component I want to navigate to some other page but I am not able to do so. In aura I used to use sforce.one.navigatetourl for similar situation. Browser Back Button Not working Properly in Lightning for Vf Pages?

If I use window.location then I get this window inside window UI. enter image description here

How to safely navigate back to salesforce lightning ui from here. I have used lightning navigation that doesn't work inside ltng:out.

Code is pretty simple:

<aura:application extends="ltng:outApp" access="GLOBAL">
    <aura:dependency resource="c:accountDelete" />
</aura:application> 

cmp.html

<template>
    <lightning-button label="goThere" onclick={handleNavigation}></lightning-button>
</template>

cmp.js

import { LightningElement, api, wire  } from 'lwc';
    handleNavigation(){
        window.location = '/001';
    }

Visualforce page:

<apex:page standardController="Account"  sidebar="false">
<apex:includeLightning />    
<div id="LightningComponentid" />    
    <script>
        $Lightning.use("c:AccountDeleteApp", function() {
            $Lightning.createComponent("c:accountDelete",
            { 
            "id" : "{!$CurrentPage.parameters.id}"
            },
            "LightningComponentid",
            function(cmp) {});
        });
    </script>
</apex:page>

1 Answer 1

3

I have found a solution passing function as attribute in lwc.

<apex:page standardController="Account"  sidebar="false">
    <apex:includeLightning />    
    <div id="LightningComponentid" />    
    <script>
    $Lightning.use("c:AccountDeleteApp", function() {
        $Lightning.createComponent("c:accountDelete",
          { 
            "id" : "{!$CurrentPage.parameters.id}",
            "navigateToList" : navigateToList
          },
          "LightningComponentid",
          function(cmp) {});
    });
    function navigateToList(url) {
      if(typeof sforce != 'undefined' && sforce && sforce.one){
         sforce.one.navigateToURL(url);
      } else {
         window.location.href = url;
      }
    }
    </script>
</apex:page>

Then make changes in LWC

import { LightningElement, api  } from 'lwc';
export default class AccountSetDelete extends LightningElement {
    @api id;
    @api navigateToList;
    handleNavigation(){
       this.navigateToList('/001');
    }
}

So solution is pass a function reference from vf page to lwc and then call that method from lwc and use

sforce.one.navigateToURL

in vf pages.

2
  • 1
    I was quite close to the answer with similar idea, glad that you found the solution. For supporting the VF page in classic, you could use idea from Erik's answer which checks if the page is in lightning, uses sforce navigation otherwise window navigation.
    – Raul
    Aug 25, 2020 at 8:52
  • 1
    thanks @Raul. Updated code to support classic and lightning. Aug 25, 2020 at 10:20

You must log in to answer this question.

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