1

I've created a lightning record edit form that should create a brand new account record. I have a onsuccess={handleSuccess} and onerror={handleError} defined, but when pressing save the record is not created and there are no error.

Everything looks like it should work to me but cant spot the problem or find a workaround.

I get the layout information via the onload. Then loop over the data to display the fields and sections that I wish to display.

Heres the code:

.html

<template>
    <div class="slds-card">
        <div class ="slds-m-around_large">

            <lightning-accordion allow-multiple-sections-open="true" active-section-name={activeSectionNames}>
                <lightning-record-edit-form object-api-name="Account" 
                                            onload={handleLoad} 
                                            record-type-id="0122z000000hzHuAAI" 
                                            onsuccess={handleSuccess} 
                                            onerror={handleError}>
                    <lightning-messages></lightning-messages>                    

                       <template if:true={uiRecordToDisplay}> 
                            <lightning-layout multiple-rows="true">
                                <lightning-layout-item size="12">
                                    <template for:each={uiRecordToDisplay} for:item="section">
                                        <template if:true={section.showSection}> 
                                            <lightning-accordion-section key={section.id} name={section.id} label={section.heading}>
                                                <lightning-layout multiple-rows="true">
                                                    <template for:each={section.layoutRows} for:item="layoutRow">
                                                        <template for:each={layoutRow.layoutItems} for:item="layoutItem">
                                                            <template for:each={layoutItem.layoutComponents} for:item="layoutComponent">
                                                               <template if:true={layoutComponent.showField}>  
                                                                    <lightning-layout-item key={layoutComponent.apiName} size="6" padding="horizontal-small">
                                                                        <lightning-input-field field-name={layoutComponent.apiName} required={layoutItem.required}></lightning-input-field>
                                                                    </lightning-layout-item>
                                                                </template> 
                                                            </template>
                                                        </template>
                                                    </template>
                                                </lightning-layout>
                                            </lightning-accordion-section>
                                        </template> 
                                    </template>
                                </lightning-layout-item>
                            </lightning-layout>
                        </template> 
                     
                </lightning-record-edit-form>
            </lightning-accordion> 
        
            <footer class="slds-card__footer">
                <div class="slds-align_absolute-center">  
                    <lightning-button class="slds-p-left_small" label="Cancel" title="Cancel" onclick={handleEditClickCancel} ></lightning-button>  
                    <lightning-button class="slds-p-left_small" variant="brand" label="Save" title="Save" type="submit" onclick={handleSuccess}> </lightning-button>
                </div>
            </footer>
        </div>
    </div>
</template>

.js

import { LightningElement } from 'lwc';

export default class RecordEditFormCreateRecord extends LightningElement {

    uiRecordToDisplay;
    showSections;
    activeSectionNames = []; 

    handleLoad(event) {
        console.log('Layout => ', JSON.stringify(event.detail.layout));

        let layoutParse = JSON.parse(JSON.stringify( Object.values(event.detail.layout.sections)));
        console.log('*** layoutParse *** ', layoutParse);

        this.uiRecordToDisplay = Object.values(layoutParse);
        console.log('*** this.uiRecordToDisplay *** ', this.uiRecordToDisplay);

        // Get the Section headers from the layout. Populate activeSectionNames so the accordion will have the tabs open when it loads.
        for(const tabs of layoutParse){
            this.activeSectionNames.push(tabs.id);
        } 
        console.log('*** this.activeSectionNames *** ', this.activeSectionNames); 

        this.showRow();    
    }

    showRow(){
        let forData = this.uiRecordToDisplay
        console.log('*** START showRow *** ');
        console.log('*** this.uiRecordToDisplay *** ', this.uiRecordToDisplay);
        console.log('*** forData *** ', forData);

       
        for(const sec of forData) {
            sec.showSection = false;
            for(const lr of Object.values(sec.layoutRows)) {
            
                for(const li of Object.values(lr.layoutItems)) {

                    for(const l of Object.values(li.layoutComponents)) {
                            l.showField = true;
                            sec.showSection = true;
                    } 
                }
            }
        }

        // reset the uiRecordView and Edit with the updated array information 
        this.uiRecordToDisplay = forData;
        console.log('*** END showRow *** ', this.uiRecordToDisplay); 
    }

    handleSuccess(event){
        console.info("START handleSuccess");
    
        this.createdRecordId = event.detail.id;
  
        console.info("END handleSuccess < ", event.detail.id, " >");
    }

    handleError(event){
        console.info("START handleError");

        const updatedRecordError = event.detail;

        console.info("END handleError < ", event.detail, " >");
    }
}

1 Answer 1

2

I haven't tested this but I think it's because:

  1. Your buttons are outside of your record-edit-from tags
  2. Your buttons have their own onclick attributes. The record-edit-form already has those attributies and those are enough.

With some luck changing that will solve your problem

2
  • Thanks for pointing that out. I've put that inside the tags and its working Feb 26 at 11:38
  • @StevenHodge Happy to help, glad it works now
    – Kasper
    Feb 26 at 23:39

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.