Tag Archives: Lightning Component

Google reCAPTCHA in Lightning Component

Configure the Google reCAPTCHA and get the Site Key & Secret Key:

  • Login to Google reCAPTCHA
  • Register a new site
  • Add Label e.g. Salesforce.com
  • Select reCAPTCHA type “reCAPTCHA v2”
  • Select “I’m not a robot” Checkbox option.
  • Add a domain e.g. yourorgurl.com
  • Accept the reCAPTCHA Terms of Service
  • Submit and get the Site Key & Secret Key

Create a VF page to configure Google reCAPTCHA in it and we have to embed the VF page in our lightning component.

GoogleReCaptcha VF Page:

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" cache="false" id="pg" applyBodyTag="false" applyHtmlTag="false">
            <script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async='' defer=''/>
            <script type='text/javascript'>
                var verifyCallback = function(response){
                    parent.postMessage('VALID', 'https://biswajeet-dev-ed.lightning.force.com/');
            var onloadCallback = function() {
                grecaptcha.render('reCAPTCHAWidget', {
                    'sitekey' : 'ADD_YOUR_GOOGLE_RECAPTCHA_SITE_KEY', 
                    'callback' : verifyCallback
            <div id="reCAPTCHAWidget"></div>

Embed the above created VF page in our lightning component to display Google reCAPTCHA.
Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,forceCommunity:availableForAllPageTypes" access="global">
    <aura:attribute name="isDisable" type="Boolean" default="true"/>
    <aura:attribute name="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-m-around--xxx-large slds-align_absolute-center" style="width:70%;">
        <fieldset class="slds-box slds-align_absolute-center" >
            <legend id="newform" class="slds-text-heading--small login-heading">
            <lightning:input name="fName" label="First Name" value="{!v.firstName}"/>
            <lightning:input name="lName" label="Last Name"  value="{!v.lastName}"/>
            <iframe src="/apex/GoogleReCaptcha" scrolling="no" frameborder="0" width="100%" allowtransparency="true"></iframe>
            <div class="slds-align_absolute-center">
                <lightning:button onclick="{!c.handleSubmit}" disabled="{!v.isDisable}" variant="brand" name="btnSubmit" label="Submit"   />

Lightning JS Controller:

    doInit : function(component, event, helper) {
        var vfURL = 'https://biswajeet-dev-ed.lightning.force.com/';
        window.addEventListener('message', function(event){
            if(event.origin !== vfURL){
            if(event.data === 'VALID'){
                component.set('v.isDisable', false); 
        }, false);
    handleSubmit : function(component, event, helper) {

How to use jQuery in Salesforce Lightning Aura Component?

Step 1: Upload the jQuery library as a static resource in your Org.

Step 2: Use ltng:require to load static resource JavaScript libraries on your component.

    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" />

Step 3: To utilize the library include the afterScriptsLoaded event and add the method in your aura component JS controller.

Aura Component :

    <ltng:require scripts="{!$Resource.YourStaticResourceName + '/jQueryFileName.js'}" afterScriptsLoaded="{!c.handleAfterScriptsLoaded}" />

JS Controller:

    handleAfterScriptsLoaded : function(component, event, helper) {
            console.log('jQuery Loaded');

Return Custom Error Messages From Apex Controller In Salesforce Lightning

Sample Code:

We can use System.AuraHandledException to return custom error message from server side apex controller to lightning component in Salesforce.

string errorMessage = 'Your Error Message';
AuraHandledException auraEx = new AuraHandledException(errorMessage);
throw auraEx;

Disable Caching Setting During Lightning Component Development

  • Click Setup (Enter Session in the Quick Find box) | Administration Setup | Security Controls | Session Settings
  • Locate the Caching section.
  • Select the “Enable secure and persistent browser caching to improve performance”.
  • Click Save

Salesforce Lightning Progress Bar With Conditional Theme

Lightning Component:

    <!--declare handler for render the JS method for Progress bar-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--declare attributes for progress bar value-->
    <aura:attribute name="progress" type="Integer" default="0"/>
    <div class="slds-m-around_xx-large">
        <div class="slds-progress-bar slds-progress-bar_large" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!v.progress}" role="progressbar">
            <span aura:id="prgBar" class="slds-progress-bar__value" style="{!'width:'+v.progress+'%'}">
                <span class="slds-assistive-text">Progress: {!v.progress}%</span>

Lightning JS Controller:

    //Specifying progress === 100 ? clearInterval(interval) : progress + 5 increases
    //the progress value by 5% and stops the animation when the progress reaches 100%
    //The progress bar is updated every 1000 milliseconds.
    doInit:  function (component, event, helper) {
        var interval = setInterval($A.getCallback(function () {
            var progress = component.get('v.progress');
            var prgBar = component.find("prgBar");
            if(progress >= 0){
            if(progress >= 25){
            if(progress >= 50){
            if(progress >= 75){
            component.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 5);
        }), 1000);

Lightning Style:

.THIS .slds-is-low {
    background-color: green!important;
.THIS .slds-is-medium{
    background-color: yellow!important;
.THIS .slds-is-high{
    background-color: orange!important;
.THIS .slds-is-critical{
    background-color: red!important;