Get And Set Aura Attributes Simplified
Set Aura Attributes using Component.set()
In the below aura component we have declared the attribute at the top and set the attributes at the time of component initialization. This is handled in the init event.
You will be learning more about events and their handler when we cover the Aura Events
<aura:component>
<aura:attribute name="isCricketMatchToday" type="Boolean" />
<aura:attribute name="runRate" type="Double" />
<aura:attribute name="ticketsEarnings" type="Decimal" />
<aura:attribute name="matchScore" type="Integer" />
<aura:attribute name="ticketSold" type="Long" />
<aura:attribute name="currentBatsman" type="String" />
<aura:attribute name="currentBatsmanRecordId" type="Id" />
<aura:attribute name="OpeningBatsman" type="String[]"/>
<aura:attribute name="playerInfo" type="Object" />
<aura:handler name='init' value='{!this}' action='{!c.doInit}' />
<lightning:card title="Playing With Attributes">
<p class="slds-p-horizontal_small">
We are getting and Setting attributes in this component.
</p>
</lightning:card>
</aura:component> In the below controller code doInit will be called when the init event will be fired that is on initialization of the component.
Inside the init event handler we have used component.set() method to set an attribute with a value.
Component.set() accepts two parameters, first is the attribute which you wanted to set and second is the value which the attribute will hold.
({
doInit : function(component, event, helper) {
component.set('v.isCricketMatchToday', true);
component.set('v.runRate', 6.2);
component.set('v.ticketsEarnings', 1500000.500);
component.set('v.matchScore', 189);
component.set('v.ticketSold', 900000);
component.set('v.currentBatsman', "MS Dhoni");
component.set('v.currentBatsmanRecordId', 'recordId'); // this will be holding an actual recordId
let openingBatsman = ['Shikhar Dhawan', 'Rohit Sharma'];
component.set('v.OpeningBatsman', openingBatsman);
let playerInfo = {"Name" : "MS Dhoni", "Specialization" : "Wicket Keeper Batsman"};
component.set('v.playerStats', playerInfo);
component.set('v.playerData', true);
}
})In the above controller code component.set() method first parameter has the name of the attribute with a v. added at the beginning. What does it do?
Can’t we only just pass the name of the attribute?
v. is present for a binding and is called value provider in the aura component. It binds the attribute present at UI in the javascript controller.
We will cover them in great detail in the next part Expression Syntax
Get Aura Attributes using Component.get() method.
In the above part, we have set our attributes, and it’s great. Now, suppose you have to access these attributes in your javascript controller or helper code you have to use component.get() method.
component.get() method accepts a single parameter that is the name of the attribute prefixed with a v. similar to what we did in component.set() method.
In the below example we have called a getAttributes() function upon click of the button “Check Get Call”.
<aura:component>
<aura:attribute name="isCricketMatchToday" type="Boolean" />
<aura:attribute name="runRate" type="Double" />
<aura:attribute name="ticketsEarnings" type="Decimal" />
<aura:attribute name="matchScore" type="Integer" />
<aura:attribute name="ticketSold" type="Long" />
<aura:attribute name="currentBatsman" type="String" />
<aura:attribute name="currentBatsmanRecordId" type="Id" />
<aura:attribute name="OpeningBatsman" type="String[]"/>
<aura:attribute name="playerInfo" type="Object" />
<aura:handler name='init' value='{!this}' action='{!c.doInit}' />
<lightning:card title="Playing With Attributes">
<aura:set attribute="actions">
<lightning:button label="Check Get Call" onclick = "{!c.getAttributes}"/>
</aura:set>
<p class="slds-p-horizontal_small">
We are getting and Setting attributes in this component.
</p>
</lightning:card>
</aura:component> ({
doInit : function(component, event, helper) {
component.set('v.isCricketMatchToday', true);
component.set('v.runRate', 6.2);
component.set('v.ticketsEarnings', 1500000.500);
component.set('v.matchScore', 189);
component.set('v.ticketSold', 900000);
component.set('v.currentBatsman', "MS Dhoni");
component.set('v.currentBatsmanRecordId', 'recordId'); // this will be holding an actual recordId
let openingBatsman = ["Shikhar Dhawan", "Rohit Sharma"];
component.set('v.OpeningBatsman', openingBatsman);
let playerInfo = {
"Name" : "MS Dhoni",
"Specialization" : "Wicket Keeper Batsman"
};
component.set('v.playerInfo', playerInfo);
},
getAttributes : function (component, event, helper) {
let currentBatsman = component.get('v.currentBatsman');
let openingBatsman = component.get('v.OpeningBatsman');
let playerInfo = component.get('v.playerInfo');
console.log('currentBatsman ' + currentBatsman);
console.log('openingBatsman ' + openingBatsman);
console.log('playerInfo ' + JSON.stringify(playerInfo)); // JSON.stringify() accepts an object and returns a String equivalent.
},
})You will see the below console logs when you click on the button “Check Get Call”. We have added the above-created component in an aura:app and did a preview.
In the above examples, we have used a few expression syntaxes in the event handler of init and onclick, in the component.get() & component.set() method.
Feel free to explore the next part Expression Syntax now.
Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂
