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

7,040 total views, 1 views today