Iterate Map List Values in Lightning Component

Apex Class:

public class SampleAuraController {
    
    @AuraEnabled
    Public static Map<string, List<string>> getMap(){ 
        Map<String, List<string>> mapObj = new Map<String, List<string>>();
        List<string> fruits = new List<String>{'Apple', 'Orange', 'Banana', 'Grapes'};
		List<string> vegetables = new List<String>{'Cabbage', 'Carrot', 'Potato', 'Tomato'};
		mapObj.put('Fruits', fruits);
        mapObj.put('Vegetables', vegetables);  
        return mapObj;
    }
}

Lightning Component:

<aura:component controller="SampleAuraController">
    <aura:attribute name="mapValues" type="object" />	
    <div class="slds-m-around_xx-large">
        <div class="slds-box slds-theme_default">
            <lightning:button label="Iterate Map" onclick="{!c.getMapValues}"/>
            <aura:iteration items="{!v.mapValues}"  var="mapKey" indexVar="key">  
                <strong><p>{!mapKey.key}</p></strong>
                <aura:iteration items="{!mapKey.value}" var="mapValue">
                    <p>{!mapValue}</p>
                </aura:iteration>
            </aura:iteration>
        </div>
    </div>
</aura:component>

Lightning Component JS Controller:

({
    getMapValues : function(component, event, helper) {
        var action = component.get("c.getMap");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS"){
                var result = response.getReturnValue();
                var arrayMapKeys = [];
                for(var key in result){
                    arrayMapKeys.push({key: key, value: result[key]});
                }
                component.set("v.mapValues", arrayMapKeys);
            }
        });
        $A.enqueueAction(action);
    }
})

Output:

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

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

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

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.