Tag Archives: Lightning Component

Access Apex Class Properties in Lightning Component

Apex Class:

public class SampleAuraController {
    
    //Properties
    @AuraEnabled public String FirstName {get;set;}
    @AuraEnabled public String LastName {get;set;}
    
    @AuraEnabled
    public static SampleAuraController getData() {
        SampleAuraController obj = new SampleAuraController();
        obj.FirstName = 'Biswajeet';
        obj.LastName = 'Samal';
        return obj;
    }
}

Lightning Component:

<!--Sample.cmp--> 
<aura:component controller="SampleAuraController" implements="flexipage:availableForAllPageTypes,force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="obj" type="SampleAuraController"/>
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <strong>First Name : {!v.obj.FirstName}</strong>
        <br/>
        <strong>Last Name : {!v.obj.LastName}</strong>
    </div>
    <!--Component End-->
</aura:component>

Lightning Component JS Controller:

({
    doInit : function(component, event, helper) {
        var action = component.get('c.getData');
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                component.set('v.obj', result);
            }
        });
        $A.enqueueAction(action);
    }
})

Output:

USA Standard Telephone Formatting in Lightning Experience

I had a requirement to automate a Phone number field to USA standard format. As of now in Lightning there is no such feature exists.

Here is an example:
Phone: 9831078379
USA Standard Format: (983) 107-8379

Component:

<aura:component>
    <div class="slds-m-around_xx-large">
        <lightning:input type="text" maxlength="10" onblur = "{!c.formatPhoneNumber}" aura:id="Phone" label="Phone" name="Phone"/>
    </div>
</aura:component>

JS Controller:

({
    formatPhoneNumber: function(component, helper, event) {
        var phoneNo = component.find("Phone");
        var phoneNumber = phoneNo.get('v.value');
        var s = (""+phoneNumber).replace(/\D/g, '');
        var m = s.match(/^(\d{3})(\d{3})(\d{4})$/);
        var formattedPhone = (!m) ? null : "(" + m[1] + ") " + m[2] + "-" + m[3];
        phoneNo.set('v.value',formattedPhone);
    }
})

Output:
USA-Standard-Phone-Format-in-Lightning-Experience

Bound and Unbound Expressions in Lightning Components

When we work with components, the first thing we do is declaring the attributes and initialize them. We use expressions for initializing our components. There are two types of expressions, bound and unbound that are used to perform data binding in Lightning Components.

Bound Expression: Bound Expression is represented as {!v.str}. Whenever the value of the string is changed, this expression will reflect the change and also affect the components where it is used, we can say the value change dynamically through this expression.

Unbound Expression: Unbound Expression is represented as {#v.str}. Whenever the value of the string is changed, this expression will not reflect the change, we can say the value remains static through this expression.

Here is an example of lightning component with Bound and Unbound Expressions:

Sample Component:

<aura:component>
    <aura:attribute name="str" type="string" default="Hello World!"/>
    <ui:outputText value="Enter a string value : "/>
    <ui:inputText value="{!v.str}"/>
    <br/>
    <ui:outputText value="Unboud Expression : "/>
    <ui:outputText value="{#v.str}"/>
    <br/>
    <ui:outputText value="Bound Expression : "/>
    <ui:outputText value="{!v.str}"/>
</aura:component>

Output:
bound-and-unbound-expressions

The value in bound expression variable changes on change of the input, but the value of unbound expression remains the same.

System Events in Lightning Framework

System events are fired automatically by the Lightning framework such as during component initialization, attribute value change, rendering etc. All Components can register for system events in their HTML markup.

We can handle these events in the Lightning apps or components, and within the Salesforce mobile app. Here are few examples of system events.

Event Name Description
aura:doneRendering Indicates that the initial rendering of the root application has completed.
aura:doneWaiting Indicates that the app is done waiting for a response to a server request.
aura:locationChange Indicates that the hash part of the URL has
changed.
aura:noAccess Indicates that a requested resource is not accessible due to
security constraints on that resource.
aura:systemError Indicates that an error has occurred.
aura:valueChange Indicates that an attribute value has
changed.
aura:valueDestroy Indicates that a component has been
destroyed.
aura:valueInit Indicates that an app or component has been
initialized.
aura:valueRender Indicates that an app or component has been rendered or
rerendered.
aura:waiting Indicates that the app is waiting for a response to a server request.

Salesforce Lightning Progress Bar

lightning:progressBar component displays the progress of an operation from left to right, like a file download or upload.

Here is an example loads the progress bar on load of the component, and in the JS controller that changes the value of the progress bar.

Lightning Component:

<!--ProgressBar.cmp-->
<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">
        <!--Lightning Progress Bar-->
        <lightning:progressBar value="{!v.progress}"/>
    </div>  
</aura:component>

Lightning Component JS Controller:

({
    //Specifying progress === 100 ? clearInterval(interval) : progress + 20 increases
    //the progress value by 20% 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');
            component.set('v.progress', progress === 100 ? clearInterval(interval) : progress + 20);
        }), 1000);
    }
})

Output: