Mohith Shrivastava
Dec 8, 2015
Lightning Out is an awesome feature that integrates mashups, and brings the power of Salesforce to any web app. With Lightning Out, you can easily take Lightning Components outside of Salesforce to systems such as Heruko, SAP, Sharepoint and more. For external system mashups you will need to first establish connection with SFDC using connected apps. (Here is an excellent session on this topic.)


In this blog post, I turn the table to talk about a trick I call "Lightning In" - how to use Lightning Out to access Lightning Components in Visualforce. 

USE CASE:
My entire Visualforce page used no apex:form. It used pure HTML, SLDS CSS, and Javascript remoting for actions. Now comes the big requirement change - I needed a Rich Text input field. To do this, I Googled if HTML-5 has Rich Text fields or if there are any native solutions without adding the apex:form element and apex:textarea. (I wanted to avoid any third-party library and use what Salesforce has out of box.) Introduction of apex:form implies lot of viewstate and makes the page slow. Solution? Use the new Lightning Out feature.

 
Interestingly, Lightning Components provide "ui:inputRichText"  which is a Rich Text field on the web form. Now comes the challenge of integrating the Lightning Component into the Visualforce page, and then grabbing the text from the Lighting Component to send back into Visualforce.
 
Using Lightning Out we can integrate a component into Visualforce with a few lines of Javascript. I will also show how to use the callback function provided to grab the component attribute value back into our Visualforce page.
 
COMPONENT CODE:
If you are familiar with Lightning Components, it's basic: a simple component being embedded.
 
LIGHTNING DEPENDENT APP:
This is similar to declaring dependency, like writing import statements in Java or Node.js.
 
VISUALFORCE CODE:
The most important part of the Visualforce code here is the way we declared a Javascript variable and pulled the component into global variable to access it outside the component and use right away in our Visualforce.

         var richtext;
             $Lightning.use("c:RichtextApp", function() {
                 $Lightning.createComponent("c:Richtextcmp", {},
                     "richTextEditor",
                     function(cmp) {
                         // do some stuff
                         richtext = cmp;//Very important
                     });

             });

The final  screens are below:



The console.log clearly prints whatever is typed in the editor, showing how easy it is to get values out of the Lightning Component.
7 Ways to Reduce Churn by Leveraging Salesforce
Re:Imagine your App with Lightning

Join Our Mailing List