Lightning Experience has been a multi-year mission for Salesforce. What started with the Salesforce1 Mobile App, and its underlying Lightning framework has today redefined the desktop experience of the CRM. With Lightning becoming the go-to choice of framework for the Salesforce implementations, some projects are still running on the tried and tested Visualforce – Apex.
The Lightning like experience can be created in the visualforce pages using the Lightning design system. What’s also great that Salesforce lets us embed lightning components in visualforce pages. So the power and flexibility of the lightning framework can be used to make the classic view more interactive.

We will use existing Chart component to display on the Visualforce page. To embed Lightning components in a visualforce page we need a Lightning app to act as a container for the component.

Create a Lightning App

The Lightning Application has the access as global so that it can be used anywhere in Salesforce organization like Visualforce. extending ltng:outApp indicates that any component defined in this application can be used on the Visualforce page. ltng:outApp includes the slds (lightning design system css) to the page, this styles the embedded component as the lightning experience view. ltng:outAppUnstyled can be used instead if the lightning experience look and feel is not needed for the embedded component.

Create a Visualforce page

In above Visualforce page, apex:includeLightning tag imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

In the script, we have the $Lightning.use() method which is used to refer the Lightning Application which extends ltng:outApp. $Lightning.createComponent is used to create Lightning Component dynamically.

Save the vf page and preview it. It should look like this:

Embed Lightning components

You can also check the Salesforce Documentation for the same.

Categories: Lightning

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Apex

Using Salesforce Reports and Dashboards REST API

The Reports and Dashboards REST API gives you programmatic access to your report and dashboard data as defined in the report builder and dashboard builder. The API lets you integrate the data into any web Read more…

Lightning

LockerService for Secure Lightning Components

Lightning LockerService is a security architecture for Lightning components, that enhances security by isolating individual Lightning components in their own namespace. LockerService also promotes best practices that improve the supportability of your code by only Read more…

Lightning

Auto Style Existing Visualforce Pages with Lightning Experience Stylesheets

With the Winter 18 release, Salesforce has introduced Lightning Experience Stylesheets (Beta). This enables the visualforce page to be rendered with the look nad feel of lightning experience when viewed in Salesforce1 or in Lightning Read more…