Add Delete Row Dynamic In Lightning Component : Sample Code

Lightning Component

Hi Guys,

Today in this post we are going to learn, How to Add Delete Rows Dynamic In Salesforce Lightning Component By Using Client Side JavaScript Controller.

In this post, we are created 2 sample lightning component, by these lightning components You can create multiple records as your requirement by Adding or Deleting new rows on UI. we will also make, ‘first name’ as a required Input field

Add Delete Rows Dynamic In Lightning Component sfdcmonkey
Component Output:

 

Component Blue Print :

Add Delete Rows Dynamic In Lightning Component sfdcmonkey

For done this we have created 2 Lightning Components and 2 Lightning Events for pass values/actions from child component to parent. Events can contain attributes that can be set before the event is fired and read when the event is handled.

Step 1 : Create Lightning Event : AddNewRowEvt.evt

From Developer Console >> File >> New >> Lightning Event

Step 2 : Create Lightning Event : DeleteRowEvt.evt

From Developer Console >> File >> New >> Lightning Event

Step 3 : Create Lightning Component : dynamicRowItem.cmp [Child Component]

From Developer Console >> File >> New >> Lightning Component

  • See Code Comments.
JavaScript Controller : dynamicRowItemController.js

  • See Code Comments.
Step 4 : Create Apex Controller : addDeleteController.apxc

From Developer Console >> File >> New >> Apex Class

  • By above apex controller we are save the contacts.
Step 5 : Create Lightning Component : dynamicRow.cmp [Parent Component]

From Developer Console >> File >> New >> Lightning Component

  • See Code Comments.
JavaScript Controller : dynamicRowController.js

  • See Code Comments.
JavaScript Helper : dynamicRowHelper.js

  • See Code Comments.
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]

Output:

Add Delete Rows Dynamic In Lightning Component sfdcmonkey

Related Resource:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂

 

(Visited 14,222 times, 54 visits today)

26 comments

  • This page has an error. You might just need to refresh it. Action failed: c:dynamicRow$controller$Save [i is not defined] Failing descriptor: {c:dynamicRow$controller$Save}         i m getting error  can u help me out?

    • Hi jagannath,
      sorry my Typo mistake in the javaScript helper code of dynamicRowHelper [Line number 18].
      Please correct for loop last parameter, Use indexVar++ InsteadOf i++
      for (var indexVar = 0; indexVar < allContactRows.length; indexVar++) {

      Thanks for inform on this

  • This page has an error. You might just need to refresh it. i m getting the following errors can u help me out?

    Error in $A.getCallback() [Cannot read property ‘FirstName’ of null]

    Error in $A.getCallback() [Cannot read property ‘LastName’ of null]

    Error in $A.getCallback() [Cannot read property Phone’ of null]

    When click on Add button

    This page has an error. You might just need to refresh it.
    Action failed: c:dynamicRowItem$controller$AddNewRow [Cannot read property ‘fire’ of null]
    Failing descriptor: {c:dynamicRowItem$controller$AddNewRow}

    • are you using the same code ? Lightning Component and JavaScript are case sensitive, make sure your Object API field Names are correct

  • Hay

    This Page has an error .You might just need to refresh it.Like.

     

    Error in $A.getCallback() [Cannot read property ‘FirstName’ of null]

    How can I use look up and currency field.

     

     

  • Hello,

    I’m very new to SFD and love, love, love your posts here. I am using your above example (modifying a little to make it my own) and made two components, the one component works like a dream but the other throws an error when I try to delete a row. The only difference is the one has an  ui:inputSelect field and thats the field that’s causing the error. It actually does delete the row but I always get this error.  Again I don’t have this problem on my other component that is identical to this other than it does not have an inputSelect control. Any thoughts?

    Error:

    Uncaught Action failed: ui:inputSelect$controller$valueChange [Cannot read property ‘inputselect field’ of undefined]
    Callback failed: apex://FormController/ACTION$deleteLineItem

    Thanks again for sharing your knowledge and helping us learn.

  • Thanks for the code. Can you just help me with below requirement :

    I want to show this dynamic row adding with 3 fields  inside another parent component and save the 3 fields value on that parent object. How to achieve this functionality? Need help, to get a way to do it.

  • Hi,

    I’m getting below error . Please help. I’m using this on custom object and field is picklist which is throwing error.

     

    This page has an error. You might just need to refresh it. Action failed: ui:inputSelect$controller$valueChange [Cannot read property ‘Company__c’ of undefined] Callback failed: apex://addDeleteController/ACTION$saveCars Failing descriptor: {ui:inputSelect$controller$valueChange}

  • Ive used this way of iterating over a component to add multiple rows but only one rows gets added during initialization. Consequent actions to add rows prove futile.

  • This page has an error. You might just need to refresh it. Unknown controller action ‘AddNewRow’ Failing descriptor: {markup://c:dynamicRowItem}

  • This worked out great! Where can I find information on adding a picklist to the table and using with the controllers?

  • How do we insert these multiple contacts with Account?
    Basically, how do we insert records with lookup field(using recordEditForm)

Leave a Reply