Category: Lightning Components

Bound Expression: {!v.attributeName}: Anything has been changed to the attribute in the Child Component affects the respective attribute in the Parent Component and vice-versa.
Unbound Expression: {#v.attributeName}: Anything has been changed to the attribute in the Child Component doesn’t affect the respective attribute in the Parent Component and vice-versa.

Following diagram depicts the use case of Bound Expression and Unbound Expression.

got the image. no 🙁 … Not an issue. Let’s we will start to discuss and again come to the this diagram

Let’s Start

Using Bound Expression
Step 1:Create a Child Component Bundle named “ChildComponent”

ChildComponent.cmp

<aura:component>
    <aura:attribute name="childAttr" type="String" description="defines child attribute"/>
    
<div class="slds-m-left--large">
          <b>In Child Component: </b>{!v.childAttr}     
          <lightning:button variant="brand" label="Change" onclick="{!c.changeChildAttr}" class="slds-m-left--small"/>
     </div>

</aura:component>

ChildComponentController.js | This method(“changeChildAttr”) is responsible to update the value of childAttr when “Change” button will be clicked.

({
	changeChildAttr : function(component, event, helper) {
		component.set("v.childAttr", "from Child Component.")
	}
})

Step 2: Create a Parent Component Bundle named “ParentComponent”.

ParentComponent.cmp

<aura:component>
    <aura:attribute name="parentAttr" type="String" default="from Parent Component."/>
    
<div class="slds-m-top--large">
        
<div class="slds-align_absolute-center">
    		<b>In Parent Component: </b> {!v.parentAttr}
        </div>

        
<div class="slds-m-top--large slds-m-left--large slds-align_absolute-center">
        	<c:ChildComponent childAttr="{!v.parentAttr}"/>
        </div>

     </div>

</aura:component>

Please notice that we have used Bound Expression {!v.parentAttr} whose default value “from Parent Component” will be passed to Child Component.

Step 3: As discussed earlier, we need to create the Lightning App(“LearnLightning”) to show the Result.

LearnLightning.app

<aura:application extends="force:slds">
    <c:ParentComponent />
</aura:application>

Step 4: Results

Result 1: Just run the app. Parent Component will pass the default value as “from Parent Component” to Child Component. So, both Component will display the same value on screen as “from Parent Component”.

Result 2: Just run the app. Now, you can click “Change” button on Child Component.So, the value of “childAttr” has been changed to “from Child Component”. Due to Bound Expression, it will be affected to the value of “parentAttr” in Parent Component. So, both Component will display the same value on screen as “from Child Component”.

Using Unbound Expression
Step 1:Same Child Component Bundle named “ChildComponent”

ChildComponent.cmp

<aura:component>
    <aura:attribute name="childAttr" type="String"/>
    
<div class="slds-m-left--large">
          <b>In Child Component: </b>{!v.childAttr}     
          <lightning:button variant="brand" label="Change" onclick="{!c.changeChildAttr}" class="slds-m-left--small"/>
    </div>

</aura:component>

ChildComponentController.js | This method(“changeChildAttr”) is responsible to update the value of childAttr when “Change” button will be clicked.

({
	changeChildAttr : function(component, event, helper) {
		component.set("v.childAttr", "from Child Component.")
	}
})

Step 2: Same Parent Component Bundle named “ParentComponent”.

ParentComponent.cmp

<aura:component>
    <aura:attribute name="parentAttr" type="String" default="from Parent Component."/>
    
<div class="slds-m-top--large">
        
<div class="slds-align_absolute-center">
    		<b>In Parent Component: </b>{!v.parentAttr}
        </div>

        
<div class="slds-m-top--large slds-m-left--large slds-align_absolute-center">
        	<c:ChildComponent childAttr="{#v.parentAttr}"/>
        </div>

     </div>

</aura:component>

Please notice that we have used Unbound Expression {#v.parentAttr} whose default value “from Parent Component” will be passed to Child Component. But, there will be no reflection from Child Component.

Step 3: Same Lightning App(“LearnLightning”) to show the Result.

LearnLightning.app

<application extends="force:slds">
    <c:ParentComponent />
</aura:application>

Step 4: Results

Result 1: Just run the app. Parent Component will pass the default value as “from Parent Component” to Child Component. So, both Component will display the same value on screen as “from Parent Component”.

Result 2: Just run the app. Now, you can click “Change” button on Child Component.So, the value of “childAttr” has been changed to “from Child Component”. Due to Unbound Expression, it will not change the value of “parentAttr” in Parent Component. So, Parent Component will display the value as “from Parent Component” and Child Component will display the value as “from Child Component”.

Difference between Bound Expression and Unbound Expression

Bound Expression	Unbound Expression
Using this type of expression, any change to the attribute of Child Component affects the attribute of the Parent Component and Vice-Versa.	Using this type of expression, any change to the attribute of Child Component doesn’t affect the attribute of the Parent Component and Vice-Versa.
It is bi-directional.	It is one time uni-directional.
It hampers performance due to bi-directional flow. Please check component before using this type of expression.	It doesn’t hamper the performance due to  one time uni-directional flow , means there is no reflection from Child Component to Parent Component and Vice-Versa.
It is difficult to study debug-log errors.	It is easy to track.
It is applicable for Component Initialization as well as Data Binding.	It is not applicable for Component Initialization as well as in any controller/helper methods. It is only applicable for Data Binding.

 

Now Please go back to the first diagram of this post. Thanks 🙂

4,740 total views, 3 views today

Component Id: This defines an identifier of the elements of a particular component. There are two types of Component Ids such as Local Id & Global Id.

Local Id-> To retrieve a component in Javascript. It is defined in “aura:id” attribute.

       <lightning:menuItem label="Home" value="home" iconName="utility:table" aura:id="menuItemId"/> 

Local Id doesn’t need to be unique. You can get the component using this syntax component.find(“menuItemId”) in Javascript files.

       doInit: function(component,event,helper){
          var menuItem = component.find("menuItemId");
       } 

Results: menuItem returns the single component if “menuItemId” is unique in component. It returns array of components if “menuItemId” is defined multiple times in the same component.

Global Id-> This is unique id which is generated runtime unique-Id of component instance. This is unique during runtime means this is a dynamic unique id.

Now, we can start to see the difference between Local Id & Global Id.

Step 1: Create a Component to use the Local Id and Global Id.

<aura:component>
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
 
 <div class="slds slds-align_absolute-center" Id = "{!globalId + '_div'}"> 
 <lightning:button variant="brand" label="Submit" onclick="{!c.onSubmit}" aura:id="buttonId"/>
 </div>
</aura:component>

To define the global id at component level, you need to write this {!globalId}. Local Id you can define in aura:id attribute.

Step 2: Create a controller.js to check the Local Id and Global Id.

({
     doInit : function(component, event, helper) {
        console.log("Component Global Id--->"+component.getGlobalId());
     },
     
     onSubmit : function(component, event, helper) { 
        console.log("Component Local Id--->"+component.getLocalId());
        console.log("Button Local Id--->"+component.find("buttonId").getLocalId());
        console.log("Button Global Id--->"+component.find("buttonId").getGlobalId()); 
     }
})

To access the Global Id in Controller.js, you need to write component.getGlobalId().

Step 3: For testing purpose, you can refer this Lightning Component from Lightning App. The following results will appear from Chrome Console, when you run this newly created Lightning App and hit the “Submit” button.

1. Component Global Id has been generated during run time and it is 3:0.
2.You can get the Local Id of the Lightning Button which is the element of the Component. It returns “buttonId” which is defined in aura:id attribute.
3.Also, you can get the Global Id of the Lightning Button and it returns 6:0.
4.you can make the unique identifier at the element of the component level by adding prefix or suffix with {!globalId}. You can see that we have made unique identifier at element in this way “{!globalId + ‘_div’}”.
5. You can see the Global Id by doing Inspect Element from browser

 

Difference between Local Id and Global Id

Local Id	Global Id
A Local Id may be unique, but it’s not required.	Global Id is always to be unique during run time of a component. It is used for -> differentiation of multiple instances of thecomponents. -> debugging.
Define the Local Id in aura:id tags in component level. Example: aura:id=”buttonId” buttonId is the Local Id of a button in the component.	Define the Global Id in Id tags by merge syntax {!globalId} in component level. Example: Id = “{!globalId}”
It is used for Lightning Tag.	It is used for HTML tag.
It’s defined by developer.	It’s defined by system and auto-generated during run time.
Retrieve Local Id from JavaScript: component.getLocalId() component.find(“buttonId”).getLocalId() event.getSource().getLocalId()	Retrieve Global Id from JavaScript: component.getGlobalId() component.find(“buttonId”).getGlobalId() event.getSource().getGlobalId() Retrieve the element from HTML /browser’s Console: document.getElementById(“_div”)
You can not use expression in aura:id tags.	But, you can use the expression in Id tags.
You can use same Local Id in multiple aura:id tags.	You can differentiate the Global Id for different HTML tags by adding prefix or suffix with {!globalId}. Example: Id = “{!globalId+’_div’}”

7,954 total views, 1 views today

Attributes are used to perform the input and output operation in the Lightning Component or App. Attributes are just like Variables in the Apex Class. Need to use <aura:attribute> tag to declare the attribute in the Lightning Component or App.

Definition of <aura:attribute> tag

How can we access the attribute value?
Using this expression {!v.attributeName} In this case, it would be {!v.message}.

v means (View) Value Provider (represents in View Layer) which assists to access related data.

Attribute Types

1. Primitives Data Types: String, Integer, Decimal, Double, Long, Date, Date/Time,  Boolean
2. Collection: Array, Set, List, Map
3. sObjects: StandardObject, CustomObject__c
4. Custom Apex Class
5. Framework Types: Aura.component, Aura.Component[]

Let’s GO

Step 1: Using the Same Lightning Component “Welcome.cmp” and same CSS file “Welcome.css” (Please create, if it’s not there)

Welcome.cmp | Attribute Declaration

<aura:component >    
    <!-- attributes declaration -->
    <aura:attribute name="message" type="String" default="Hello" description="Used for showing the message in Lightning Component"/>  
    
     <div class="slds slds-m-top--x-large slds-align_absolute-center tagLine">
    	<!-- access the attribute -->
        {!v.message}
    </div>
    
</aura:component>

Welcome.css | Describes Styling

.THIS.tagLine {   
    font-size:30px;
    color:#0066CC;   
}

Step 2: Calling from Lightning App “LearningLightning.app” with message attribute

<aura:application extends="force:slds">
    <c:Welcome message="Welcome to Everyone !!"/>
</aura:application>

Step 3: Result

Step 4: Calling from Lightning App “LearningLightning.App” without message attribute

<aura:application extends="force:slds">
    <c:Welcome/>
</aura:application>

Step 5: Result

It will show “Hello” as the default value of the “message” attribute(in Step 1) due to we have not passed the value of “message” attribute from the App to Component.

3,689 total views, 5 views today

How to build your first Lightning Component?
Only View, No Logic

Step 1: Create Lightning Component Bundle named “Welcome”
After creation, we will get four primary files such as

• Welcome.cmp
• Welcome.css
• WelcomeController.js
• WelcomeHelper.js

We need to update Welcome.cmp & Welcome.css file for now.

Welcome.cmp | Describes View Layout

<aura:component>   
   

<div class="slds slds-m-top--x-large slds-align_absolute-center tagLine">
    	Welcome to Everyone !!
   </div>


</aura:component>

Welcome.css | Describes Styling

.THIS.tagLine{   
    font-size:30px;
    color:#0066CC;
}

Step 2: Create Lightning App named “LearningLightning”

LearningLightning.app | To run this newly created Lightning Component

<aura:application extends="force:slds">
    <c:Welcome/>
</aura:application>

You can notice that we are using the tag extends=”force:slds” to run the Lightning Application using Lightning Styles.

Step 3: Result

3,091 total views, 3 views today