function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SFDC Beginner745SFDC Beginner745 

how to call my Lightning Component from vf page " and why we use Extends in LightningApp

bhanu_prakashbhanu_prakash
Hi,
Mark as best answer, If it resloves !!
if you need to call lightning component in vf page, in your vf page you need to add <apex:includeLightning /> and add script in vf page and try to call component in script  c:lcvfTest  replace with your component name 
 
<apex:page>
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:lcvfTest", function() {
          $Lightning.createComponent("ui:button",
          { label : "Press Me!" },
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>
check here : https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_visualforce.htm

Mark as resloved if it helps :) :)
Thanks, 
Bhanu Prakash
visit ForceLearn.com

 
Ajay K DubediAjay K Dubedi
Hii Sfdc,

Please refer the below code.

your VF PAge :-

<apex:page sidebar="false" showHeader="false">
    <head>
        <title>Mapping</title>
        <apex:includeLightning />
        <style>
            * {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
    <div id="mappingDiv">
    </div>
    <script>
        $Lightning.use("c:LeadpageApp", function () {//Paste you LightningApp NAme here 
            $Lightning.createComponent(
                "c:LeaveComponent",//Paste your Component Name here
                       {},
                "mappingDiv",//You can change this as you want
                    function (cmp) {
                    }
            );
        });
    </script>
    </body>
</apex:page>

LightningApp:-

<aura:application extends="ltng:outApp" access="global">
    <!--  Allow lightning markup <aura:application attribute 'extends' to support more than one apps
For eg: <aura:application access="global" extends="force:slds, ltng:outApp" >
While extends support only one app, we are unable to include a lightning app in visualforce pages which extends "force:slds"
   -->
</aura:application>

Please mark it as a best if it help you.

Thanks,
Ajay Dubedi