Category Archives: Salesforce

Difference Between Component.get() And Component.find() in Salesforce Lightning

Biswajeet   March 5, 2018   No Comments on Difference Between Component.get() And Component.find() in Salesforce Lightning

component.find() :

  • It returns the Aura.Component instance(s) by its local ID.
  • If the Aura.Component local ID is unique, it returns the component and if there are multiple Aura.Component with the same local ID, it returns an array of the components.
  • Syntax: component.find("auraid");

component.get() :

  • It is associated with Component attributes and returns the referenced component attribute value.
  • Syntax: component.get(String key);

Lightning Component:

<aura:component >
    <aura:attribute name="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>
    
    <div class="slds-m-around--xx-large">
        <div class="container-fluid">
            <div class="form-group">
                <lightning:input name="fName" aura:id="fName" type="text" required="true" maxlength="50" label="First Name" value="{!v.firstName}" />
            </div>
            <div class="form-group">
                <lightning:input name="lName" aura:id="lName" type="text" required="true" maxlength="50" label="Last Name" value="{!v.lastName}" />
            </div>
            <br/> 
            <lightning:button variant="brand" label="Submit" onclick="{!c.handleSubmit}" /> 
        </div>
    </div>
</aura:component>

Lightning JS Controller:

({
    handleSubmit : function(component, event, helper) {
        //Find component and get value using component.find();
        var fNameCmp = component.find("fName");
        var lNameCmp = component.find("lName");
        
        console.log('First Name : ' + fNameCmp.get("v.value"));
        console.log('Last Name : ' + lNameCmp.get("v.value"));
        
        //Get attribute value using component.get();
        var fNameAttValue = component.get("v.firstName");
        var lNameAttValue = component.get("v.lastName");
        
        console.log('First Name : ' + fNameAttValue);
        console.log('First Name : ' + lNameAttValue);
    } 
})

aura:waiting and aura:donewaiting Events in Salesforce Lightning

Biswajeet   February 26, 2018   No Comments on aura:waiting and aura:donewaiting Events in Salesforce Lightning

aura:waiting and aura:donewaiting are System Events in Lightning Framework.

aura:waiting Event :

  • This is an application level event.
  • This event indicates that the app is waiting for response to a server request.
  • This event is fired before aura:doneWaiting.
  • This event is automatically fired when a server-side action is added using $A.enqueueAction().
  • The aura:waiting event is handled by a client-side controller.
  • A component can have only one tag to handle this event.

aura:donewaiting Event :

  • This is also an application level event.
  • This event indicates that the app is done waiting for response to a server request.
  • This event is fired after aura:waiting.
  • This event is automatically fired if no more response from the server is expected.
  • This event is also handled by a client-side controller.

Carousel In Lightning Component

Biswajeet   February 26, 2018   1 Comment on Carousel In Lightning Component

lightning:carousel component displays a series of images in a single container. Only one image is displayed at a time, and we can select other images by clicking the carousel indicators. We use lightning:carouselImage lightning component to display the image.

Example:
In below example I used static resource to display the images.
Here is the format “{!$Resource.staticResourceName+’image_path/img1.png’}” to display the image from static resource.

<!--Sample.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start--> 
    <div class="slds-m-around--xx-large">
        <lightning:carousel disableAutoRefresh="true">
            <lightning:carouselImage
                                     src="{!$Resource.CarouselImages+'/CarouselImages/1.png'}"
                                     header = "First Card"
                                     description = "First Image"
                                     alternativeText = "First Image Description."
                                     href = "https://www.google.com">
            </lightning:carouselImage>
            <lightning:carouselImage
                                     src="{!$Resource.CarouselImages+'/CarouselImages/2.png'}"
                                     header = "Second Card"
                                     description = "Second Image"
                                     alternativeText = "Second Image Description"
                                     href = "https://www.google.com">
            </lightning:carouselImage>
            <lightning:carouselImage
                                     src="{!$Resource.CarouselImages+'/CarouselImages/3.png'}"
                                     header = "Third Card"
                                     description = "Third Image"
                                     alternativeText = "Third Image Description."
                                     href = "https://www.google.com">
            </lightning:carouselImage>
        </lightning:carousel>
    </div>
    <!--Component End-->
</aura:component>

Output:

Lookup Field in Lightning RecordEditForm

Biswajeet   February 25, 2018   2 Comments on Lookup Field in Lightning RecordEditForm

Lightning Component:

<!--Sample.cmp--> 
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm recordId="5000I000016VCzL" objectApiName="Case">
            <lightning:messages />
            <lightning:inputField fieldName="AccountId"/>
            <lightning:inputField fieldName="ContactId"/>
            <lightning:inputField fieldName="Origin" />
            <lightning:inputField fieldName="Status" />
            <lightning:inputField fieldName="Priority" />
            <lightning:button class="slds-m-top_small" variant="brand" type="submit" name="update" label="Update" />
        </lightning:recordEditForm>
    </div>
    <!--Component End-->
</aura:component>

Output:

Salesforce Lightning Formatted DateTime

Biswajeet   February 21, 2018   No Comments on Salesforce Lightning Formatted DateTime

lightning:formattedDateTime component displays formatted date and time. This component uses the Intl.DateTimeFormat JavaScript object to format date values. The locale set in the app’s user preferences determines the formatting.

Below are the supported input values for lightning:formattedDateTime component:

  • Date object
  • ISO8601 formatted string
  • Timestamp

Lightning Component:

<!--Sample.cmp--> 
<aura:component>
    <!--Declare Attribute-->
    <aura:attribute name="currentDate" type="Date"/>
    
    <!--Declare Handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:formattedDateTime aura:id="dt"
                                     value="{!v.currentDate}"
                                     month="short"
                                     day="numeric"
                                     year="numeric"
                                     hour="2-digit"
                                     minute="2-digit"
                                     second="2-digit"
                                     hour12="true"
                                     timeZone="{!$Locale.timezone}"/>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {
        var today = new Date();
        component.set('v.currentDate', today);
    }
})

Output:
The above example will return a value in this “Feb 18, 2018, 10:37:13 AM” format.