Embed VisualForce page inside a lightning component

Question

We are currently migrating into LEX. We have a JavaScript button on our opportunity page that opens a VisualForce page.

The page that is opened is not the same for all opportunity stages.

For example:

If the opportunity stage is "approved": open approvedAnnualBudget VF page

Else - if the opportunity stage is "not approved": open notApprovedAnnualBudget VF page.

We want to migrate that functionality to LEX, and to show the VF page inside a tab in the app builder. For that we have implemented a lightning component that replaces the JavaScript:

({
    doInit : function(component, event, helper) {

        // get opportunity stage from server
        var action = component.get("c.getOpp");
        action.setParams({"oppId": component.get("v.recordId")});

        action.setCallback(this, function(response) { 
            var state = response.getState();
            console.log("state",state);

            var opp = response.getReturnValue();
            console.log("opp",opp);

            if (component.isValid() && state === "SUCCESS") {

                var urlEvent = $A.get("e.force:navigateToURL");
                var url;

                // set the url according to the opportunity stage
                if (opp.StageName == 'approved') { 
                    url = "/apex/approvedAnnualBudget?id="+opp.Id;
                } else { 
                    url = "/apex/notApprovedAnnualBudget?id="+opp.Id; 
                }

                if (url) { 
                    urlEvent.setParams({
                        "url": url
                    });
                    urlEvent.fire();
                }
            }
        });

        $A.enqueueAction(action);
    }

})

Now, we are adding the component on the opportunity app builder record page tab, and then, when we press the tab, the whole page redirects to the VF page.

The problem is that when we use the $A.get("e.force:navigateToURL") command, the page refreshes and goes out of the opportunity, and does not only change the current tab.

Is there any way to implement the component differently?

Thanks

Answer 1

I would:

• Put 2 iframes in the component and use aura:if to hide them at the initialization
• Instead of doing a navigateToUrl, I would enable the right iframe changing the variable in the aura:if based on your use case