Monday, 30 July 2018

Access Lightning Component Using ID

Arpit Sharma

Salesforce Lightning Framework have ability to provide Id to lightning component so that we can access that components in component JS and in helper JS to access their property.
  1.  To Provide Id to component salesforce have aura:id attribute.
  2.  Salesforce does not restrict developer to give same ID to multiple component.
  3.  When we access component using Id in JS then developer need to take care of three thing.    
    1. If multiple component found with given Id then we get array of component. 
    2. If one component found with given Id then we get object.
    3. If no component found then we get undefined. 
   I have created one component Named LocalIdComponentExample.

1. Component of LocalIdComponentExample

<aura:component>
    <div class="slds-m-around_small">
        <h1>Component Id Example</h1>
        <lightning:input class="slds-m-around_small" label="IdAtSinglePlace" aura:id="idUsedHereOnly"></lightning:input>
        <lightning:input class="slds-m-around_small" label="IdAtMultiplePlace" aura:id="idUsedAtMultiplePlace"></lightning:input>
        <lightning:input class="slds-m-around_small" label="IdAtMultiplePlace" aura:id="idUsedAtMultiplePlace"></lightning:input>
        <div class="slds-m-around_small">
         <lightning:button onclick="{!c.checkId}" label="Check Id"></lightning:button>
        </div>
        <p class="slds-m-around_small">
         <lightning:formattedText  value="Click on Check Id button" aura:id="resultBlock"></lightning:formattedText>
        </p>
        <div class="slds-m-around_small">
         <lightning:formattedText  value="Single Component Result" aura:id="singleResult"></lightning:formattedText>
        </div>
        <div class="slds-m-around_small">
            <lightning:formattedText  value="Multiple Component Result" aura:id="multipleResult"></lightning:formattedText>
        </div>
        </div>
</aura:component>

2. Controller of LocalIdComponentExample

({
 checkId : function(component, event, helper) {
        component.find('singleResult').set('v.value','It return length  - '+component.find('idUsedHereOnly').length +' means it is object(one component found with given id)'+  ' : Value is - '+component.find('idUsedHereOnly').get('v.value'));
        component.find('multipleResult').set('v.value','It return length  - '+component.find('idUsedAtMultiplePlace').length+' means it is array(multiple component found with given id)'+ ' : Values are - '+component.find('idUsedAtMultiplePlace')[0].get('v.value')+','+component.find('idUsedAtMultiplePlace')[1].get('v.value'));
    }
})

Below is app Named ComponentIdApp in which I have used above component

1. Component of ComponentIdApp

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

Below is output when you will preview above app

If you found any issue in above code snippet and have any question, Please let me know.

About the Author

Arpit Sharma / Author & Editor

Certified Salesforce Developer | Salesforce Developer at Cognizant | Blogger