Lightning in a Bottle

Lightning Components in Visualforce

In Winter ’16 the ability to add Lightning Components to Visualforce pages was made generally available. This powerful new feature allows you to reuse existing Lightning Components or design and implement new features as Lightning Components with the flexibility to use of them in new or existing Visualforce pages.

In this previous post I explained how I built an input rating Lightning Component using the jQuery Raty and the ltng:require tag. In this post I explore how that component can be used in a Visualforce page.

Input Rating Component Summary

This gist contains the code from the previous post. The input rating component is shown below along with other ui:inputs in a form.  The form creates a Lead with the values entered on the corresponding Lead fields, including an integer rating (1 to 5) for the number of stars the user selects.
Previous Post form with inputRating component

Adding the Component to a Visualforce Page

The documentation for adding a Lightning Component to a Visualforce page states that there are three steps to make it happen.

  1. Include a JavaScript file in your Visualforce page
  2. Tell your Visualforce page which Lightning app to use
  3. Write a function that creates the component on the page

In my use case, I wanted to present the form to collect the lead information inside of a Visualforce page, so I first created a re-useable component, c:leadCollector, to encapsulate the form and the function of saving the lead. That form contains ui:inputText, ui:button, and c:inputRating components.

After that, the only extra code artifact I needed to create was the Lightning App responsible for declaring which components the Visualforce page uses.  The app must extend ltng:outApp. The <aura:dependency> component is the mechanism used to declare the dependencies, which also allows other resources that are not components to be specified. Note that if you do not declare the dependency and then try to create the component in your Visualforce page you’ll get a very useful JavaScript error (those do exist!) stating that the component wasn’t found, e.g., “Uncaught Error: No component definiton for c:leadCollector in the client registry – add <aura:dependency resource=”c:leadCollector”/> to c:leadCollectionApp.”

The Lightning App code:

The Visualforce page:

The page includes the JavaScript file, lightning.out.js, which is provided by the org. It then uses the $Lightning.use to declare which Lightning App is being used, and creates the component with the $Lightning.createComponent method.  The $Lightning.createComponent takes the name of the component, an object containing attributes, the ID of the HTML element that is where the component should be added, and a callback function that is executed when the component is created.  The callback can be used to set values, perform DOM updates, or anything else desired. The Lightning Components Developer’s Guide section on dynamic component creation is a useful reference.

If you specify an app that does not extend ltng:outApp or does not exist you’ll get a 404 error when the framework makes an XHR request to get information about the app you specified. You can use Chrome dev tools to easily see the request that is made to retrieve the app information and the corresponding response. Example: https://yourDomain-dev-ed– You can also see the XHR request for the individual component that comes later. You can inspect the $Lightning object itself, etc. It’s interesting to poke around behind the scenes in that kind of stuff to see how it all works, but, obviously, don’t program against anything that isn’t in the API documentation.

The resulting Visualforce page contains the lead collection form and when the user selects a rating, fills the out the information, and hits the Save button a Lead is created exactly the same as if the leadCollector component was used outside of a Visualforce page.
lead collection lightning component in a Visualforce page

Passing Values to the Lightning Component

What if we want to initialize the form to have values of an existing Lead instead of the defaults that are set in the component definition? What if we want the component to update an existing Lead? That can be done with the second parameter to the $Lightning.createComponent function. In this case, the Visualforce page uses the Lead’s standard controller (i.e., standardController=”Lead”), so whatever Lead is in context will have its values populated in the component when it is created. Notice that the Id field has been added to theLead attribute’s initialization object, so that the component’s Apex controller’s upsert statement performs an update instead of an insert.

The other thing to note in the above code is that the values need to be the right type for the corresponding fields. The Rating__c field does not have quotes around it, because it is not a String. It is also set to be defaulted to 0. If the value was blank in the DB it would result in a blank being evaluated in the Visualforce page, i.e., “Rating__c: ,” which would result in an invalid object.  Similarly, the Id field is explicitly set to null instead of a blank {!Lead.Id} resulting in an empty string that would cause a field error on the save to the DB.

Alternatively, values can be set in the callback function, using the Component’s API.  For example, to set the email field from the callback it could change to the following.


This post just scratched the surface of what can be done with Lightning Components for Visualforce. There is a need to be able to implement for the current and future with Lightning Components, but at the same time, it may not be practical to rewrite an entire Visualforce page or suite of pages. In addition to allowing us to leverage existing components, Lightning Components in Visualforce give us an option to add new functionality to a page in a way that can set us up for the future time where we might transition page(s) fully to the Lightning Experience.