Adding table row dynamically in Lightning Web Component

4.9K

Recently I got requirement from one of our group member, to create dynamic configurable table creation for creating new record in Salesforce objects.

Use Case:

Create a configurable table for adding/deleting new rows in lightning data table. Types of fields will be configurable while adding new rows. On submit save record in multiple Salesforce objects.

Solutions:

There could be two below solutions for this use case

1. Create a new dynamic lightning web component
2. Use record-edit-form to create table

This post will solve our use case using solution approach#1.

1. Create a new dynamic lightning web component

We can create one lightning web component which will handle table creation based on configured columns and it’s type. Before creating data table component, let us create field type components to configure these in data table. This field type component will help us in getting record values easily.

Text Type component

This component will create text field component for table. It will only rendered when cell type is text.

Picklist type component

This component will create picklist field component for table. Picklist values will show based on configuration properties.

Picklist values will be populated based on object name and field name which is setup while configuring cell fields. getPicklist is called to get picklist values and it is rendered in lightning-combobox.

AccountController.getPickList: This apex method will be used to get picklist values. See apex code from below attached apex class.

Create table component

Use above mentioned field components to create dynamic table. This table will add delete icon to delete row from table. On submit, record will be saved in multiple object using lightning data service.

As there could be multiple records to save, each rows fields information is fetched using retrieveRecords methods and returned to caller. We have user css class to get each row fields information.

Test Component:

Now we are ready with component creation, let us test above created dynamic component. We have setup three columns, two are text fields and one is picklist. For picklist we have setup object name also. When submit button will be clicked, we need to fetch rows data and we can save using apex code.

const columns=[
    { "label" : "Name", "apiName" : "Name" ,"fieldType":"text","objectName":"Account"}, 
    { "label" : "Phone", "apiName" : "Phone" ,"fieldType":"text","type":"phone","objectName":"Account"},
    { "label" : "Account Source", "apiName" : "AccountSource","fieldType":"picklist","objectName":"Account" }
];

Apex Code:

Test Page:

Related Posts

Dynamic Code Execution using Callable Interface

Dynamic Record Page Creation using FieldSet

Generic DataTable in Lightning Web Component