0
Hi I have created a VF page to call a Lightning component. The function of the lightning component is to display value on it based upon the record ID in Lightning page.
Now in Classic UI we are trying to add VF Button when user clicks it it should get the current page ID and show the lightning component. But , when I click on the button the new screen opens and it keeps on loading without displaying the value. At the bottom of the screen we see the error "Lightning out App error in callback function" but we are not loading any files.


VF Page:

<apex:page StandardController="SG_ProductBook__c" >
    <apex:includeLightning />
<div  id="LightningCompContainer" />
<script>
    $Lightning.use("c:SG_ProductComponentApp", function() {
        $Lightning.createComponent("c:SG_ProductComponent", {
        },
        "LightningCompContainer",
        function(component) {
           component.set("v.bookRecord.Id",'{!$CurrentPage.parameters.id}');
        });
    });

</script>
</apex:page>

Lightning App:

<aura:application access="GLOBAL" extends="ltng:outApp" >

 <aura:dependency resource="c:SG_ProductComponent"/>
</aura:application>

Lightning Component:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,force:appHostable" controller="SG_ProductComponentController" access="global">   

<!-- Attributes -->

<aura:attribute name="communityName" type="String"/>
<aura:attribute name="accessLevel" type="Integer"/>
<aura:attribute name="loading" type="Boolean" default="true"/>
<aura:attribute name="productRecord" type="Object"/>
    <aura:attribute name="bookRecord" type="Object"/>
<aura:attribute name="categories" type="Array"/>
<aura:attribute name="allLines" type="List"/>
<aura:attribute name="versions" type="List"/>
<aura:attribute name="releaseDates" type="Map"/>
<aura:attribute name="selectedVersion" type="Integer"/>
<aura:attribute name="selectedVersionIsDraft" type="Boolean" default="false"/>
<aura:attribute name="showVersionButton" type="Boolean" default="false"/>
<aura:attribute name="selectedVersionStatus" type="String" default="Release"/>
<aura:attribute name="AccIDFromVfPage" type="string"/>

<lightning:button label="Check ID from Vf" onclick="{!c.doAction}"/>

<!-- Handlers and declared events -->    
<aura:handler name="init" value="{! this }" action="{! c.onInit }"/>
<aura:handler name="change" value="{! v.selectedVersion }" action="{! c.onChangeSelectedVersion }"/>

<!-- Libraries -->
<lightning:overlayLibrary aura:id="overlayLib"/>
<lightning:notificationsLibrary aura:id="notifLib"/>

<!-- Display a lightning card with details about the record -->
<div class="Record Details"> 
    <aura:renderIf isTrue="{! v.loading }">
        <lightning:spinner alternativeText="Loading" variant="brand"/>
    </aura:renderIf>
    <div class="slds-grid slds-grid_align-space slds-gutters slds-wrap slds-grid_vertical-align-center">
        <div class="slds-col">
            <aura:renderIf isTrue="{! !v.selectedVersionIsDraft || v.accessLevel >= 1 }"><lightning:button label="PDF Export" iconName="utility:print" onclick="{! c.handlePrint }"/></aura:renderIf>
            <lightning:button label="Compare" iconName="utility:replace" onclick="{! c.handleCompare }"/>
            <aura:renderIf isTrue="{! v.selectedVersionIsDraft &amp;&amp; v.accessLevel >= 1 }"><lightning:button label="Edit Properties" iconName="utility:edit" onclick="{! c.handleEdit }"/></aura:renderIf>
            <aura:renderIf isTrue="{! v.accessLevel >= 1 }"><lightning:button label="Clone" iconName="utility:copy" onclick="{! c.handleClone }"/></aura:renderIf>
        </div>
        <div class="slds-col slds-col_bump-left">                
            <div class="slds-grid slds-grid_vertical">
                <div class="slds-col slds-align_absolute-center" style="margin-bottom: 5px">
                    <span class="{! 'slds-badge '+v.selectedVersionStatus }">{! v.selectedVersionStatus }</span>
                </div>
                <div class="slds-col">
                    <aura:renderIf isTrue="{! v.showVersionButton }">
                        <lightning:button label="{! v.selectedVersionIsDraft ? 'Release version' : 'New Version' }" iconName="{! v.selectedVersionIsDraft ? 'utility:check' : 'utility:new' }" onclick="{! c.handleVersionButton }"/>
                    </aura:renderIf>
                </div>
            </div>                                  
        </div>
        <aura:renderIf isTrue="{! !(v.accessLevel == 0 &amp;&amp; v.bookRecord.SG_HistoryVersionNumber__c == 0) }">
            <div class="slds-col">
                <lightning:select name="select" label="Select a Version" value="{! v.selectedVersion }">
                    <aura:iteration items="{! v.versions }" var="ver">
                        <option text="{! ver.label }" value="{! ver.id }" selected="{! ver.selected }"/>
                    </aura:iteration>
                </lightning:select>
            </div>
        </aura:renderIf>
    </div> 
    <lightning:card>
        <c:SG_ProductComponent_Card bookRecord="{! v.bookRecord }"/> 
        <aura:iteration items="{! v.categories }" var="aCategory" >
            <c:SG_ProductComponent_Category category="{! aCategory.SG_ProductProperty__r.SG_Category__c }" productBookId="{! v.bookRecord.Id }" selectedVersion="{! v.selectedVersion }" lines="{! v.allLines }"/>
        </aura:iteration>
        <c:SG_ProductComponent_CalculatedFields productBookId="{! v.bookRecord.Id }" lines="{! v.allLines }"/>
    </lightning:card>
</div> 
</aura:component>

Controller:

({
/*
 *  Component initialization 
 *  Launches a different function depending on what type of page the component is displayed
 */
onInit : function(component, event, helper) {
    helper.getAccessLevel(component, event, helper);               
},

/*
 *  On selection of a version, requests the property values for said version
 */    
onChangeSelectedVersion : function(component, event, helper) {
    if(component.get('v.selectedVersion') != '' && component.get('v.bookRecord.Id') != null){      
        helper.setSelectedVersionStatus(component, event, helper);       
        helper.setShowButtons(component, event, helper); 
        helper.getProductPropertyValues(component, event, helper);       
    }       
}, 

/*
 *  Handles opening a new window previewing the product book as pdf
 */
handlePrint : function(component, event, helper) {        
    var url;
    if(component.get('v.communityName') != null) url = location.origin + '/' + component.get('v.communityName') + '/apex/SG_PrintBook?Id=' + component.get("v.bookRecord.Id") + '&version=' + component.get("v.selectedVersion");   
    else url = location.origin + '/apex/SG_PrintBook?Id=' + component.get("v.bookRecord.Id") + '&version=' + component.get("v.selectedVersion");         
    window.open(url, '', '');     
},    

/*
 *  Handles opening a modal for selecting the compare target
 */    
handleCompare : function(component, event, helper) {
    var modalBody;
    $A.createComponent("c:SG_ProductComponent_CompareModal", {"bookRecord": component.get("v.bookRecord"), "accessLevel": component.get("v.accessLevel")},
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: "Select a Product book to compare to",
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "slds-modal_large"
                })
            }                               
        });
},

/*
 *  Handles opening a modal for selecting a new name for cloning
 */    
handleClone : function(component, event, helper) {
    var modalBody;
    $A.createComponent("c:SG_ProductComponent_Clone", {"bookRecord": component.get("v.bookRecord"), "accessLevel": component.get("v.accessLevel"), "version": component.get("v.selectedVersion")},
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: "Select a name for the new Product book",
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "slds-modal_small"
                })
            }                               
        });
},

/*
 *  Handles opening a modal for editing values
 */    
handleEdit : function(component, event, helper) {
    var modalBody;
    $A.createComponent("c:SG_ProductComponent_EditModal", {"bookRecord": component.get("v.bookRecord"), "properties": component.get("v.allLines")},
        function(content, status) {
            if (status === "SUCCESS") {
                modalBody = content;
                component.find('overlayLib').showCustomModal({
                    header: "Edit "+component.get("v.bookRecord.Name"),
                    body: modalBody, 
                    showCloseButton: true,
                    cssClass: "slds-modal_large",
                    closeCallback: function() {
                       helper.getProductPropertyValues(component, event, helper);
                   }
                })
            }                               
        });
},
        
/*
 *  Handles operations to increment the release version number
 */      
handleVersionButton : function(component, event, helper) {
    if(component.get('v.selectedVersion') == component.get('v.bookRecord.SG_ReleaseVersionNumber__c')+1) helper.releaseVersion(component, event, helper);
    else helper.createNewVersion(component, event, helper);        
}, 
 
doAction : function(component, event, helper) {

    var accIdFromVf=component.get("v.bookRecord.Id");
    alert('Id of record from Vf page'+accIdFromVf);
} })

Please Advice.