Lesson 5 – Using Attributes In Component or Application
Previous : Lesson 4 – Give Style With CSS To Your Lightning Component.
In this lesson we move forward and understand the Use of attributes in lightning. attributes are very useful thing in lightning component framework development.
What is an Attribute in Lightning ?
Attribute is like a member variable in our regular coding (like declare variables in Apex, JavaScript). In simple words, attributes are used to store information to be referenced and used in our lightning component code.
Attribute will make your lightning component more dynamic.
How to Add or Declare attributes in lightning component or lightning application ?
Below is the syntax of using attribute in lightning component or application -:
<aura:component> <aura:attribute name="yourName" type="String" default="Marc Benioff" description="Using for Store Name"/> </aura:component>
- So basically in the above sample syntax we have a ‘aura:attribute’ In which, attribute Name is ‘yourName‘ and its Type is String. and we are give it default value as ‘Marc Benioff’.
- Attributes are always declare with aura: namespace.
- In the attribute creation, attribute Name and attribute Type is mandatory properties.
- Apart from name, type,default and description we have some more attributes (properties) of aura:attribute such as:
name : Name of an attribute. [Required/Mandatory]
type : Type of information to be stored. [Required/Mandatory]. ( Click Here to see supported basic type values of and aura:attribute.)
default : Default value of an attribute.
access : Indicates whether the attribute can be used outside of its own namespace. Possible values are: public (default), and global, and private.
required : Is it required or not – Possible Values: true or false(default)
description : Summary of an attribute and its usage.
An attribute can have a type corresponding to a standard or custom object. Such as :
<aura:component> <aura:attribute name="objAccount" type="Account" /> <aura:attribute name="objCustomObject" type="customObject__c" /> </aura:component>
How to Use or Access aura:attribute In Lightning Component or Lightning Application?
To access attribute in our Lightning Component or Lightning Application, we have to use value providers. (we will cover value providers in-depth in upcoming lesson). for now, assume value provider is just a syntax to access ‘aura:attributes’ to lightning component code.
To access a attribute in component markup using the expression {! v.attributeName} syntax. here ‘v.‘ gives you a ‘control’ to access the component attributes.
Example 1:
Open Developer Console and Create a lightning component (File > New > Lightning Component)
Enter name “testAttribute“. and write following code.
testAttribute.cmp
<aura:component> <aura:attribute name="FirstName" type="String" default="Marc Benioff" /> <aura:attribute name="Age" type="Integer" default="52"/> <aura:attribute name="isMale" type="Boolean" default="true"/> <p>Name of Salesforce CEO is {!v.FirstName}</p> <p>{!v.FirstName} is {!v.Age} Years Old.</p> <p>{!v.FirstName} is male? = {!v.isMale}</p> </aura:component>
Create an app to see component output:
Open Developer Console and Create a lightning Application (File > New > Lightning Application)
Enter name “testApplication”. and add your “testAttribute” component on it.
testAttribute.app
<aura:application> <c:testAttribute/> </aura:application>
Click on the preview button in developer console sidebar.
Output:
- In the above “testAttribute” lightning component code, first we have create 3 ‘aura:attribute’, with specific attribute type such as : string, Integer and Boolean.
- For use this attributes value in lightning component we are using the expression syntax {! v.attributeName} with value provider “v.” .
Use literal Text Inside the Expression.
you can also use static text with expression, such as :
<aura:component> <aura:attribute name="FirstName" type="String" default="Marc Benioff" /> <aura:attribute name="Age" type="Integer" default="52"/> <aura:attribute name="isMale" type="Boolean" default="true"/> <p>{!'Name of Salesforce CEO is ' + v.FirstName}</p> <p>{!v.FirstName + ' is ' + v.Age + ' Years Old.'}</p> <p>{!v.FirstName + ' is male? = ' + v.isMale}</p> </aura:component>
- Notice that we’ve used the “+” operator to concatenate the two strings together inside expression.
- Output is same as Example 1 output.
What Are The Naming Convention Rules For aura:attribute?
An attribute name must follow these naming rules:
– Must begin with a letter or an underscore.
– Must contain only alphanumeric or underscore characters.
we will learn more about attributes in this tutorial.
Useful Resource :
- Attribute Basic Type
- Attribute Object Type
- Attribute Collection Type
- Attribute Custom Apex Class Types
any doubt with it ? any questions? ask in comment box 🙂
Happy Learning 🙂 !!
Next : Lesson 6 -Define JavaScript Function for lightning Component.
18 comments
Hello,
These posts 1-5 are very useful and easily understandable. But when can next steps will be posted?
will post ASAP
Hi ,
When your going to post 6,7,8 topic, its urgent please,
Or send me on my mail id: [email protected]
Thanks
Uday
Please post next topics.
Your Posts are very easy to understand.
Please post next topics
Great work done .waiting for next lesson
Thanks for your support Piyush
I think u will not post the next
Thank you much for sharing it.When will you post the remaining?
When u will post next step..?
Plz share the next post !! Its very useful to understand the lightning… !!
i will work on it
Thank you for clear explanation.Request you please post the further tutorials
Looking forward to new Posts 6 onwards. Thanks for the initial ones.
Plz post the next tutorials
Looking forward to new Posts 6 onwards. pls post it.
Hi
I am using community object page and redirecting to that page using navigation pagereference. While passing parameter i am facing issue. Not able to figure out which parameter i should pass to that page. I have passed ID and url too but its redirecting to Error page. Could you please post a blog about this.
Bhai its around 4 yrs. please post next sections
can you show me a complete example that how can we use custom object type aura:attribue?