Share Data Between Lightning Component & Visualforce Page

Share Data Between Lightning Component & Visualforce Page

Have you ever been in a situation where you need to use Visualforce inside Lightning Component? If yes, does it require sharing the data between Lightning Parent Container and Visualforce?

Communicating between Lightning Component and Visualforce Page can be tricky as both are hosted on different domains. For example, if your org url is “https://myorg.lightning.force.com/” then:

  • Lightning Component would be hosted on https://myorg.lightning.force.com/
  • Visualforce Page would be hosted on https://myorg–c.ap5.visual.force.com/

The key here is to use postMessage() method on the window object. This method will allow you to share the data between two different window objects even if they are hosted on different domains.

 

How to send a message to different window object- Use postMessage() function to send the data to a different domain. This method takes two parameters. Both are mentioned below:

  • message – Actual message string that you want to send to the different window object. If you want to send a JSON object, it’s always better to stringify your JSON object first and then send it. On receiving end, you can parse the String to JSON object again.
  • targetWindowUrl – This parameter takes the URL of the target window object. You should also include the protocol and port number in the URL. Example URL: https://myorg–c.ap5.visual.force.com/apex/MyVfPage

How to receive a message sent by other window objects – You need to attach a “message” listener on the window object to receive messages which are sent to your window object by other window objects. Example: window.addEventListener(“message”, function(event) {}, false);

It’s time for an actual demo. Follow below code to implement communication solution between Lightning and Visualforce.

Visualforce Page- ShareDataWithLightning_VF.vfp

https://gist.github.com/95ff263f0af0fd426d9febb6c6e17ce5

Lightning Component- ShareDataWithVF_Component.cmp

https://gist.github.com/aae10681393ce9e84c89e05a119241fd

Lightning Controller- ShareDataWithVF_ComponentController.js

https://gist.github.com/e4055862b2ba518b24135a38dbcd2b42

This is how it will work:

Demo
Data Share Between Lightning & Visualforce

SFDCFacts:

  • It’s always better to stringify your JSON object if you want to pass it as a message to a different container.
  • If you have multiple Lightning Component on the same page who all are listening to “message” event, then you may see message event firing in all those components. So be careful with this practice and put proper conditions in place before you do any operation.
  • If multiple visualforce pages are included in a lightning component, then you need to get the window object of every visualforce page and send the message to each window object by calling window.postMessage().
  • component.find(vfFrame).getElement().contentWindow – gives you the window object of visualforce page. Replace the id here with iframe aura:id.

Reference: Salesforce Developer Blog

The code is self-explainatory but if you have any queries, please do comment on this post. See you in next post.

 

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has 4 Comments

  1. Avatar

    How can I get the visualforceDomain dynamically?

    1. Avatar

      Generally, visualforce pages are hosted on .visual.force.com

      You can get your org’s url like URL.getSalesforceBaseUrl().toExternalForm()
      and then manipulate it to append visual.force.com in the end.

  2. Avatar

    When i use this in communities , the data passed from lightning component doesnt go to vf page. I think the vf domain /origin url for communities should be given differently. Could you please suggest how to proceed.

Leave a Reply

Close Menu