Unable to fire toast events and apex controller methods from a lightning component called from a visualforce page through ltng:outApp

Question

I am stuck with a simple requirement that turned complex altogether. I simply had to get rid of a javascript button to make it lightning compatible. I decided to create a lightning component and embedding it to quick action and finally adding it to the layout. Unfortunately, feed tracking was enabled for my object that is why quick action was added to feed, rather than on the buttons section, which I did not want.

So, I moved to an approach where my lightning component be called from a visualforce page using a lightning:out app.

However, the issue now is, although my component is getting called, but all the calls to the apex controller are now blocked from this lightning component, stating that the action is undefined. I am event not able to show a simple toast, as it shows the toast event as undefined.

The error which I am getting is:

This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'setParams' of undefined] Callback failed: apex://SyncArticlesController/ACTION$executeAction Failing descriptor: {markup://c:SyncArticlesComponentCase}

On using console.log statements, the action value was shown as : action - SecureAction: [object Object]{ key: {"namespace":"c"} }

My code is as below :

Visualforce Page :

<apex:page standardController="Case" >
    
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:SyncArticlesApplication", function() {
            $Lightning.createComponent("c:SyncArticlesComponentCase",
                    {"recordId" : "{!$CurrentPage.parameters.id}"},
                    "lightning",
                    function(cmp) {
                        console.log('>>>>> App is hosted');
                    });
        });
    </script>
</apex:page>

Lightning App

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

Lightning Component

<aura:component controller="SyncArticlesController" implements="lightning:actionOverride,force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickActionWithoutHeader,force:hasSObjectName" access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="recordId" type="Id" />
</aura:component>

JS Controller

    ({
        doInit : function(component, event, helper) {
            console.log('In here');
            var action = component.get("c.executeAction");
            console.log('recordId'+component.get("v.recordId"));
            console.log('action'+action);
            action.setParams({
                "objCaseId": component.get("v.recordId")
            });
            // Add callback behavior for when response is received
            action.setCallback(this, function(response) {
                var state = response.getState();
                if (component.isValid() && state === "SUCCESS") {
                    //component.set("v.showMsg", response.getReturnValue());
                    if(response.getReturnValue() != null && response.getReturnValue()!= '') {
                        var toastEvent = $A.get("e.force:showToast");
                        toastEvent.setParams({
                            "title": "Info",
                            "message": response.getReturnValue(),
                            "type": "warning",
                            "duration":"5000"
                        });
                        toastEvent.fire();
                    }
                    else {
                        var toastEvent = $A.get("e.force:showToast");
                        toastEvent.setParams({
                            "title": "Success!",
                            "message": "The record has been updated successfully."
                        });
                        toastEvent.fire();
                        var dismissActionPanel = $A.get("e.force:closeQuickAction");
                        dismissActionPanel.fire();
                    }
                }
                else {
                    console.log('Some error occured');
                }
            });
        
            // Send action off to be executed
            $A.enqueueAction(action);
            
            /*var toastEvent = $A.get("e.force:showToast");
            console.log('toastEvent'+toastEvent);
            toastEvent.setParams({
                "title": "Success!",
                "message": "The record has been updated successfully."
            });
            toastEvent.fire();
            var dismissActionPanel = $A.get("e.force:closeQuickAction");
        dismissActionPanel.fire();*/
    }
    
})

Apex Controller

public class SyncArticlesController {
    
    @AuraEnabled
    public static String executeAction(String objCaseId) {
        String strDMLError = '';
        Case objCaseNew = [Select Id, CaseNumber, Article_Descriptions__c From Case Where Id =: objCaseId LIMIT 1];
        if(objCaseNew != null) {
            String result = FindCaseArticlesButton.findArticles(objCaseNew.Id);
            System.debug('Debug Log for result'+result);
            
            objCaseNew.Article_Descriptions__c = result;
            try {
                Database.SaveResult objDSR = Database.update(objCaseNew, false);
                if(!objDSR.isSuccess()) {
                    if(!objDSR.getErrors().isEmpty()) {
                        for(Database.Error objError : objDSR.getErrors()) {
                            strDMLError+= objError.getMessage();
                        }
                    }
                }
            }
            catch(Exception ex) {
                System.debug('Debug Log for Exception'+ex+' at Line: '+ex.getLineNumber());
            }
        }
        return strDMLError;        
    }
}

Please advise.

Answer 1

force:showToast does not work in Lightning Out. You'll need to fake your own toast. Check the documentation to see if a component is supported. In the upper-right corner of components that support Lightning Out, it will be listed under "Experiences." For example:

For the second problem, you need to include your dependencies in the ltng:outApp as a dependency, or they won't work right:

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:SyncArticlesComponentCase" />
</aura:application>

Note that you only need to include the top-level dependency. Derived dependencies (such as the controller) will be calculated automatically by the platform.