Referecing Visual Force page within the Lightning Community

Up to Salesforce Spring 17′ Release, we still cannot use CDN within the lightning components. Salesforce requires you to upload all JS files as static resources.

Therefore, no luck for directly using your beloved 3rd party JS library in your lightning components if it requires CDN, such as Google Map.

BUT, there is a workaround – hosting these libraries in visual force pages, then place VF pages within a lightning, since VF page supports CDN.

For most App builders out there, you probably aware and used the VF component before. But for community portal users, it is not available until the Spring 17′ Release, which I find it magically appeared on my component list. Good Stuff.

The problem with the VF component provided by the Salesforce out of the box is it has no ability to interact with the lightning component or vise versa. That’s sad.

But the availability of the VF component within the community portal opens the door for using iframe, which it was previously blocked by the Salesforce in the HTTP response header.

We can use an iframe to host a VF page, and the best is we can reference it in the controller by giving it an aura ID, so that we can interact with it.

How can we reference the VF page from the lightning controller?
Obviously, to give an iframe a VF page to load, it requires an URL in the src attribute. It is not as easy as to just dump the domain name and VF page name like this:
https://mydomain.na35.force.com/apex/MyVFPage

This DOESN’T work! Why?

With further investigation, I found that the VF page actually located under the path: https://mydomain.na35.force.com/sfsites/c/

We can get this URL dynamically from the code as:

window.location.origin + $A.get('$Site').coreUrlPrefix + '/apex/MyVFPage'

This will result in a URL to the VF page: https://mydomain.na35.force.com/sfsites/c/apex/MyVFPage

Let’s look at each segment:
1. window.location.origin: it gives you the origin of your site, in another word, the protocol + domain.
2. $A.get(‘$Site’).coreUrlPrefix: this gives you the missing path to the VF page. Note: there are some other useful properties we can use in the object returned by $A.get(‘$Site’), worth a while to take a look.
3. ‘/apex/MyVFPage’: the VF page path

Awesome, we have a working VF page manually hosting in the iframe, and we can manipulate this iframe from the controller.

Next, to learn how to make the VF page and Lightning components to interact, there is a very good article hosted on the Salesforce blogs.
https://developer.salesforce.com/blogs/developer-relations/2017/01/lightning-visualforce-communication.html


Leave a Reply

Your email address will not be published. Required fields are marked *