Tag Archives: Lightning

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:

Refresh lightning:recordEditForm After Save

Biswajeet June 16, 2019 7 Comments

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) {
        
    },
     
    handleOnSuccess : function(component, event, helper) {
         component.set("v.reloadForm", false);
        component.set("v.reloadForm", true);
    },
     
    handleOnError : function(component, event, helper) {
         
    },
     
})

Custom Submit Button for a lightning:recordeditform

Biswajeet June 16, 2019 4 Comments

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

Biswajeet June 11, 2019 No Comments

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);
    },
})

Increase Salesforce Lightning Quick Action Modal Width

Biswajeet May 26, 2019 No Comments

Lightning Component:

<!--demo.cmp-->
<aura:component implements="force:lightningQuickAction">
    <!--style to incraee width-->
    <aura:html tag="style">
        .slds-modal__container{
        max-width: 80rem !important;
        width:80% !important;
        }
    </aura:html>
    
    <!--Component Start-->
    <div class="slds-m-around--xx-large">
        <div class="slds-text-heading_medium slds-align_absolute-center">
            Welcome to Biswajeet Samal's Blog
        </div>
    </div>
    <!--Component End-->
</aura:component>