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> 
  • have you given it a try? if yes, what problem have you encoutered? – glls Oct 17 '18 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 Oct 18 '18 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 Oct 18 '18 at 13:30
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.

  • That makes sense, something I didn't think about when searching for answer. Thanks for the suggestion! – ztrition Oct 18 '18 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);
        }
     }
  );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.