+ Start a Discussion
DaAyDaAy 

How to make Lightning Component events work in Lightning Out

Hi,

I wanted to make event work in Lightning out when Lightning component is embedded into a Visualforce page. When I include <aura:dependency resource="markup://force:*" type="Event"/> in the Lightning dependency app I get the following error

An internal server error has occurred
Error ID: 268240336-7606 (1856451655)

org.auraframework.throwable.quickfix.InvalidDefinitionException: No enum constant org.auraframework.def.DefDescriptor.DefType.Event
at .(0AdA00000004Q0n:3)
at .(0AdA00000004Q0n:3)
at org.auraframework.impl.root.DependencyDefImpl.<init>(DependencyDefImpl.java:55)
at org.auraframework.impl.root.DependencyDefImpl$Builder.build(DependencyDefImpl.java:151)
at org.auraframework.impl.root.parser.handler.DependencyDefHandler.createDefinition(DependencyDefHandler.java:93)....

Following is the code I am using for the dependency app 

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="ui:button"/>
    <aura:dependency resource="markup://force:*" type="EVENT"/>
</aura:application>  


Following is the Visualforce page code 

<apex:page >
    <apex:includeLightning />

    <div id="lightning" />

    <script>
       $Lightning.use("c:lcvTest", function() {
          $Lightning.createComponent("c:spotlightAccountSetting",
          { headingLabel : "Press Me!" , headingText : "Press Me!" },
          "lightning",
          function(cmp) {
              
             ///
          
          });
        });
    </script>
</apex:page>

help would be appreciated 

Thanks
Pramodh KumarPramodh Kumar
Hi DaAy,

Inorder to work event in lightning out, you have handle those methods, In my example I am handling the force:navigateToSObject,

Even if you are in Lightning and opening the vfpage, it acts like classic so you have to handle those methods by eventservice handler

Here is the small example for the Please take a look

 
<script>
    var recordId = '{!Account.Id}';
    var myUserContext = "{!$User.UITheme}";
   
    $Lightning.use("c:orgSuspendLightningOut", function () {
        $Lightning.createComponent("c:orgSuspendLightningCmp", {
                recordId: recordId,
                suspensionType : 'orgSuspension'
            },
            "lightning",
            function (cmp) {
                
                $A.eventService.addHandler({
                    event: 'force:navigateToSObject',
                    handler: function (event) {
                        if (myUserContext == 'Theme4t' || myUserContext == 'Theme4d') {
                            // The Visualforce page is in S1 or Lightning Experience
                            sforce.one.navigateToSObject(event.getParams().recordId);
                        } else if (myUserContext == 'Theme3') {
                            // The Visualforce page is  running in Classic
                            window.parent.location = '/' + event.getParams().recordId;
                        } else {
                            console.log("Unsupported theme");
                        }
                    }
                });
            }
        );
    });


Let me know if you have any questions

Thanks
Pramodh