0

I have a form and using lightning-record-edit-form I'm creating multiple records.

I want to process the values of form further before saving them in Salesforce and for that reason I want to call custom apex method to process all of them.

I don't want to process them in LWC as I need to do multiple SOQL query.

Is there a way to pass record edit form as list of records and then process them in apex method.

HTML:

    <template for:each={prodCompensationList} for:item="item" for:index="index">
                <lightning-record-edit-form key={item.id} object-api-name="Compensation_Product__c" class="slds-m-bottom_medium my-form">
                    <lightning-messages> </lightning-messages>
                    <lightning-layout>
                        <lightning-layout-item size="4" padding="around-small">
                            <lightning-input-field field-name="Product__c" variant="label-stacked" value={item.Product__c} required>
                            </lightning-input-field>
                        </lightning-layout-item>
                        <lightning-layout-item size="4" padding="around-small">
                            <lightning-input-field field-name="Quantity__c" variant="label-stacked" value={item.Quantity__c} required>
                            </lightning-input-field>
                        </lightning-layout-item>
                    </lightning-layout>
                        
                        
                </lightning-record-edit-form>
            </template>
</br>
        <lightning-layout>
            <div class="slds-align_absolute-center">
                <lightning-button variant="success" onclick={handleSubmit} name="submit" label="Submit">
                </lightning-button>
            </div>
        </lightning-layout>

JS:

const recordEditForms = this.template.querySelectorAll('lightning-record-edit-form');
            recordEditForms.forEach(element => {
            // Get the input fields within the record-edit-form
            const inputFields = element.querySelectorAll('lightning-input-field');
            let fieldValues = {};

            // Loop through each input field and add the field value to the fieldValues object
            inputFields.forEach(field => {
                fieldValues[field.fieldName] = field.value;
            });

            // Log the field values to the console
            console.log('Field Values:', fieldValues);

What I'm not able to understand is how to pass them as a list of records.

2 Answers 2

2

That would look something like:

const records = [
  ...this.template.querySelectorAll("lightning-record-edit-form")
].map((element) =>
  Object.fromEntries([
    ["sobjectType", "Compensation_Product__c"],
    ...element
      .querySelectorAll("lightning-input-field")
      .map((field) => [field.fieldName, field.value]),
  ])
);

First, we query the forms and copy the array to make it a real array, then we create an object that will contain the fields. Your final data should look like this:

[ { sobjectType: 'Compensation_Object__c', Product__c: '12345', Quantity__c: 12345 },
  { sobjectType: 'Compensation_Object__c', Product__c: '23456', Quantity__c: 23456 },
...
]

Your Apex method would then look like:

@AuraEnabled public static myMethod(Compensation_Object__c[] records) {
...
4
  • why i would set sobjectType in the records array ? I can cast it in Apex ? May 2, 2023 at 20:17
  • 1
    @AnshulAgrawal Casting is too late; you want to specify the sobjectType property to make sure the Apex runtime knows the type of record it is dealing with.
    – sfdcfox
    May 2, 2023 at 20:48
  • @sfdcfox I assume the list will be stored in records variable, but when I use console log, I'm not seeing it's getting executed May 3, 2023 at 17:06
  • @salesforceDeveloper That should work, I've written similar code before. Any errors? Also, you can try debugging it by putting the statement debugger; in your JS file before const records = ..., and use the debugging tools (F12 | Sources) in the browser to walk through the code.
    – sfdcfox
    May 3, 2023 at 18:20
0

Since the items are coming from prodCompensationList, I would suggest, you put a onchange handler on every lightning-input-field.

<lightning-input-field field-name="Product__c" variant="label-stacked" value={item.Product__c} data-id = {item.Id} required>
</lightning-input-field>

So for example, let's say we have the following:

Product Quantity
A 10
B 12

Since each row has a unique Id, if I changed the Quantity for product B, then the onchange would look something like this:

handleQtyChange(event){
    let item = this.prodCompensationList.find(i => i.id === event.target.dataset.id)
    if (item){ // extra validation
    item.Quantity__c = event.target.value;
    }

now let's say your apex code accepts a List as input parameter,

public static void createProduct(List<Product2> items)

If have all the required fields for the particular object populated.

For example, let's just say in this case Product2 Object mandatory fields are, Id, Name and Quantity.

Then in your JavaScript, if each object in prodCompensationList has the following properties

  1. Id
  2. Name
  3. Quantity

Then you can just pass in the list of object as an argument to your apex class:

Javascript:

    createProduct(prodCompensationList) 

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .