Passing parameters into iframe URL to open a Visualforce page in a Lightning Component

Question

I've got a working solution but I am not happy with it. At the moment I have to press a button to pass on my VF page the correct parameters (recordId, AccountId and Branch).

Component

<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes" access="global"  >   

    <aura:attribute name="opportunity" type="Object"/> 
    <aura:attribute name="opp" type="Object"/>  

    <force:recordData aura:id="currentOpp"
                      recordId="{!v.recordId}"
                      layoutType="FULL"  
                      targetFields="{!v.opp}"
                      targetRecord="{!v.opportunity}"
                      fields="Id, AccountId, Branch__c" 
                      />  

    <div class="slds-p-horizontal--small slds-m-top--medium slds-size--1-of-1 slds-align--absolute-center">    
        <lightning:button label="Open Page" variant="brand" onclick="{!c.openPage}" />
    </div>     

</aura:component>

Javascript Controller

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

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

        var oppId = component.get("v.opp.Id");   
        var accId = component.get("v.opp.AccountId");
        var branch = component.get("v.opp.Branch__c");   

        var url = accId + '&Branch='+ branch + '&opp='+ oppId ;   

        urlEvent.setParams({
            "url" : '/apex/myVFPage?acc=' + url                   
        });
        urlEvent.fire();        
    },          
})

What I try to achieve is the page to open directly on the tab without pressing a button. The code looks something like this.

Component

<aura:component implements="force:hasRecordId,force:appHostable,flexipage:availableForAllPageTypes" access="global" >

    <aura:attribute name="opportunity" type="Object"/> 
    <aura:attribute name="opp" type="Object"/> 
    <aura:attribute name="iframeUrl" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <<force:recordData aura:id="currentOpp"
                      recordId="{!v.recordId}"
                      layoutType="FULL"  
                      targetFields="{!v.opp}"
                      targetRecord="{!v.opportunity}"
                      fields="Id, AccountId, Branch__c" 
                      />    

    <lightning:card >        
          <iFrame id="theVFframe" src="{!v.iframeUrl}" frameBorder="10" width="100%" height="500px;" scrolling="auto" sandbox="allow-same-origin" />   
    </lightning:card>  

</aura:component>

Javascript Controller

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

        var opportunity = component.get("v.opportunity");  
        var accId = component.get("v.opp.AccountId");
        var branch = component.get("v.opp.Branch__c");
        var oppId = component.get("v.opp.Id");

        component.set("v.iframeUrl", 'https://[mydomain]/apex/myVFPage?acc='+ accId + '&Branch='+ branch + '&opp='+ oppId );   

        var theVFframe = document.getElementById("theVFframe");
        theVFframe = theVFframe;
    },    
})

I have a page that open and say URL No Longer Exists. I also tried " theVFframe.src = theVFframe.src; " and I got a blank page. When I inspect the page it looks like the parameters values are null. Any idea how to fix this? Thanks in advance for your help. Sylvie

Answer 1

You can use the open method:

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

        var opportunity = component.get("v.opportunity");  
        var accId = component.get("v.opp.AccountId");
        var branch = component.get("v.opp.Branch__c");
        var oppId = component.get("v.opp.Id");

        let vfUrl = '/apex/myVFPage?acc='+accId+'&opp='+oppId+'&branch='+branch;
        window.open(vfUrl,'_self');

    },    
})