Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Madhusudan Singh 19Madhusudan Singh 19 

lightning component which is used in visualforce is not working

Not able to use Lightning Component in VF, below is my code

ComponentForVisualForce.cmp 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
	<lightning:button label="GoToRecord" title="Neutral action" onclick="{! c.handleClick }"/>
</aura:component>
ComponentForVisualForceController.js 
({
    handleClick : function(component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt .setParams({
            "recordId": "5006F00001w4IH7QAM",
            "slideDevName": "detail"
        });
        navEvt.fire();
    }
})
Created LightningOut Application as below
ApplicationForVisualForce.app 
<aura:application extends="ltng:outApp" >
    <aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
    <aura:dependency resource="c:ComponentForVisualForce"/>
</aura:application>
Below is the VisualForce Which I am consuming it
ConsumeComponentForVisualForce.vfp 
<apex:page >
    <apex:includeLightning />   
    <div id="LcDisplayId"></div>     
 <script>
    $Lightning.use("c:ApplicationForVisualForce", function() {
    $Lightning.createComponent("c:ComponentForVisualForce",
    { },
   "LcDisplayId",
    function(component) { });
 });
 </script>
</apex:page>

Regards
Madhusudan Singh
 
Shivankur NaikwadeShivankur Naikwade
Hi Madhusudan Singh,

Try editing your code with these lines :

ConsumeComponentForVisualForce.vfp 
<apex:page >
<apex:includeScript value="/lightning/lightning.out.js" />
    <apex:includeLightning />   
    <div id="LcDisplayId"></div>     
 <script>
    $Lightning.use("c:ApplicationForVisualForce", function() {
    $Lightning.createComponent("c:ComponentForVisualForce",
    { },
   "LcDisplayId",
    function(component) { });
 });
 </script>
</apex:page>

And take a look on this article as well:

http://peterknolle.com/lightning-components-in-visualforce/

Hope it helps..


Thanks,
Shivankur Naikwade

 
Madhusudan Singh 19Madhusudan Singh 19
This is also not working. I am able to do console logs and javascript alert but not able to navigate
Shivankur NaikwadeShivankur Naikwade
Try firing the navigation event inside helper js:

Controller: 
({
    handleClick : function(component, event, helper) {
        helper.gotoDetail(component);
    }
})

Helper: 
({
    gotoDetail : function() {
     var navEvt = $A.get("e.force:navigateToSObject");
        navEvt .setParams({
            "recordId": "5006F00001w4IH7QAM",
            "slideDevName": "detail"
        });
        navEvt.fire();
    }
})