Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Aakanksha SinghAakanksha Singh 

Reloading an iframe, when a button is clicked in Lightning Component

Hello Everyone,
I want to know how can we reload an iframe which contains a visualforce page,so that the value in visualforce page could be updated, through a button in lightning component.
P.S.- I don't have any code regarding it.
Thanks
Regards
Best Answer chosen by Aakanksha Singh
sfdcMonkey.comsfdcMonkey.com
hi
you can reload your vf page by below code from lightning component button press.
But keep in mind as i mentioned before you can not set a value from @auraEnabled method to visualforce get;set; property 

iframe commponent 
<!--iframe-->
<aura:component controller="showData">
    <aura:attribute name="inptText" type="String"/>
    <aura:attribute name="ifmsrc" type="String"/>
    <ui:inputText aura:id="input" label="Enter A Value:" value=""/>
    Client-Side Value:<ui:outputText value="{!v.inptText}"/><br/>
    <ui:button press="{!c.myAction}">Press</ui:button><br/><!--Ifraim should be reloaded on the press of this button-->
    <iframe width="800" height="600" style="border: 1px solid" src="{!v.ifmsrc}" />
</aura:component>


js controller 
({
    myAction : function(component, event, helper) {
        var inp = component.find("input");
        var val = inp.get("v.value");
        //alert(val);
        var action = component.get("c.assignValue");
        action.setParams({
           "svr" : val
        });
        action.setCallback(this,function(response){
            var state = action.getState();
            if(state === "SUCCESS"){
                component.set("v.inptText",response.getReturnValue());  
               
            }
        });
        $A.enqueueAction(action);
        console.log( '$A.enqueueAction(action)' );
        // reload iframe on button click 

                 var d = new Date();
                 var n = d.getTime();   
				component.set("v.ifmsrc", 'https://foxindia-dev-ed--c.ap2.visual.force.com/apex/ShowData?t='+ n );   
           
    }
})


change url with your org URL https://foxindia-dev-ed--c.ap2.visual.force.com/apex/ShowData


visualforce page 
<apex:page controller="showData" showHeader="false" standardStylesheets="false">
    <script>
  alert('alert show after vf page reload');
  </script>
    Testing Text on vf page  
    <apex:form >
        <apex:outputText value="{!cnval}"/>
    </apex:form>
</apex:page>

apex class 
public with sharing class showData {
   
  
    public static string cnval{get; set;}
    
    @AuraEnabled
    public static string assignValue(string svr){
        cnval = svr;
          system.debug('aura-->'+cnval);   
          return svr;
       }    
}


NOTE -:
how it reload vf page on button click ---:
in this code i use <aura:attribute name="ifmsrc" type="String"/> for store src value for iframe .
when the attribute value change it's automatic rerandred by lightning component. but here is one question !! how to change iframe src because src of iframe is always same (vf page link ) now the trick is
i append ?t='+ n after url and value of n is current time so it's change every time and you get a different src and its set on aura:attribute with a new time and same src . and your vf page load in iframe.  
=================================================================================================

now when you click on the buttton every time visualforce page is loading and you got an alert message.
if you find any way for set svr value to cnval let me inform :) 
add component to your lightning application for testing my  code
if you have any doubt in code you can ask here :)
Thanks
 

All Answers

sfdcMonkey.comsfdcMonkey.com
hi Aakansha singh 
you can use vf page in lightning component by iframe
go to below link for your requirement 
http://jargon.io/salesforcejeff/iframecomponent

Thanks 
mark it solve if it helps you :)
Aakanksha SinghAakanksha Singh
Hi @soni piyush, I've gone through the blog, bt i want to know how can we refresh the iframe on the click of the button.
sfdcMonkey.comsfdcMonkey.com
what is your exact requirement? can you share more detail about it :)
Aakanksha SinghAakanksha Singh
Ok, let say there is an integer i in the controller, which is referenced in a vf page, which is include in the iframe of lighting component. Now there there is a button in lightning component, on the click of which the value of i is increased by 1, i.e., i++, now i've to show the increased value in the iframe. This is my requirement
sfdcMonkey.comsfdcMonkey.com
hi you can't pass values in vf page by iframe because how we can change in vf page by our lightning js controller.
you can only refresh existing vf page inside the iframe by click the button . can you sahre your code 
Thanks  
Aakanksha SinghAakanksha Singh
Sorry for late reply, I've written a code just for testing,
Component:
<pre>
<aura:component controller="showData">
    <aura:attribute name="inptText" type="String"/>
    <ui:inputText aura:id="input" label="Enter A Value:" value=""/>
    Client-Side Value:<ui:outputText value="{!v.inptText}"/><br/>
    <ui:button press="{!c.myAction}">Press</ui:button><br/><!--Ifraim should be reloaded on the press of this button-->
    <iframe id="myFrame" style="border: 1px solid" src="https://[domainName]/apex/ShowData" />
</aura:component>
</pre>
Client-Side Controller:
<pre>
({
    myAction : function(component, event, helper) {
        var inp = component.find("input");
        var val = inp.get("v.value");
        //alert(val);
        var action = component.get("c.assignValue");
        action.setParams({
           "svr" : val
        });
        action.setCallback(this,function(response){
            var state = action.getState();
            if(state==="SUCCESS"){
                component.set("v.inptText",response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
        var frame = document.getElementById("myFrame");
        frame.src=frame.src;
    }
})
</pre>
Server-Side Controller:
<pre>
public with sharing class showData {
    
    public static string val{get{
        val=cnval;
        return val;
    } set;}
    private static string cnval;
    
    @AuraEnabled
    public static string assignValue(string svr){
        cnval=svr;
        return svr;
    }    
}
</pre>
VF page:
<pre>
<apex:page controller="showData" showHeader="false" standardStylesheets="false">
    <apex:form>
        <apex:outputText value="{!val}"/>
    </apex:form>
</apex:page>
</pre>
Thanks
Aakanksha SinghAakanksha Singh
*iframe, in the comment..
sfdcMonkey.comsfdcMonkey.com
hi are you sure that your apex class set this type
public with sharing class showData {   
      public static string val{get{   val=cnval; 
                                             return val;   
 } set;}   
 private static string cnval;  
 @AuraEnabled   
 public static string assignValue(string svr){
        cnval=svr; // its aura method never set value for  private static string cnval;  
        return svr;   
 }    
}
Aakanksha SinghAakanksha Singh
Is it not working??
 
Aakanksha SinghAakanksha Singh
Can anyone jst tell me how to reload the iframe?? that surely will help.
sfdcMonkey.comsfdcMonkey.com
hi
you can reload your vf page by below code from lightning component button press.
But keep in mind as i mentioned before you can not set a value from @auraEnabled method to visualforce get;set; property 

iframe commponent 
<!--iframe-->
<aura:component controller="showData">
    <aura:attribute name="inptText" type="String"/>
    <aura:attribute name="ifmsrc" type="String"/>
    <ui:inputText aura:id="input" label="Enter A Value:" value=""/>
    Client-Side Value:<ui:outputText value="{!v.inptText}"/><br/>
    <ui:button press="{!c.myAction}">Press</ui:button><br/><!--Ifraim should be reloaded on the press of this button-->
    <iframe width="800" height="600" style="border: 1px solid" src="{!v.ifmsrc}" />
</aura:component>


js controller 
({
    myAction : function(component, event, helper) {
        var inp = component.find("input");
        var val = inp.get("v.value");
        //alert(val);
        var action = component.get("c.assignValue");
        action.setParams({
           "svr" : val
        });
        action.setCallback(this,function(response){
            var state = action.getState();
            if(state === "SUCCESS"){
                component.set("v.inptText",response.getReturnValue());  
               
            }
        });
        $A.enqueueAction(action);
        console.log( '$A.enqueueAction(action)' );
        // reload iframe on button click 

                 var d = new Date();
                 var n = d.getTime();   
				component.set("v.ifmsrc", 'https://foxindia-dev-ed--c.ap2.visual.force.com/apex/ShowData?t='+ n );   
           
    }
})


change url with your org URL https://foxindia-dev-ed--c.ap2.visual.force.com/apex/ShowData


visualforce page 
<apex:page controller="showData" showHeader="false" standardStylesheets="false">
    <script>
  alert('alert show after vf page reload');
  </script>
    Testing Text on vf page  
    <apex:form >
        <apex:outputText value="{!cnval}"/>
    </apex:form>
</apex:page>

apex class 
public with sharing class showData {
   
  
    public static string cnval{get; set;}
    
    @AuraEnabled
    public static string assignValue(string svr){
        cnval = svr;
          system.debug('aura-->'+cnval);   
          return svr;
       }    
}


NOTE -:
how it reload vf page on button click ---:
in this code i use <aura:attribute name="ifmsrc" type="String"/> for store src value for iframe .
when the attribute value change it's automatic rerandred by lightning component. but here is one question !! how to change iframe src because src of iframe is always same (vf page link ) now the trick is
i append ?t='+ n after url and value of n is current time so it's change every time and you get a different src and its set on aura:attribute with a new time and same src . and your vf page load in iframe.  
=================================================================================================

now when you click on the buttton every time visualforce page is loading and you got an alert message.
if you find any way for set svr value to cnval let me inform :) 
add component to your lightning application for testing my  code
if you have any doubt in code you can ask here :)
Thanks
 
This was selected as the best answer
Aakanksha SinghAakanksha Singh
Thank you. @soni piyush
sfdcMonkey.comsfdcMonkey.com
pleasure Mark it solve if it helps you :)
Aakanksha SinghAakanksha Singh
Thank you, also it may help you, we can send value to visualforce page by setting them as parameters of the url mentioned in iframe source :)
Yashita Goyal 22Yashita Goyal 22
Hi,

I have embeeded map in a lightning component. I want to update/reload map when I change the values.

Thanks
Yashita
Yashita Goyal 22Yashita Goyal 22
Hi All,
 
I have query related to reloading the map component. The approach followed to get the map via iframe and pointing it to VF page.
 
Code Structure: 
<c:Binding Component>
	<c:FilterComponent>
		<Input Select to select Object>
		<Input Select to select Associated Object records Country>
		<Button to show on map>
	  </c:FilterComponent>
	<c:MapComponent>
		<iframe src ='/apex/VFPage'>
	</c:MapComponent>
</c:Binding Component>
Note: Event is fired on button click to go onto map component.
 
I am unable to refresh the map component when user changes value in filter component and click on button. Can anyone help me.
October 10, 2017