I have a lex component that runs from a lightning-out visualforce page that opens from a custom button on a record details page. How can I close the visualforce page and refresh the record details after I click a button in the component?


  1. From visualforce page pass UITheme to the lightning component.

        var myUserContext = "{!$User.UITheme}";
        $Lightning.use("c:myLightningApp", function() {
        { UserContext: myUserContext },
        function(cmp) {
            console.log('component created');

  2. As you said, you have a button in lightning component from where you want to navigate. So now on click of that button, call a component controller function. Here we can use that context variable (theme) to determine how to navigate for one of 3 scenarios: Visualforce in S1 or LEX, Visualforce in Classic, or a standalone component (no Visualforce) in S1 or LEX.

For example, if you want to navigate to contact detail page then:

       contactSelected : function(component) {
       var context = component.get("v.UserContext");

       if(context != undefined) {
           if(context == 'Theme4t' || context == 'Theme4d') {
               console.log('VF in S1 or LEX');
           } else {
               console.log('VF in Classic'); 
               var contactId = component.get("v.contact").Id;
       } else {
           console.log('standalone Lightning Component');
           var event = $A.get("e.force:navigateToSObject");
           event.setParams({"recordId": component.get("v.contact").Id});
  • thanks it solved my problem when the page is displayed in an existing window. What if the behavior is display in a new window (pop-up) how then I can close the poped vf page from the button. I thought it has to do with an event thrown from the component to the vf and than the vf does the close and refresh but could not figure it out. – EK1 Oct 23 '18 at 5:14

Not the answer you're looking for? Browse other questions tagged or ask your own question.