1

I was able implement adding/removing rows dynamically functionality in LWC by following this blog of ADDING/REMOVING ROWS DYNAMICALLY IN LWC.

However, I want to extend the functionality such that whenever you "add row" it will clone all the records from previous row to the next row.

When I mean clone, I mean all the data types like:

  • Lookup
  • Picklist
  • Text
  • Number

For example, I want the LWC placed on the Account Record Page and I would do that by doing <target>lightning__RecordPage</target> in the meta.xml. Then to bulk insert contacts, I want it to default the accountId lookup to the particular account record id. And then after I fill up the other fields like Last Name, Industry, Height(m) and press "add row" it will clone all these values to next row.

  • So what if you have 2 rows with 2 different values? What do you want to happen if the user clicks on the button to add a new row? Do you want to copy the last row? – Arthlete Jul 2 at 21:59
  • @Arthlete I don't want it so complicated. Just copy the last row. I rather have just 1 add button at the footer level instead of each row level. So when you have 1 row and you press add, copies the 1 row to 2nd row. Then when you have 2 rows and when you press add, copy the 2nd row to 3rd row. – compski Jul 3 at 1:29
1

Note: I am not exactly sure what needs to happen if the user has 2 rows with 2 different sets of values when they click on the add new row button. But I will assume that you want to copy the last row and if you need to you can modify the code below to tailor it to your needs.

Also, I couldn't set up a LWC playground because lightning-record-edit-form doesn't seem to be supported there. Take the code below with a grain of salt and let me know if something is not working so I can test in my sandbox later.

What you need to do is set the value for the lightning inputFields.

Let's take the first field as an example:

<template for:each={itemList} for:item="item" for:index="index">
        <lightning-record-edit-form key={item.id} object-api-name="Contact">
            <lightning-messages> </lightning-messages>
            <lightning-layout multiple-rows>
                <lightning-layout-item size="12" small-device-size="6" medium-device-size="4" large-device-size="2"
                        padding="around-small">
                    <lightning-input-field field-name="FirstName" variant="label-stacked" required>
                    </lightning-input-field>

What you should do is add a value property to the inputField like so:

<lightning-input-field field-name="FirstName" variant="label-stacked" required value={item.firstName}>

Next you need to make some changes on the JS side as well:

@track itemList = [
    {
        id: 0,
        firstName: ''
    }
];

addRow() {
    let firstNameInputs = this.template.querySelectorAll('lightning-input-field');
    const firstNameValue = firstNameInputs[firstNameInputs.length-1].value;
    ++this.keyIndex;
    var newItem = [{ id: this.keyIndex, firstName: firstNameValue}];
    this.itemList = this.itemList.concat(newItem);
}

Similarly you can work your code to set the other values that you need it to. Now when the new is added JS will check if there's a firstName value for each item from the itemList and if there is one it will prepopulate the firstName field for that row.

| improve this answer | |

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.