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
Allen2Allen2 

I've embedded lightning component in vf page to show the same functionality in classic but getting error on click of button

I've in build the lightning component and created a buttoon like below:
<div class="okButtonClass">
            <aura:if isTrue="{!!v.showSpinner}">
            <ui:button label="OK" press="{!c.okBtn}"/>
            </aura:if>
        </div>
Here is the controller.js file of lightnign component:
okBtn : function(component, event, helper) {
        // Close the action panel
        var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();
    }

Applied css as well but not able to change the background color and text color of button. Here us the css file:
 

.THIS .okButtonClass{
    position: relative;
    display: inline-block;
    float: right;
    background-color: #008CBA;
    color: white;
}

Created the lightning application:
 

<aura:application extends="ltng:outApp" access="GLOBAL" >
	<aura:dependency resource="c:OpportunityContainer"/>
</aura:application>
Below is my vf page:
<apex:page standardController="Opportunity"  showHeader="false">   
    <apex:includeLightning />
    <div id="lightning">
        <script>
        $Lightning.use("c:OppButtonApp", function(){
            $Lightning.createComponent("c:OpportunityContainer",{"recordId":"{!$CurrentPage.parameters.id}"},
                                       "lightning",function(cmp){
                                       });
        });
        </script>
    </div>
</apex:page>

I'm calling this vf page through one custom button and working fine.

But once we are clicking on the button created in lightning component through this vf page it's showing the below error:

This page has an error. You might just need to refresh it. Action failed: c:OpportunityContainer$controller$okBtn [Cannot read property 'fire' of undefined] Failing descriptor: {c:OpportunityContainer$controller$okBtn}

User-added image
Once we're clicking on this OK button on page it's throughing error. It's not able to find the controller.js.

Please anyone can help me to short out this error?
ANUTEJANUTEJ (Salesforce Developers) 
Hi Allen,

I have used the same code as you have mentioned but I changed <aura:dependency resource="c:OpportunityContainer"/> to <c:testcomponentsobjecttype /> as the one that you have given was not working for me [<aura:dependency resource="c:OpportunityContainer"/>] and instead of calling a function on button click I have just mentioned an alert with hello world in it and it was working fine I would request you to check the function and the above line in the lightning application as they seem to be having the problem.

In case if the above mentioned comment was helpful in troubleshooting I would request you to please close the thread by marking this as the best answer so that it can be useful to others in the future and also helps in keeping the community clean.

Regards,
Anutej
Allen2Allen2
Hi Anutej,

In lightning it's working as expected. I don't want alert prompt that's the reason created vf page as we need to show the error msg at different location with different font color. So I went for this approach.
There should be something to connect vf page with Lightning component to work.

Btw thanks for looking into it.

Thanks!
Allen
Allen2Allen2
I've figured it out and added below line in my lightning application:
<aura:dependency resource="markup://force:*" type="EVENT"/>
The issue got ressolved. I'm not getting the error anymore but the button isn't workin in classic.

Thanks!
Allen