1

I'm building a dynamic custom UI which is configurable via custom metadatatype. I declare field label, datatype, position(left/right columns on UI) etc on the CMD.

I populate fields using aura:iteration of the UI like below,

<aura:iteration items="{!v.myMetadata}" var="md">
                                <lightning:layoutItem size="6">
                                    <lightning:layout horizontalAlign="spread">
                                        
                                        <lightning:layoutItem size="5" class="slds-p-around_medium slds-align_absolute-center">
                                            <lightning:input type="{!md.Datatype__c}" name="{!md.Field_Label__c}" aura:id="{!md.Field_Label__c}"
                                                             dateStyle="short" label="{!md.Field_Label__c}"/>
                                        </lightning:layoutItem>
                                        
                                    </lightning:layout>
                                </lightning:layoutItem>
                            </aura:iteration>

If I create 10 records in CMD, I get 10 input fields on the UI. I want to capture all the input data from the UI. I tried the dynamic aura:id but didn't work. I came across an idea for dynamic aura:id here and assuming this wouldn't work, https://trailblazer.salesforce.com/ideaView?id=0873A000000E8fBQAS

Wanted to see if there are any other alternatives to capture user input data for dynamic fields? Please let me know.

1
  • where do you want to capture them?
    – User6670
    Nov 15, 2020 at 7:50

1 Answer 1

2

As mentioned here, you cannot set aura:id value dynamically.

aura:id doesn't support expressions. You can only assign literal string values to aura:id.

But you could manage to implement the following approach:

  • Set same aura:id for all the lightning:input elements; so when you query by this ID, you will get an array of these elements [in the same order they are rendered in the page].
  • Loop thru this array and use v.label or v.value to identify the input element label or to get its value correspondingly. Rest of the Javascript code in your component can be made dynamic based on these values. [or you may use some other attributes to manage your logic]. Ref

Disclaimer: I'm not recommending this approach as a best practice and in fact, this might not be suitable for building a generic re-usable component. But, you can achieve some degree of dynamic handling for individual aura component using this approach.

1
  • Thank you @arut. This helps. Looks like this is the only way.
    – Anurag
    Nov 15, 2020 at 17:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .