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.