Carousel In Lightning Component

Biswajeet February 26, 2018 No Comments

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

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

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.

Apex String Methods to Determine Character Types

Biswajeet February 20, 2018 No Comments

isAlpha() : This string method will return true, if the string contain only characters.

//Return true
String s1 = 'Biswajeet';
Boolean b1 = s1.isAlpha();
System.assertEquals(true, b1);

//Return false
String s2 = 'Biswajeet Samal';
Boolean b2 = s2.isAlpha();
System.assertEquals(false, b2);

//Return false
String s3 = 'Biswajeet1234';
Boolean b3 = s3.isAlpha();
System.assertEquals(false, b3);

isAlphaSpace() : This string method will return true, if the string contain alphabet and white spaces.

//Return true
String s1 = 'Biswajeet';
Boolean b1 = s1.isAlphaSpace();
System.assertEquals(true, b1);

//Return true
String s2 = 'Biswajeet Samal';
Boolean b2 = s2.isAlphaSpace();
System.assertEquals(true, b2);

//Return false
String s3 = 'Biswajeet1234';
Boolean b3 = s3.isAlphaSpace();
System.assertEquals(false, b3);

isAlphanumeric() : This string method will return true, if the string contain alphabet, numbers.

//Return true
String s1 = 'Biswajeet';
Boolean b1 = s1.isAlphaNumeric();
System.assertEquals(true, b1);

//Return true
String s2 = 'Biswajeet1234';
Boolean b2 = s2.isAlphaNumeric();
System.assertEquals(true, b2);

//Return false
String s3 = 'Biswajeet 1234';
Boolean b3 = s3.isAlphaNumeric();
System.assertEquals(false, b3);

isAlphanumericSpace() : This string method will return true, if the string contain alphabet, numbers and white spaces.

//Return true
String s1 = 'Biswajeet Samal';
Boolean b1 = s1.isAlphanumericSpace();
System.assertEquals(true, b1);

//Return true
String s2 = 'Biswajeet 1234';
Boolean b2 = s2.isAlphanumericSpace();
System.assertEquals(true, b2);

//Return false
String s3 = 'Biswajeet $$';
Boolean b3 = s3.isAlphanumericSpace();
System.assertEquals(false, b3);

isNumeric() : This string method will return true, if the string contain numbers only.

//Return true
String s1 = '12345';
Boolean b1 = s1.isNumeric();
System.assertEquals(true, b1);

//Return false
String s2 = '12.22';
Boolean b2 = s2.isNumeric();
System.assertEquals(false, b2);

//Return false
String s3 = 'Biswajeet1234';
Boolean b3 = s3.isNumeric();
System.assertEquals(false, b3);

isNumericSpace() : This string method will return true, if the string contain numbers with spaces.

//Return true
String s1 = '1 2 3 4 5';
Boolean b1 = s1.isNumericSpace();
System.assertEquals(true, b1);

//Return true
String s2 = '12.22';
Boolean b2 = s2.isNumericSpace();
System.assertEquals(false, b2);

//Return false
String s3 = 'Biswajeet 1234';
Boolean b3 = s3.isNumericSpace();
System.assertEquals(false, b3);

isWhitespace() : This string method will return true, if the string contain only white spaces.

//Return true
String s1 = ' ';
Boolean b1 = s1.isWhitespace();
System.assertEquals(true, b1);

//Return true
String s2 = '';
Boolean b2 = s2.isWhitespace();
System.assertEquals(true, b2);

//Return false
String s3 = 'BISWA 1234';
Boolean b3 = s3.isWhitespace();
System.assertEquals(false, b3);

containsWhitespace() : This string method will return true, if the string contain white spaces.

//Return true
String s1 = 'Biswajeet Samal';
Boolean b1 = s1.containsWhitespace();
System.assertEquals(true, b1);

//Return true
String s2 = 'Biswajeet 1234';
Boolean b2 = s2.containsWhitespace();
System.assertEquals(true, b2);

//Return true
String s3 = 'BISWA ';
Boolean b3 = s3.containsWhitespace();
System.assertEquals(true, b3);

//Return false
String s4 = 'Biswajeet';
Boolean b4 = s4.containsWhitespace();
System.assertEquals(false, b4);

isAllLowerCase() : This string method will return true, if the string contain all characters in lowercase.

//Return true
String s1 = 'biswajeet';
Boolean b1 = s1.isAllLowerCase();
System.assertEquals(true, b1);

//Return false
String s2 = 'Biswajeet';
Boolean b2 = s2.isAllLowerCase();
System.assertEquals(false, b2);

isAllUpperCase() : This string method will return true, if the string contain all characters in uppercase.

//Return true
String s1 = 'BISWAJEET';
Boolean b1 = s1.isAllUpperCase();
System.assertEquals(true, b1);

//Return false
String s2 = 'Biswajeet';
Boolean b2 = s2.isAllUpperCase();
System.assertEquals(false, b2);

Salesforce Lightning Aura Method

Biswajeet February 18, 2018 No Comments

Use aura:method to define a method as part of a component’s API. This enables you to directly call a method in a component’s client-side controller instead of firing and handling a component event. Using aura:method simplifies the code needed for a parent component to call a method on a child component that it contains.

Child Component:

<!--Child.cmp-->
<aura:component >
    <aura:method name="messageMethod" action="{!c.getMessage}" access="public">
        <aura:attribute name="param1" type="String" default="Hello"/> 
        <aura:attribute name="param2" type="String" default="World"/> 
    </aura:method>
</aura:component>

Child Component JS Controller:

({
    getMessage : function(component, event) {
        //get method paramaters
        var params = event.getParam('arguments');
        if (params) {
            var param1 = params.param1;
            var param2 = params.param2;
            alert(param1 + " " + param2);
        }
    }
})

Parent Component:

<!--Parent.cmp-->
<aura:component>    
    <div class="slds-m-around_xx-large">
        <!-- Child Component -->
        <c:Child aura:id="childCmp"/>
        <!-- On button click child aura:method will be called-->
        <lightning:button variant="brand" label="Call Aura Method" onclick="{!c.callAuraMethod}" />
    </div>
</aura:component>

Parent Component JS Controller:

({
    callAuraMethod : function(component, event, helper) {
        //Call Child aura method
        var childComponent = component.find("childCmp");
        var message = childComponent.messageMethod();
    }
})

Output:

Biswajeet Samal's Blog

Sharing My IT Experience

Carousel In Lightning Component

Lookup Field in Lightning RecordEditForm

Salesforce Lightning Formatted DateTime

Apex String Methods to Determine Character Types

Salesforce Lightning Aura Method