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.
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:
Want to ask questions to the team who’ve worked with 10% of the AppExchange? Visit www.codescience.com/services to get started.
