It’s almost time to Spring forward, and there are several handy developer features to check out. LeeAnne and I recently hosted the Spring ’16 Release Preview webinar for developers and admins, and one of the features I demoed that I’m most excited about is Lightning Out. With Lightning Out, your Lightning Components become significantly more powerful, and open up a range of new possibilities for Lightning.
What is Lightning Out?
Lightning Out is a feature that extends Lightning Apps. It acts as a bridge to surface Lightning Components in any remote web container. This means you can use your Lightning Components inside of an external site (i.e. Sharepoint or SAP), in a hybrid app built with the Mobile SDK, or even elsewhere in the App Cloud like on Heroku or in a Visualforce Page.
Try Lightning Components for Visualforce for Yourself
Lightning Out is currently in beta as of Spring ’16, but projected for general availability in the Summer. Lightning Components for Visualforce has been GA since Winter ’16 and is powered by Lightning Out.
I think this is pretty cool for a few reasons:
- You can build and use Lightning Components directly in Visualforce pages. This is not an iframe.
- You can develop components to be used in Classic, Salesforce1 (S1), and Lightning Experience (LEX) simultaneously.
- You can create new components in Lightning to add functionality to existing Visualforce pages.
For apps outside of Force.com, you will additionally need to setup a cross origin resource sharing (CORS) whitelist URL setting for your external web app domain. You’ll also need to setup a Connected App with OAuth configured to the proper scopes.
How to Handle Navigation for Components Used in Classic, Salesforce1, and Lightning Experience
Right now there is no unified way to handle navigation between these three app environments. There are already suggested ways to navigate inside Visualforce in LEX or S1, but these suggestions do not cover the scenario of a component being used in all three environments simultaneously.
The first step is to detect the environment context. As of Spring ’16, you can use the global $User variable attributes around UITheme to detect your app environment context (Classic, S1, LEX) in a supported way. Once you detect the app environment, you can pass the context value in as an attribute for your component. In Visualforce it would look like this:
Lightning Can Strike Many Times
With Lightning Out, your Lightning Components become significantly more powerful. Not only can you use Lightning Components in other Components or Lightning Apps, but you can surface them in practically any web container both on or off of the App Cloud.
About the Author
Samantha Ready is a senior developer evangelist at Salesforce, and has been at Salesforce for 5 years. During her tenure you might have seen her work in the Salesforce1 Dev Guide she co-authored, the Udacity course she taught centered around two passions (Music + Salesforce), or possibly from a Salesforce webinar or event. While her formal background is in robotics and engineering, she is has worked with all facets of the App Cloud with a strong focus on Force.com and front-end web development. When she isn’t coding, you might find Sam rock climbing, SCUBA diving, or snowboarding in this rainbowtastic onesie.