I have a requirement to create multiple records of a custom object by Adding or Deleting new rows on UI using Lightning Web Components. I was able to add one record by binding each lightning-input using event.target.value taking name attribute of the lightning-input as the unique identifier but I'm unable to understand how to do this dynamically.

Html code:

<lightning-layout-item padding="around-small">
      <lightning-input type="number" formatter="currency" name="amount" value={Custom_Object__c.Amount__c} onchange={handleChange} required></lightning-input>

<lightning-layout-item padding="around-small">
      <lightning-input name="size" value={Custom_Object__c.Size__c} onchange={handleChange} required></lightning-input>

JavaScript code:

if (event.target.name === 'amount') {
        this.Custom_Object__c.Amount__c = event.target.value;
    if (event.target.name === 'size') {
        this.Custom_Object__c.Size__c = event.target.value;

I would look at the datatable component documentation:


Specifically the data table with row actions and the data table with inline edit examples.

Too much code to try to bring over but it should get you set up so that you can create tables with row based actions and shows how to add or remove items from a table.

Ultimately, what you want, is an array of objects to track the rows of your table. These rows will be basic JS objects with all the properties you will want access to when you go to create or delete the records at a later time.

You will want a second array to keep track of records that should be deleted. When selecting the delete action, the records should be moved from the upsert array into the delete array.

You will probably have a button somewhere that allows for adding new instances of these objects to create new records. When clicking the button an empty object should be added to your array which will then rerender your table with a new, blank row.

You will also have a save button somewhere. When clicked this save button will translate the data in the basic JS list into new records or updates to existing records. This will also fire the code to delete any records identified for deletion.

This documentation can teach you how to actually work with SF data, including creating or deleting records

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.