0

My idea is to create a dynamic add/delete row functionality without specifying a particular object to attribute. I got my hands dirty by developing a component as follows:

Add_Del_Row.cmp

<aura:component >
    <aura:attribute name="cusObj" type="Object"></aura:attribute>
    <aura:attribute name="headings" type="List" ></aura:attribute>
    <aura:attribute name="fieldAPiNames" type="List" ></aura:attribute>

    <table>
        <thead>
         <tr class="slds-text-title_caps">
        <aura:iteration items="{!v.headings}" var="h">
            <th scope="col">
                <div class="slds-truncate" title="{!h}">{!h}</div>
            </th>
        </aura:iteration>
         </tr>
        </thead>
        <tbody>
            <tr>
            <aura:iteration items="{!v.fieldAPiNames}" var="f">
                <td><ui:inputText class="slds-input" value="{!v.cusObj.f}"></td>
            </aura:iteration>
            </tr>
        </tbody>
    </table>    <br/>
<lightning:button variant="brand" label="Add" onclick="{! c.save }"></lightning:button>
</aura:component>

Add_Del_Row.js:

save:function(cmp,evt,helper){
    var selectedVals = cmp.get('v.cusObj');
    console.log('selects--'+ selectedVals);
}

Finally My app is as follows:

<c: Add_Del_Row headings="['Name','Phone','Email','Age']"
               fieldAPiNames="['Name','Phone','Email','Age__c']" cusObj="Contact"></c:Add_Row_cmp>

Table was rendered perfect. But the values given as input are not able to accessible in .js controller. Is there a way to reference them?

  • This {!v.cusObj.f} is no valid syntax. Check this answer for more information – Basti Nov 27 '17 at 11:55
  • In this scenerio you want to create Component dynamically,you cant set {!v.cusObj.f} Like this in markup. check link for more details developer.salesforce.com/docs/atlas.en-us.lightning.meta/… – vignesh Nov 27 '17 at 12:01
  • vignesh -- When i try using $A.createCompoents , result was not getting in column formats. If i create two ui:inputText, they're styling vertical instead of horizontal. – Rv1 Nov 27 '17 at 12:09
  • @Rv1 can you edit the question with latest code. – vignesh Nov 27 '17 at 12:15
  • @vignesh I have created another test component for that. Didn't include it in this component – Rv1 Nov 27 '17 at 12:16

Your Answer

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

Browse other questions tagged or ask your own question.