journey2salesforce

How to use Component Id?

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’}”

2,236 total views, 4 views today

Rating: 5.0/5. From 2 votes.
Please wait...

You may also like...