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.
- To Provide Id to component salesforce have aura:id attribute.
- Salesforce does not restrict developer to give same ID to multiple component.
- When we access component using Id in JS then developer need to take care of three thing.
- If multiple component found with given Id then we get array of component.
- If one component found with given Id then we get object.
- If no component found then we get undefined.
I have created one component Named LocalIdComponentExample.
1. Component of 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.