How to Call Lightning Component from Visualforce Page

Hi Friends,

Today we will learn "How to Call Lightning Component from Visualforce Page". I have added comments on the main code for your understanding. I have used this Vsualforce Page on the Salesforce button.

Let's Start

1. The button will open under the Contact object.
2. The child object is "Case".

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<apex:page standardController="Case" standardStylesheets="false" showHeader="false"> <!-- Include a JavaScript file in your Visualforce page --> <apex:includeLightning /> <div id="lightning" /> <script> //"CaseApp" is your Lighning Component App Name (This is mandatory to create App) $Lightning.use("c:CaseApp", function() { // "c:caseComponent" is your Lightning Component Name // which is using in your Lightning Component App $Lightning.createComponent("c:caseComponent", { //"recordId" - This is your component attribute & "{!Case.Id}" is your Object Id "recordId" : "{!Case.Id}", }, "lightning", function(cmp) { // do some stuff }); }); </script> </apex:page>

3. The button code is below.

On our next blog post we will discuss that how to we can call the Lightning Component on the Salesforce Custom Tab. 

Thank You for Come to my blog ....

1. Create Re-Usable Custom Lookup In Salesforce Lightning Component

2. How to Create Custom Lookup In Lightning Component

How to bind fields as Output in Lightning Component

Hi, friends and Gurus,

Welcome to my SFDC4Students blog.

After a long time, I came up with Lightning Component in Salesforce. Today we will discuss how to bind fields as output in Lightning Component. This is a very simple code that I give you. So let's go.

This is the design of our Lightning Component.

Step 1 - Create A Class named "fetchOrgInfoController" to get the Org data.

1 2 3 4 5 6 7 8 9

public class fetchOrgInfoController{ @AuraEnabled public static Organization fetchOrgInfo() { // Query on "Organization/Company" object and get the fields which you want to show on your Lightning Component Organization objOrg = [SELECT City,Country,Name,PostalCode,Street FROM Organization limit 1]; return objOrg; } }

Step 2 - Create Lightning Component named "SFDC4StudentsOutput"

<!-- Use the above Controller --> <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" controller="fetchOrgInfoController" access="global" > <!-- The "handler" will call the "onLoad" JavaScript Controller --> <aura:handler name="init" value="{!this}" action="{!c.onload}" /> <!-- The "orgInfo" attribute is used to hold the query record of the Apex Class (Please go to helper for understand) --> <aura:attribute name="orgInfo" type="Sobject" default=""/> <!-- The Component Design Start from Here --> <div class="slds-box"> <div class="slds-box"> <p class="slds-text-heading_medium"> <b>Please Follow My Blog</b></p> <p> On this Blog you can find the simple and understandable code.</p> </div> <div class="slds-card" style="background-color:#7d89a0;color:#f9fbff;padding-bottom: 1%;padding-top: 1%;"> <p class="slds-text-align_center"> SFDC4Students" is the best blog for the new students of Salesforce.</p> </div> <br/> <div class="slds-box"> <p class="slds-text-align_center"> If you want to know more easy things to understand on this blog then please click <a href="#" style="color:#6f9cf7;">Go to Easy and Best things</a> </p> </div> <br/> <div class="slds-grid slds-gutters"> <div class="slds-col slds-size_6-of-12"> <lightning:input name="OrgName" readonly="true" value="{!v.orgInfo.Name}" label="Organization Name" /> <lightning:input name="OrgCountry" readonly="true" value="{!v.orgInfo.Country}" label="Organization Country" /> <lightning:input name="OrgCity" readonly="true" value="{!v.orgInfo.City}" label="Organization City" /> </div> <div class="slds-col slds-size_6-of-12"> <lightning:input name="OrgStreet" readonly="true" value="{!v.orgInfo.Street}" label="Organization Street" /> <lightning:input name="OrgPostalCode" readonly="true" value="{!v.orgInfo.PostalCode}" label="Organization Postal Code" /> </div> </div> </div> <!-- The Component Design End Here --> </aura:component>

Step 3 - Create a JavaScript Controller named "SFDC4StudentsOutputController"

1 2 3 4 5 6

({ // This JavaScript Controller function will call the Helper named "onloadHelper" onload : function(component, event, helper) { helper.onloadHelper(component, event, helper); } })

Step 4 - Create a JavaScript Helper named "SFDC4StudentsOutputHelper"

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

({ // This JavaScript Helper function will call the Apex method named "fetchOrgInfo" onloadHelper : function(component, event, helper) { // Call the Apex Method var action = component.get("c.fetchOrgInfo"); // The response code start which verify that the Apex Method has called successfully action.setCallback(this, function(response){ if(response.getState() === "SUCCESS") { // "orgInfo" is the Component attribute which hold the Apex Method return value component.set("v.orgInfo",response.getReturnValue()); } }); // $A.enqueueAction(action) adds the server-side controller action to the queue of actions to be executed. $A.enqueueAction(action); } })

Step 5 - Create an App named "SFDC4StudentsOutputApp"

1 2 3

<aura:application extends="force:slds"> <c:compSFDC4StudentsOutput/> </aura:application>

Please develop this Component from your side, when you write a code yourself then you can learn else copy paste doesn't mean.

In the next post, we will discuss some points of Lightning Component that you have to need to know.

Thanks for come to my Blog. If this post is helpful to you then share and follow to get new coming SFDC4Students blog posts.