Opening the VF page in a new Tab Lightning

Question

We are converting a VF Page from Classic to Lightning and this VF page called from the button in Classic is like

So when the button is clicked in Classic it opens the VF page in a new pop up window. I tried converting the VF page to lightning compatible but the issue is the VF Page opens in the same page

<apex:page standardController="Opportunity" extensions="Op_Pg_Ext" id="page" showHeader="false" sidebar="false" lightningStylesheets="true" >
 <apex:form id="form">
 .......

How can I approach to resolve the issue, I am new to lightning and any suggestion helps.

Answer 1

It's hard to answer your request as the best solution depends on your VFP (Visualforce page)'s job.

Here are some quick suggestions:

A 1st solution is creating a new quick action on Opportunity object with an action type "Custom Visualforce"

• pros: quick and easy-to-implement solution
• cons: VFP displayed in a modal, width fixed, not very handy.

The 2nd solution is embedding your VFP in a standard Lightning Component and make it available on your Lightning record page.

• pros: Easy to do with the Lightning App Builder (click & point). That way, your VFP will be directly accessible on your record page without clicking on a button
• cons: Looks like your VFP is a form, might overload your record page

Finally, my 3rd and last suggestion, developing 2 very simple lightning components :

1. 1st containing a simple button which will open the 2nd component in a new browser tab

2. 2nd embedding your VFP

   • pros: behaviour quite enough close to what asked
   • cons: need to have a small lightning component development skill

I hope you find something that fits your need !

---

EDIT: Here are some samples for the 3rd solution.

myButton.cmp

<aura:component>
    <lightning:button label="Base" onclick="{!c.handleClick}"/>
</aura:component>

myButtonController.js

({
    handleClick : function (cmp, event, helper) {
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
           componentDef : "c:myAuraVFPContainer",
           componentAttributes: {
              vfpName : 'myVisualforcePageName'
           }
        });
        evt.fire();
    }
});

myAuraVFPContainer.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name='vfpName' type='String'/>
    <iframe src="{!https://yourdomainroot.salesforce.com/apex/ + v.vfpName}" width="100%" height="500px;" frameBorder="0"/>
</aura:component>

Do not forget to replace variables like myVisualforcePageName and yourdomainroot in the code.