2

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

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.

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.

|improve this answer|||||
  • Thank you for this detailed answer.. Yes I tried Quick Action, as you said I couldnt change the size of the Page. Can you please share any samples for the third option? – trx Dec 20 '19 at 17:51
  • Yes sure, please have a look at my edited answer. – Sohaib FAROOQ Dec 23 '19 at 11:35
  • I tried as you suggested and I get the error .. I posted it as a new question salesforce.stackexchange.com/questions/289194/… here.. Can you please take a look at it and say what am I missing. – trx Dec 23 '19 at 21:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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