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:
Loading...
Lightning Component:
<aura:component implements="force:lightningQuickActionWithoutHeader,flexipage:availableForRecordHome,force:hasRecordId">
<!--Custom Styles for Modal Header and Footer-->
<aura:html tag="style">
.cuf-content {
padding: 0 0rem !important;
}
.slds-p-around--medium {
padding: 0rem !important;
}
.slds-modal__content{
overflow-y:hidden !important;
height:unset !important;
max-height:unset !important;
}
</aura:html>
<!--Modal Header-->
<div class="modal-header slds-modal__header slds-size_1-of-1">
<h4 class="title slds-text-heading--medium">Biswajeet Samal's Blog</h4>
</div>
<!--End Modal Header-->
<!--Modal Body-->
<div class="slds-modal__content slds-p-around--x-small slds-align_absolute-center slds-size_1-of-1 slds-is-relative">
<form class="slds-form--stacked">
Welcome to Biswajeet Samal's Blog
</form>
</div>
<!--End of Modal Body-->
<!--Modal Footer-->
<div class="modal-footer slds-modal__footer slds-size_1-of-1">
<lightning:button variant="Brand" class="slds-button" label="Submit" onclick="{!c.handleSubmit}"/>
<lightning:button variant="Neutral" class="slds-button" label="Cancel" onclick="{!c.handleClose}"/>
</div>
<!--End of Modal Footer-->
</aura:component>
JS Controller:
({
handleSubmit : function(component, event, helper) {
},
handleClose : function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire()
}
})
Output:
Loading...
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:
Loading...
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:
Loading...
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:
Loading...
