Incorporating A Lightning Component Into Visualforce Pages

/ apex, Salesforce / By

Begin by generating a pair of new Lightning components and a Lightning app to house them. I utilized a couple of Lightning components I had previously created during my learning process: helloWorld.cmp (refer to Figure 1) and helloPlayground.cmp (refer to Figure 2). Subsequently, I incorporated an app named ‘harnessApp.app’ to contain these components.

helloWorld.cmp Component

Figure 1

helloPlayground.cmp Component

Figure 2

Observe the ‘extends=”ltng:outApp”‘ in the provided app. This declaration signifies that the app is capable of being hosted externally to Lightning but will maintain the utilization of the Salesforce Lightning Design System (SLDS) styling. Alternatively, you can opt not to use the SLDS styling by using ‘ltng:outAppUnstyled’ instead.

<aura:application extends="ltng:outApp">
    <c:helloWorld />
    <c:helloPlayground />
</aura:application>

In my Visualforce (VF) page, there’s a specific inclusion for Lightning, indicated by:

<apex:includeLightning />

We also must craft a segment of the code to accommodate the appearance of Lightning components. A straightforward example is provided below:

<div id="lightning" />

It may appear empty now, but we will address that with some JavaScript later on.

$Lightning.use("c:harnessApp", function(){});

Here, we utilize the newly created app. If you run your page at this juncture, no action will occur. The page necessitates manual instruction to components regarding their display location. Observe the ‘c:’ in the expression, denoting the default namespace. If your organization uses a namespace different from the default, you must modify the ‘c’ part accordingly.

Within the function we just established, additional lines are added:

$Lightning.createComponent("c:HelloWorld", {}, "lightning", function(cmp){});

This effectively unveils the Lightning component and embeds it within the div identified as ‘lightning’. Additionally, it is noticeable that, at this juncture, only one of the components is displayed. Integrating the next component is relatively straightforward:

$Lightning.createComponent("c: helloPlayground", {}, "lightning", function(cmp){});

If you run it again, you can see both apps now running!

NOTE: There might be a slight delay in the appearance of the components as they are revealed through JavaScript that needs to execute.

Looking at Figure 3, you might notice that the ‘Hello World’ is under the ‘Hello Playground’ even though the javascript above adds in hello world first. I could have added them to their own components to control more of where they show up, but when you add new components to be shown to the page, they will prepend the new Lightning component in front of the others.

Figure 3 – Both apps running.

I made an adjustment to my page so that each one has their own div and I can control better where they show.

<apex:page >
    <apex:includeLightning />
 
     
 
<div id="helloWorld" />
 
<div id="helloPlayground" />
 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%09%09%24Lightning.use(%22c%3AharnessApp%22%2C%20function()%0A%09%09%7B%0A%09%09%09%24Lightning.createComponent(%22c%3AHelloWorld%22%2C%0A%09%09%09%7B%7D%2C%20helloWorld%22%2C%20function(cmp)%7B%7D)%3B%0A%09%09%09%24Lightning.createComponent(%22c%3AhelloPlayground%22%2C%0A%09%09%09%7B%7D%2C%20%E2%80%9ChelloPlayground%22%2C%20function(cmp)%7B%7D)%3B%0A%09%09%7D)%3B%0A%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</apex:page>

Figure 4 – Completed VF Page

Require Assistance with a Lightning Component?

Are you contemplating integrating a new Lightning component into your Visualforce pages? Our team and I are here to assist you. Feel free to inquire in the comments below or reach out to us directly.

Related Posts