Fire Events From Lightning Component and Handle in VisualForce Page

Lightning Event:

<aura:event type="APPLICATION" description="Sample Event">
    <aura:attribute type="string" name="msg" />

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <!--Declare Aura Event-->
    <aura:registerEvent name="sampleEvent" type="c:SampleEvent" />
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.doAction}"/>
    <!--Component End-->

Lightning Controller:

    doAction : function(component, event, helper) {
        //Get Event
        var sampleEvent = $A.get("e.c:sampleEvent");
        //Set Parameter Value
        sampleEvent.setParams({"msg":"Hello World!!"});
        //Fire Event;

Lightning App:

<aura:application extends="ltng:outApp" access="global">
    <!--Lightning component-->
    <aura:dependency resource="c:SampleComponent"/>

Visualforce Page:

<apex:page sidebar="false" showHeader="false">
    <apex:includeLightning />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer" />
    <script type="text/javascript">
    //Create Lightning Component
    $Lightning.use("c:SampleApp", function() {
        $Lightning.createComponent("c:SampleComponent", { },"LightningContainer",
                                   function(component) {
                                       $A.eventService.addHandler({ "event": "c:SampleEvent", "handler" : getMessage});
    //Function to call Lightning Component Function
    var getMessage  = function(event){
        var msg = event.getParam("msg");


Apex Callable Interface

In Winter’19 release Salesforce introduced Callable interface in apex. The interface enables developers to use a common interface to build loosely coupled integrations between Apex classes or triggers, even for code in separate packages.

This interface has one method call(String action, Map args). It helps developer to call a method dynamically with the help of “Type” class.


public class SampleCallable implements Callable {
    //Method 1
    public String method1(String stringValue) {
        return 'Welcome ' + stringValue;
    //Method 2
    public Decimal method2(Integer integerValue) {
        return integerValue + 100;
    //Callable interface method
    public Object call(String action, Map<String, Object> args) {
        switch on action {
            when 'method1' {
                return this.method1((String)args.get('stringValue'));
            when 'method2' {
                return this.method2((Integer)args.get('integerValue'));
            when else {
                return null;


Callable c = (Callable)Type.forName('SampleCallable').newInstance();
system.debug('method1', new map<String,Object>{'stringValue' => 'Biswajeet'}));
system.debug('method2', new map<String,Object>{'integerValue' => 5}));

Cacheable Apex Method

To improve the performance of the lightning component cache Salesforce introduced storable (cacheable) in Winter’19 release. In API version 44.0 and later, you can mark an Apex method as storable (cacheable) instead of using setStorable() on every JavaScript action that calls the Apex method to centralize your caching notation for a method in the Apex class.

Here is an example to cache data returned from an Apex method for lightning component, annotate the Apex method with @AuraEnabled(cacheable=true).

Apex Class:

public class SampleAuraController {
    @AuraEnabled(cacheable = true)
    public static List<Account> getDirectCustomerAccount() {
        List<Account> accList = new List<Account>();
        accList = [SELECT Id, Name, Type, Industry, Phone
                   FROM Account WHERE Type = 'Customer - Direct'];
        return accList;

Lightning Component:

<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Declare Event Handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <!--Declare Attributes-->
    <aura:attribute name="accList" type="Account[]"/>
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
                <tr class="slds-line-height_reset">
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Account Name">Account Name</div>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Account Type">Account Type</div>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Industry">Industry</div>
                    <th class="slds-text-title_caps" scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                <aura:iteration items="{!v.accList}" var="acc">
                    <tr class="slds-hint-parent">
                        <th data-label="Account Name" scope="row">
                            <div class="slds-truncate" title="{!acc.Name}"><a href="javascript:void(0);" tabindex="-1">{!acc.Name}</a></div>
                        <td data-label="Account Type">
                            <div class="slds-truncate" title="{!acc.Type}">{!acc.Type}</div>
                        <td data-label="Industry">
                            <div class="slds-truncate" title="{!acc.Industry}">{!acc.Industry}</div>
                        <td data-label="Phone">
                            <div class="slds-truncate" title="{!acc.Phone}">{!acc.Phone}</div>
    <!--Component End-->

Lightning JS Controller:

    doInit : function(component, event) {
        var action = component.get("c.getDirectCustomerAccount");
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS"){
                var result = response.getReturnValue();
                component.set("v.accList", result);