Tag Archives: Visualforce Page

Invoke Visualforce Page Javascript Method From Lightning Component

Lightning Component:

<!--SampleComponent.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <!--Declare Attributes-->
    <aura:attribute name="vfMsgMethod" type="object" description="this attribute is for visualforce page javascript method"/>
    
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.doAction}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning Controller:

({
    doAction : function(component, event, helper) {
        var msg = 'Welcome to Salesforce Ohana';
        var msgMethod = component.get("v.vfMsgMethod");
        msgMethod(msg, function(){
            //handle callback
        });
    }
})

Lightning App:

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

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", { 
            vfMsgMethod : getMessage, //Method to call from lightning component
        },"LightningContainer", function(component) {
            console.log('Component created');
        });
    });
    
    //Function to call from Lightning Component
    function getMessage(welcomeMsg){
        alert(welcomeMsg);
    }
    </script>
</apex:page>

Output:

Invoke Lightning Component Methods From Visualforce Page

We can use aura:method to invoke lightning controller methods from visualforce page. The below example is to call Lightning Component methods from visualforce page.

Lightning Component:

<!--SampleComponent.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <!--Aura Method-->
    <aura:method name="welcomeMsgMethod" action="{!c.doAction}" access="global"> 
        <aura:attribute name="message" type="Object" /> 
        <aura:attribute name="name" type="String"/> 
    </aura:method>
    
    <!--Declare Attributes-->
    <aura:attribute name="msg" type="String"/>
    
    <!--Component Start--> 
    <div class="slds-m-around_xx-large">
        <!--Print Welcome Message--> 
        {!v.msg}
    </div>
    <!--Component End-->
</aura:component>

Lightning Controller:

({
    doAction : function(component, event, helper) {
        //Get Parameters
        var params = event.getParam('arguments');
        if (params) {
            //Get Welcome message parameter
            var msg = params.message.message;
            var developerGroup = params.message.developerGroup;
            //Get name parameter
            var name = params.name;
            //Set welcome message and name
            component.set("v.msg", name + ' ' + msg + ' ' + developerGroup);
        }
    }
})

Lightning App:

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

Visualforce Page:

<apex:page>
    <apex:includeLightning />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer" />
    
    <script type="text/javascript">
    var component; //Variable for Lightning Out Component
    //Create Lightning Component
    $Lightning.use("c:SampleApp", function() {
        $Lightning.createComponent("c:SampleComponent", { },
                                   "LightningContainer",
                                   function(cmp) {
                                       component = cmp;
                                       console.log('Component created');
                                   });
    });
    
    //Method to call Lightning Component Method
    var getWelcomeMessage = function(){
        component.welcomeMsgMethod({message : "Welcome to Salesforce Ohana", developerGroup: "Bengaluru"}, "Biswajeet Samal");
    }
    </script>
    
    <apex:form>
        <!--Button to call Javascript method-->
        <apex:commandButton value="Get Welcome Message" onclick="getWelcomeMessage();return false;"/>
    </apex:form>
</apex:page>

Output:

Pass Visualforce Page URL Parameter To Lightning Component

Lightning Component:

<!--SampleComponent.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
    <!--Declare Attributes-->
    <aura:attribute name="accountId" type="String" />
    <!--Declare Handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {
        var accountId = component.get("v.accountId");
        alert('Account Id-' + accountId);
    }
})

Lightning App:

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

Visualforce Page:

<apex:page sidebar="false" showHeader="false">
    <apex:includeLightning />
    <!--Lightning Container-->
    <div style="width:100%;height:100px;" id="LightningContainer"/>
    
    <script type="text/javascript">
    //get account Id from URL
    var accountId = "{!$CurrentPage.parameters.id}";
    
    //Create Lightning Component
    $Lightning.use("c:SampleApp", function() {
        $Lightning.createComponent("c:SampleComponent", 
                                   { "accountId" : accountId }, //Pass Parameter
                                   "LightningContainer", function(component) {
                                       console.log('Component created');
                                   });
    });
    </script>
</apex:page>

URL : https://yourorgurl/apex/SampleVFPage?id=0010I00001dPxYL

Fire Events From Lightning Component and Handle in VisualForce Page

Lightning Event:

<!--SampleEvent.evt--> 
<aura:event type="APPLICATION" description="Sample Event">
    <aura:attribute type="string" name="msg" />
</aura:event>

Lightning Component:

<!--SampleComponent.cmp--> 
<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}"/>
    </div>
    <!--Component End-->
</aura:component>

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
        sampleEvent.fire();
    }
})

Lightning App:

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

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");
        alert(msg);
    };
    </script>
</apex:page>

Output:

Google Charts in Visualforce Page

Salesforce has built in component for charts in visualforce page, but the limitation is some types of charts are not available. In such cases, we can use Google Chart for different types of charts. Here is an example of Google Chart in visualforce page.

  • You can find the list of all Google charts at Google Chart Gallery.
  • Find the right chart as per your requirement and go through the documentation for the data requirements of the chart.
  • You can download the Google Chart Javascript and upload it as a static resource, or you can direct call the Google Chart Javascript url in visualforce page.
  • Every Google Chart requires data in specific format, create the right forma data in apex controller, before sending it to visualforce page Google Chart.

Example: In below example I’m showing number of Accounts group by Country in a 3D Pie Chart.

Apex Class:

global with sharing class AccountChartController {
    
    @RemoteAction
    global static List<AggregateResult> getAccountData(){
        List<AggregateResult> accGroupList = [Select BillingCountry Country, Count(Id) NumberOfAccounts
                                              From Account Where BillingCountry != null
                                              Group By BillingCountry];
        return accGroupList;
    }
}

Visualforce Page:

<apex:page controller="AccountChartController">
    <!--Google Chart Javascript Resource-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>
    
    <!--Javascript Remote Function To Call Apex Controller Method-->
        <script type="text/javascript">
            //Load google chart
            google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    
    var accData; //Variable to store data
    //Call remote action method
    AccountChartController.getAccountData(function(result, event){
        accData  = result; //get data from apex controller
    },{escape:true});
    
    //Draw google chart
    function drawChart() {
        //Create the data table.
        var data = new google.visualization.DataTable();
        //Add datatable columns
        data.addColumn('string', 'Country');
        data.addColumn('number', 'Number of Accounts');
        
        //Add datatable rows
        for(i = 0; i< accData.length; i++){
            data.addRow([accData[i].Country, accData[i].NumberOfAccounts]);
        }
        
        //Set chart options
        var options = {
            'title':'Accounts Group by Country',
            is3D: true,};
        
        //Instantiate and draw the chart.
        var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
        chart.draw(data, options);
    }
    </script>
    
    <!--Identify where the chart should be drawn-->
    <div id="myPieChart" style="width: 900px; height: 700px;"/>
</apex:page>

Output: