0

Currently I have this loop which can dynamically create a lightning:inputField:

for(var i = 0; i < editFieldsToRender.length; i++) 
   {    
       $A.createComponent
           (
           "lightning:inputField",
           {
               "aura:id"   : editFieldsToRender[i],
               "fieldName" : editFieldsToRender[i]+"__c"
           },
           function(newInputField)
           {
               if(i%2 === 0)
           {
               editFields1.push(newInputField);
               component.set("v.editFields1", editFields1);
           }
           else
           {
               editFields2.push(newInputField);
               component.set("v.editFields2", editFields2);
            }
        }
    );
}

Here is how I am creating my current recordEditForm which works, but without a div wrapping around each lightning:inputField:

 <lightning:recordEditForm aura:id="editForm" recordId="{!v.CallTrackingId}" objectApiName="CallTracking__c" onsubmit="{!c.saveCallTracking}" >
        <lightning:button variant="brand" name="save" type = "submit" label="Save" class="slds-m-top_medium"/>
        <lightning:button variant="brand" name="cancel" label="Cancel" onclick="{!c.closeCallTracking}" class="slds-m-top_medium"/>
        <lightning:messages />
        <div class="slds-grid slds-wrap slds-gutters slds-cell-wrap">           
            <div class="slds-col slds-p-horizontal_medium" >  
                {!v.editFields1}
            </div>         
            <div class="slds-col">  
                {!v.editFields2}
            </div> 
        </div>  
    </lightning:recordEditForm>

The dynamically created lightning:inputField works fine however I was wondering if I can also dynamically create a div and add the lightning:inputField into that and push the entire component into either editFields1 or editFields2. Is such a thing possible?

Essentially what I want to do is have the example below created through $A.createComponent:

<lightning:recordEditForm aura:id="editForm" recordId="{!v.CallTrackingId}" objectApiName="CallTracking__c" onsubmit="{!c.saveCallTracking}" >
        <lightning:button variant="brand" name="save" type = "submit" label="Save" class="slds-m-top_medium"/>
        <lightning:button variant="brand" name="cancel" label="Cancel" onclick="{!c.closeCallTracking}" class="slds-m-top_medium"/>
        <lightning:messages />
        <div class="slds-grid slds-wrap slds-gutters slds-cell-wrap">           
            <div class="slds-col slds-p-horizontal_medium" > 
                <div aura:id = "exampleId1">
                    <lightning:inputField aura:id = "exampleFieldId1" fieldName = "exampleFieldName1__c" />
                </div>         
            <div class="slds-col">  
                <div aura:id = "exampleId2" >
                    <lightning:inputField aura:id = "exampleFieldId2" fieldName = "exampleFieldName2__c" />
                </div>
            </div> 
        </div>  
    </lightning:recordEditForm> 
3
  • have you given it a try? if yes, what problem have you encoutered?
    – glls
    Commented Oct 17, 2018 at 22:19
  • I've tried to create the lightning:inputField and then pushing that object into a dynamically created aura:html div. However, I couldn't get the nesting right and have it work. I was looking at what @Keith said below and I think that would be the better idea to go with.
    – ztrition
    Commented Oct 18, 2018 at 13:24
  • If you run into any specific issues while implementing, feel free to opne a new post, and remember to mark the asnwer as accepted if it helped. cheers!
    – glls
    Commented Oct 18, 2018 at 13:30

2 Answers 2

2

You can dynamically create the aura:html component and hook up the lightning:inputField inside that programmatically.

But it is usually simpler to create a declarative component where no JavaScript is needed so the framework does the nesting work and it is clearer to the reader of the code what is going on:

<aura:component>
    <aura:attribute name="fieldName" type="String"/>
    <div class="slds-col">  
        <div>
            <lightning:inputField fieldName="{! v.fieldName }" />
        </div>
    </div>
</aura:component>

You can then just dynamically create this new component and you will get the nesting done for you.

1
  • That makes sense, something I didn't think about when searching for answer. Thanks for the suggestion!
    – ztrition
    Commented Oct 18, 2018 at 13:21
0

I ended up using Keiths suggestions which works great and was very easy to implement.

I made a LightningInputFieldWithDiv component:

<aura:component>
    <aura:attribute name="divId" type="String" />
    <aura:attribute name="inputFieldId" type="String" />
    <aura:attribute name="fieldName" type="String"/>
    <div aura:id="{!v.divId}">           
        <lightning:inputField aura:id="{!v.inputFieldId}" fieldName="{!v.fieldName }" />
   </div>
</aura:component>

My Helper which creates the component:

for(var i = 0; i < editFieldsToRender.length; i++) 
{    
    $A.createComponent
    (
        "c:LightningInputFieldWithDiv",
        {
           "divId": editFieldsToRender[i]+"Div",
           "inputFieldId": editFieldsToRender[i],
           "fieldName": editFieldsToRender[i]+"__c"
        },
        function(newInputField)
        {
           if(i%2 === 0)
        {
           editFields1.push(newInputField);
           component.set("v.editFields1", editFields1);
        }
        else
        {
           editFields2.push(newInputField);
           component.set("v.editFields2", editFields2);
        }
     }
  );
}

You must log in to answer this question.

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