Tag Archives: Lightning Component

Google reCAPTCHA in Lightning Component

Biswajeet September 9, 2020 8 Comments

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">
    <html>
        <head>
            <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
                });
            };
            </script>
        </head>
        <body>
            <div id="reCAPTCHAWidget"></div>
        </body>
    </html>
</apex:page>

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">
    
    <!--Attributes-->
    <aura:attribute name="isDisable" type="Boolean" default="true"/>
    <aura:attribute name="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>
    
     <!--Handlers-->
    <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">
                Registration
            </legend>
            
            <lightning:input name="fName" label="First Name" value="{!v.firstName}"/>
            <br/>
            <lightning:input name="lName" label="Last Name"  value="{!v.lastName}"/>
            <br/>
            <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"   />
            </div>
        </fieldset>
    </div>
</aura:component>

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){
                return;
            }
            if(event.data === 'VALID'){
                component.set('v.isDisable', false); 
            }
        }, false);
    },
    
    handleSubmit : function(component, event, helper) {
        
    },
})

How to use jQuery in Salesforce Lightning Aura Component?

Biswajeet August 15, 2020 No Comments

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.

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

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

Aura Component :

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

JS Controller:

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

Return Custom Error Messages From Apex Controller In Salesforce Lightning

Biswajeet January 21, 2020 No Comments

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);
auraEx.setMessage(errorMessage);
throw auraEx;

Disable Caching Setting During Lightning Component Development

Biswajeet September 8, 2019 No Comments

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

Biswajeet July 18, 2019 No Comments

Lightning Component:

<aura: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>
            </span>
        </div>
    </div>
</aura:component>

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){
                $A.util.addClass(prgBar,'slds-is-low');
            }
            if(progress >= 25){
                $A.util.removeClass(prgBar,'slds-is-low');
                $A.util.addClass(prgBar,'slds-is-medium');
            }
            if(progress >= 50){
                $A.util.removeClass(prgBar,'slds-is-medium');
                $A.util.addClass(prgBar,'slds-is-high');
            }
            if(progress >= 75){
                $A.util.removeClass(prgBar,'slds-is-high');
                $A.util.addClass(prgBar,'slds-is-critical');
            }
            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;
}

Output:

Biswajeet Samal's Blog

Sharing My IT Experience