function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Inbox OutboxInbox Outbox 

creating a record using lightning-record-edit-form. I am stuck at the handlers

I am trying to create a record using lightning-record-edit-form, however I am kind of stuck as to how to approach this. 
I want to include a toast message after the account creation, I understand that I have to create a handler in the lightning-input-field as well. But I am not sure how to do this. 

https://salesforce.stackexchange.com/questions/274178/lightning-web-components-save-form-data-to-the-controller

The above link shows what I need but it is kind of complicated for me. I am looking for may be a simpler code than this. 
Can anyone help me please?

Here is my code:
<template>
    <lightning-card title= "Lightning">
       <lightning-record-edit-form
       object-api-name={objectName}
       >
       <div class= "slds-box">
        <lightning-input-field field-name={fields.contactName}></lightning-input-field>
        <lightning-input-field field-name={fields.contactTitle}></lightning-input-field>
        <lightning-input-field field-name={fields.contactPhone}></lightning-input-field>
        <lightning-input-field field-name={fields.contactEmail}></lightning-input-field>
        <lightning-input-field field-name={fields.ccountId}></lightning-input-field>
        <lightning-button 
         class= "slds-m-around_xx-small" 
         variant= "neutral" 
         label= "Cancel" 
         onclick={cancelHandler}>
        </lightning-button>
        <lightning-button 
         class= "slds-m-around_xx-small" 
         variant= "brand" 
         label= "Submit" 
         onclick={saveHandler}>
        </lightning-button>
       </div>
       </lightning-record-edit-form>
    </lightning-card>
        </template>

JS:
import { LightningElement, api } from 'lwc';
import CONTACT_OBJECT from '@salesforce/schema/Contact'
import CONTACT_NAME from '@salesforce/schema/Contact.Name'
import CONTACT_TITLE from '@salesforce/schema/Contact.Title'
import CONTACT_PHONE from '@salesforce/schema/Contact.Phone'
import CONTACT_EMAIL from '@salesforce/schema/Contact.Email'
import CCOUNT_ID from '@salesforce/schema/Contact.AccountId'
export default class RecordEditForm extends LightningElement {
    objectName= CONTACT_OBJECT;
    fields= {
        contactName: CONTACT_NAME,
        contactTitle: CONTACT_TITLE,
        contactPhone: CONTACT_PHONE,
        contactEmail: CONTACT_EMAIL,
        ccountId: CCOUNT_ID
    }
    // cancelHandler(event){
    //     event.target.value
    // }
    // saveHandler(event){
    //     event.target.value
    // }
}.

 
Best Answer chosen by Inbox Outbox
AbhinavAbhinav (Salesforce Developers) 
HI ,

You need to handle onsuccess attribute of lightning-record-edit-form tag to display toast message on record Creation.
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Make sure to Import ShowToastEvent in jS 


Sample Code to display toast messgae on Contact creation

Html
<template>
    <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess} onsubmit ={handleSubmit}>
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name='AccountId'></lightning-input-field>
        <lightning-input-field field-name='FirstName'></lightning-input-field>
        <lightning-input-field field-name='LastName'></lightning-input-field>
        <lightning-input-field field-name='Email'></lightning-input-field>
        <lightning-button class="slds-m-top_small" type="submit" label="Create Contact Rec">
        </lightning-button>
    </lightning-record-edit-form>
</template>

JS
 
import { LightningElement} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CreateRec extends LightningElement {
    handleSuccess() {

        const toastEvent = new ShowToastEvent({
            title: 'Toast message',
            message: 'Contact Record has been created',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(toastEvent);

    }
    handleSubmit(event) {
        
    }
}

Or you can check below reference as well for displaying toast message on Account Creation

https://jayakrishnasfdc.wordpress.com/2020/12/08/lightning-record-edit-form/

Hope it helps, Please mark it as best answer so that other facing similar issue find it useful.

Thanks!

All Answers

AbhinavAbhinav (Salesforce Developers) 
HI ,

You need to handle onsuccess attribute of lightning-record-edit-form tag to display toast message on record Creation.
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

Make sure to Import ShowToastEvent in jS 


Sample Code to display toast messgae on Contact creation

Html
<template>
    <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess} onsubmit ={handleSubmit}>
        <lightning-messages>
        </lightning-messages>
        <lightning-input-field field-name='AccountId'></lightning-input-field>
        <lightning-input-field field-name='FirstName'></lightning-input-field>
        <lightning-input-field field-name='LastName'></lightning-input-field>
        <lightning-input-field field-name='Email'></lightning-input-field>
        <lightning-button class="slds-m-top_small" type="submit" label="Create Contact Rec">
        </lightning-button>
    </lightning-record-edit-form>
</template>

JS
 
import { LightningElement} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class CreateRec extends LightningElement {
    handleSuccess() {

        const toastEvent = new ShowToastEvent({
            title: 'Toast message',
            message: 'Contact Record has been created',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(toastEvent);

    }
    handleSubmit(event) {
        
    }
}

Or you can check below reference as well for displaying toast message on Account Creation

https://jayakrishnasfdc.wordpress.com/2020/12/08/lightning-record-edit-form/

Hope it helps, Please mark it as best answer so that other facing similar issue find it useful.

Thanks!
This was selected as the best answer
Inbox OutboxInbox Outbox

Abhinav,

Thank you for helping me out. 
 

I am sorry for not clearly mentioning, what I want to do is to create a save and cancel buttons (handlers) along with the toast. I am stuck at creating the save and cancel button but not the toast. I am familiar with the toast constructor and all. 

The stackExchage thread kind of confused me. 

Again thank you and sorry for not clearly mentioning what I needed. Could you please help me with the save and cancel buttons?


 

AbhinavAbhinav (Salesforce Developers) 
StackExchange thread seems fine .Could you tell me what confusion you are having?