Communication between Lightning Component and VisualForce

I have been playing with lightning components. Now it has confirmed that Salesforce is going to use only lightning and will provide most of its features via lightning experience. So how can we move from visualforce to lightning. Visualforce and lightning components uses different design methodologies MVC vs MVCC. So its not very easy to get migrated from visualforce to lightning once. There is a hope, salesforce has provided lightning out by which we can add lightning component in visualforce page. Isn’t that great? So we can start building lightning component and start including it in visualforce and gradually replace visualforce with lightning.

But in this migration process we would have some functionality in visualforce and some of the functionality in lighting. Now here we would want that visualforce should be able to communicate with lightning components and lightning components should be able to communicate with visualforce page. By this there are limitless possibilities of mashup of lightning components with visualforce.

Here below code demonstrates how lightning event model could be used to have communication between visualforce component and lightning component.

Code for LightningOutExampleController

Code for LightningOutExample component:

Code for LightningOutExampleController.js

Code of lightning out events:

a.lightningAppEvent.evt

b.lightningAppExternalEvent.evt

LightingOutExampleApp.app

Visualforce page:

In the code you can see we have used lightning event model to call methods from visualforce which are in lightning and vice versa.

I tried to have this as demo by exposing this page on site but unfortunately lightning out is currently not supportedĀ on pages hosted on public site.

This code is also present on public repo which you can check:

https://github.com/kiran-machhewar/sf-kmforce

 

Now you can experiment with lighting components in visualforce and create awesome implementations.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: