Add Lightning
components to your Visualforce pages to
combine features you’ve built using both solutions. Implement new functionality using Lightning components and then use it
with existing Visualforce
pages.
There are three steps to add Lightning components to a Visualforce page.
- Add the Lightning
Components for Visualforce
JavaScript library to your Visualforce page using the <apex:includeLightning/> component.
- Create and reference a Lightning app that declares your component dependencies.
- Write a JavaScript function that creates the component on the page using $Lightning.createComponent().
Add the Lightning
Components for Visualforce
JavaScript Library
Add <apex:includeLightning/> at the beginning of
your page. This component loads the JavaScript file used by Lightning Components for Visualforce.
Create and Reference a Lightning Dependency App
To use Lightning Components for
Visualforce, define component
dependencies by referencing a Lightning dependency app. This app is
globally accessible and extends ltng:outApp. The app
declares dependencies on any Lightning definitions (like
components) that it uses.
Here’s an example of a simple app named
lcvfTest.app. The app uses the
<aura:dependency> tag to indicate that it uses the
standard Lightning component,
ui:button.
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="ui:button"/>
</aura:application>
To reference this app on your page, use the following JavaScript code, where
theNamespace is the namespace prefix for the app. That is, either your
org’s namespace, or the namespace of the managed package that provides the
app.
$Lightning.use("theNamespace:lcvfTest", function() {});
If
the app is defined in your org (that is, not in a managed package), you can use the default
“c” namespace instead, as shown in the next example. If your org doesn’t have a namespace
defined, you
must use the default namespace.
For further details about creating a Lightning dependency app, see Lightning Out Dependencies.
Creating a Component on a Page
Finally, add your top-level component to a page using $Lightning.createComponent(String type, Object attributes, String locator, function
callback). This function is similar to $A.createComponent(), but includes an additional parameter,
domLocator, which specifies the DOM element where you want the
component inserted.
Let’s look at a sample Visualforce
page that creates a
ui:button using the
lcvfTest.app from the previous
example.
<apex:page>
<apex:includeLightning />
<div id="lightning" />
<script>
$Lightning.use("c:lcvfTest", function() {
$Lightning.createComponent("ui:button",
{ label : "Press Me!" },
"lightning",
function(cmp) {
// do some stuff
});
});
</script>
</apex:page>
This code creates a DOM element with the ID “lightning”, which is then referenced in the
$Lightning.createComponent() method. This method
creates a ui:button that says “Press Me!”, and then
executes the callback function.
For further details about using $Lightning.use()
and $Lightning.createComponent(), see Lightning Out Markup.