Tag Archives: Lightning Component

Salesforce Lightning Progress Bar With Conditional Theme

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:

Refresh lightning:recordEditForm After Save

There is no standard functions to refresh lightning:recordEditForm after save record. You can use aura:if to re-render the field section inside record edit form, after successfully saved the record.

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Attributes-->
    <aura:attribute name="reloadForm" type="boolean" default="true" />
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Account"
                                  aura:id="accForm"
                                  onload="{!c.handleOnLoad}"
                                  onsubmit="{!c.handleOnSubmit}"
                                  onsuccess="{!c.handleOnSuccess}"
                                  onerror="{!c.handleOnError}">
            <lightning:messages />
            <aura:if isTrue="{!v.reloadForm}">
                <lightning:inputField fieldName="Name"/>
                <lightning:inputField fieldName="AccountNumber"/>
                <lightning:inputField fieldName="Industry"/>
                <lightning:inputField fieldName="Phone" />
                <lightning:inputField fieldName="Website" />
                <aura:set attribute="else">
                    Saving...
                </aura:set>
            </aura:if>
            <lightning:button variant="brand" type="submit" name="save" label="Save" />
        </lightning:recordEditForm>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleOnLoad : function(component, event, helper) {
        
    },
    
    handleOnSubmit : function(component, event, helper) {
        component.set("v.reloadForm", false);
        component.set("v.reloadForm", true);
    },
    
    handleOnSuccess : function(component, event, helper) {
        
    },
    
    handleOnError : function(component, event, helper) {
        
    },
    
})

Custom Submit Button for a lightning:recordeditform

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Account" aura:id="accForm">
            <lightning:messages />
            <lightning:inputField fieldName="Name"/>
            <lightning:inputField fieldName="AccountNumber"/>
            <lightning:inputField fieldName="Industry"/>
            <lightning:inputField fieldName="Phone" />
            <lightning:inputField fieldName="Website" />
        </lightning:recordEditForm>
        <lightning:button variant="brand" type="button" name="Save" label="Save" onclick="{!c.handleCreateAccount}" />
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleCreateAccount : function(component, event, helper) {
        component.find("accForm").submit();
    }
})

Unescaping HTML in Lightning Component

Using aura:unescapedHtml component, you can Unescaping HTML contents in Lightning component.

Lightning Component:

<aura:component>
    <!--Handler-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!--Attributes-->
    <aura:attribute name="blogURL" type="String" default=""/>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        Welcome to my <aura:unescapedHtml value="{!v.blogURL}"/>.
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {
        //HTML Content
        var blogURL = '<a href="https://www.biswajeetsamal.com/blog/" target="_blank">Blog</a>';
        component.set("v.blogURL", blogURL);
    },
})

Password Strength Check in Lightning Component

Lightning Component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <!--Declare Attributes-->
    <aura:attribute name="password" type="String"/>
    <aura:attribute name="passwordStrength" type="String" default="Very Weak"/>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <div class="slds-text-align_center slds-text-heading_medium">Password Strength Check</div>
        <lightning:input name="password" label="Password" value="{!v.password}" onchange="{!c.checkPasswordStrength}" type="password"/>
        <br/>
        <lightning:badge label="{!v.passwordStrength}" aura:id="psBadge" class="slds-theme--error" />
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    checkPasswordStrength : function(component, helper) {
        
        //Get password
        var password = component.get("v.password");
        
        //Password strength
        let strength = {
            1: 'Very Weak',
            2: 'Weak',
            3: 'Medium',
            4: 'Strong',
            5: 'Very Strong'
        };
        
        //Password Strength Check
        let strengthValue = {
            'caps': false,
            'length': false,
            'special': false,
            'numbers': false,
            'small': false
        };
        
        //Password strength styles
        let passwordStrengthStyle = {
            0: 'slds-theme--error',
            1: 'slds-theme--error',
            2: 'slds-theme--warning',
            3: 'slds-theme--info',
            4: 'slds-theme--alt-inverse',
            5: 'slds-theme--success'
        };
        
        //Check Password Length
        if(password.length >= 8) {
            strengthValue.length = true;
        }
        
        //Calculate Password Strength
        for(let index=0; index < password.length; index++) {
            let char = password.charCodeAt(index);
            if(!strengthValue.caps && char >= 65 && char <= 90) {
                strengthValue.caps = true;
            } else if(!strengthValue.numbers && char >=48 && char <= 57){
                strengthValue.numbers = true;
            } else if(!strengthValue.small && char >=97 && char <= 122){
                strengthValue.small = true;
            } else if(!strengthValue.numbers && char >=48 && char <= 57){
                strengthValue.numbers = true;
            } else if(!strengthValue.special && (char >=33 && char <= 47) || (char >=58 && char <= 64)) {
                strengthValue.special = true;
            }
        }
        
        let strengthIndicator = 0;
        for(let metric in strengthValue) {
            if(strengthValue[metric] === true) {
                strengthIndicator++;
            }
        }
        
        //get badge
        var psBadge = component.find('psBadge');
        
        //Remove style
        for(let strengthStyle in passwordStrengthStyle) {
            $A.util.removeClass(psBadge, passwordStrengthStyle[strengthStyle]);
        }
        
        //Add style
        $A.util.addClass(psBadge, passwordStrengthStyle[strengthIndicator]);
        
        //set password strength
        component.set("v.passwordStrength", strength[strengthIndicator]);
    }
})

Output: