0

In my sample LWC page, I replicated the standard Edit button in Case object, then placed it inside a modal. Record update working so far, but I notice that footer containing Cancel and Save buttons are not fixed. Every time I scroll the custom form, footer also moves with it which is kind of weird.

I placed the footer outside lightning-record-edit-form but Save button is no longer working. I tried to put it back again inside the tag, and it works. Looks like it works only inside it. I really want to maximize update feature of lightning-record-edit-form.

Is there any way wherein I can place it inside lightning-record-edit-form and still achieve a fixed modal footer?

html file

<template>

    <div class="slds-theme_default">
    <template if:true={displayModal}>  
    <div class="edit-modal" style="height: 640px;">  
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_medium">      
    <div class="slds-modal__container"> 
    <header class="slds-modal__header">
        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
            <lightning-icon icon-name="utility:close" size="medium"></lightning-icon>
            <span class="slds-assistive-text">Close</span>
        </button>
        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">edit record</h2>
    </header>        
    <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
        <lightning-record-edit-form object-api-name="Case" 
                                    onsuccess={handleSuccess}
                                    record-id={recordId}>

           
            <div class="slds-grid slds-wrap"> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="AccountId"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2"> 
                    <lightning-input-field field-name="Status"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Type"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Origin"> 
                    </lightning-input-field> 
                </div>
                //....and other fields...didn't include, quite long

            </div>      
            <lightning-button class="slds-var-m-top_small" 
                              type="submit" 
                              label="Update"> 
                            </lightning-button>                           

        </lightning-record-edit-form>
    </div>
    </div>    
    </section>    
    </div>
    </template>    
    </div>
</template>

js file

import { LightningElement, track, api } from 'lwc'; 
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
export default class CaseEditPage extends LightningElement { 
 
    @api recordId; 
    @track displayModal = true; 

    handleSuccess( event ) { 
         
        const toastEvent = new ShowToastEvent({ 
            title: 'Case Updated', 
            message: 'Case Updated Successfully!!!', 
            variant: 'success' 
        }); 
        this.dispatchEvent( toastEvent ); 
 
    }

}
1

If you want to submit the form by using button outside the form, You can do it using a onclick handler.

handleSubmitButtonClick(){       
   this.template.querySelector('lightning-record-edit-form').submit();
}

handleSubmitButtonClick is your onclick handler of the button:-

<lightning-button class="slds-var-m-top_small" 
                              onclick={handleSubmitButtonClick} 
                              label="Update"> 
                            </lightning-button> 
| improve this answer | |
  • Upon implementing your suggestion, the footer is now fixed and steady while I am scrolling down the modal content. Clicking the button also saves the record. Thanks for helping! – lol Oct 15 at 5:35

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.