Aller au contenu
  • billets
  • commentaires
  • vues
    3 027

How to Place Lightning Components in Visualforce Pages

Soliant Consulting

248 vues

The purpose of this blog is to show you how to add Lightning components to Visualforce pages.  I am assuming that you already have basic knowledge of VF pages and also are able to create a basic Lightning component that you can view via a Lightning app.

Start off by creating a couple new Lightning components and a Lightning app to hold them.  I just used a couple of Lightning components I previously created when learning how to create Lightning components.  helloWorld.cmp (see Figure 1) and helloPlayground.cmp (see Figure 2).  I then added an app to hold them called ‘’.


Hello World Lightning component

Figure 1


Hello Playground

Figure 2

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

Notice the ‘xtends=”ltng:outApp”’ in the above app.  What this does, is says that this app can be hosted outside of lightning but will continue to use the Salesforce Lightning Design System (SLDS) styling.  You can instead choose to not use the SLDS styling if you use ‘ltng:outAppUnstyled’ instead.

In my VF page, we have a special include for Lighting with:

<apex:includeLightning />

We also need to create a section of the code for the Lightning components to appear in, so a simple one here is:

<div id="lightning" />

It looks empty, but we will see to that with some javascript later.

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

Here we use the new app that I created.  If you run your page at this point, nothing will happen.  The page requires you to manually tell components where to appear.  Notice the ‘c:’ in the expression.  This refers to the default namespace.  If your org has a different namespace than the default, you will need to change the ‘c’ portion to whatever that is.

Inside the function that we just created, we add some more lines:

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

This actually reveals the component and places it inside the div with the id of ‘lightning’.  Also, you will notice that it only shows one of the components at this point.  To add in the next component is pretty simple:

$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 on the components showing up since they are revealed via 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 component in front of the others.

Screenshot of both apps running

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" />

		$Lightning.use("c:harnessApp", function()
			{}, helloWorld", function(cmp){});
			{}, “helloPlayground", function(cmp){});
Screenshot of the completed page

Figure 4 – Completed VF Page

The post How to Place Lightning Components in Visualforce Pages appeared first on Soliant Consulting.

Afficher la totalité du billet

1 Commentaire

Commentaires recommandés

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant