You have made the switch to the Lightning Experience. You are building and using Lightning components everywhere, and now you want to use them with a button, link or action. The problem is, Lightning Component isn’t an option for the button, link or action. Guess it’s time to switch back to Salesforce Classic and Visualforce.
Not so fast! Maybe there is a way to bridge the gap between Visualforce and the Lightning Components you've been developing. In this post we're going to show you how to use Visualforce and Lighting Out so you can use a Lightning Component, passing it some parameters from a standard Visualforce controller then navigating to a Salesforce record.
There are four ingredients in this recipe: a Visualforce Page, a Lightning App, a Lightning Component, and a Lightning Event. First, let’s sketch out your Visualforce page. It’s going to bridge the gap between the Lightning Experience, the button, link or action and the Lightning Component. For your example, we're going to use the Case object but we can do this with most any standard or custom object. Here's the skeleton of your page.
A Few Things To Note
We are using a standardController so we can get data from your case to pass to your Lightning component and so we can set this as a button, link or action on the Case Object. We're turning off all the classic Salesforce styling and adding in the SLDS stylesheets so we can have that Lightning Experience look and feel. This is just a skeleton, we're going to put the real meat in later. First we have a little prep for your Lightning Component to get it ready to put into this Visualforce Page.
As we mentioned, we need to use Lightning Out to get Lightning Components in a Visualforce page. Lightning Out works with Lighting Apps and you put your Lighting Components in the Lightning App.
We have your standard aura:application tags, we just need to make sure the access is global and that we're extending Lightning Out. Next, we declare the dependency to your Lightning Component. You'll need to change c:MyLightningComponent to whatever your namespace and component is named. (But you knew that already.)
Now for another easy one: a Lightning Event.
Your event has to be an APPLICATION event, but you can change the rest to whatever you want. These attributes are going to hold parameters from the standard controller on your Visualforce page. So choose whatever names and types that are appropriate. For simplicity's sake, we'll just have two String attributes that are ingeniously named: paramA and paramB.
Next, we're going to have a sample Lightning Component. We're not here to learn about writing Lightning Components. You're already a big fan and have made tons of your own. Therefore, we're going to keep this really simple.
We have an event handler for the application event we just created and attributes for the parameters we're going to get from the Visualforce page via,l the aforementioned event. Then we output the value of paramA and add a button. We'll be using paramB in the Lightning Component's controller. Speaking of which let's see what that looks like.
handleEvent sets the attributes on your Lightning Component to the values we received from the event. goThere creates a variable called caseId from the value of paramB and then does something a little unorthodox for a Lightning Component. sforce.one? But, but we're in the Lightning Experience? Can't we use force:navigateToSObject? Shouldn't goThere look like this?
Yeah, that's what I thought too. Aren't we using Lightning Components in the Lightning Experience? Turns out we left it as soon as we said Lightning Out. All those great force events are no longer available to us. But, we are in Visualforce so we have the sforce.one object and that will get the job done.
Return to your Visualforce page to tie this all together
Because this is Lightning Out in a Visualforce page, we have to include it with the apex:includeLightning tag. In the $Lightning.use() method we are getting your Lightning App, creating your component on the page, telling it in which div to put it (the one with where id="myLightningComponent") then we're using the Lightning Event to initialize some values for your Lightning Component which we handled with your cleverly named method handleEvent in your Lightning Component's controller. We can use standard Visualforce expressions to set the params for this event.
The markup is straightforward. We need the outer div to give it your SLDS styling and then we have another div where the Lightning Component is created. There we have it! Now all that's left is to use this Visualforce page as your button, link or action. Your Lightning Components just got even more versatile.
If your company or nonprofit is interested in taking your Salesforce org into the Lightning era, contact us: