I have the written the following code which creates a contact record and fires a toast message on successful creation of the record. The problem with the code is the record is created but the toast message is not displayed.
HTML:
<template>
<lightning-card title="Create Contacts" class="slds-p-around_medium">
<lightning-input type="text" class="slds-m-around_medium" data-id="firstNameId" label="Enter your First Name" onchange={inputHandler}></lightning-input>
<lightning-input type="text" class="slds-m-around_medium" data-id="lastNameId" label="Enter your Last Name" onchange={inputHandler}></lightning-input>
<lightning-input type="email" class="slds-m-around_medium" data-id="emailID" label="Enter your Email" onchange={inputHandler}></lightning-input>
<lightning-button label="Create Contact" class="slds-m-around_medium" variant="brand" onclick={createContact}></lightning-button>
</lightning-card>
JS:
import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import {showToastEvent} from 'lightning/platformShowToastEvent';
export default class RecordCreationLWC extends LightningElement {
firstName;
lastName;
email;
errormessage='';
inputHandler(event){
if(event.target.dataset.id === 'firstNameId'){
this.firstName = event.target.value;
console.log(this.firstName);
}
else if(event.target.dataset.id === 'lastNameId'){
this.lastName = event.target.value;
console.log(this.lastName);
}
else if(event.target.dataset.id === 'emailID'){
this.email = event.target.value;
console.log(this.email);
}
}
createContact(event){
const fields = {'FirstName' : this.firstName, 'LastName' : this.lastName, 'Email': this.email};
createRecord({'apiName' : 'Contact','fields' : fields}).then(response => {
console.log(response.id)
this.showToast();
}).catch(error => {
this.errormessage = error.body.message;
})
}
showToast() {
const event = new ShowToastEvent({
title: 'Contact',
message: 'Contact created successfully',
variant: 'success'
});
this.dispatchEvent(event);
}
}
XML:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<!--<target>lightning__Tab</target>-->
<!--<target>lightning__RecordAction</target>-->
<!--<target>lightning__Inbox</target>-->
<!--<target>lightning__UtilityBar</target>-->
<!--<target>lightning__FlowScreen</target>-->
<!--<target>lightningSnapin__ChatMessage</target>-->
<!--<target>lightningSnapin__Minimized</target>-->
<!--<target>lightningSnapin__PreChat</target>-->
<!--<target>lightningSnapin__ChatHeader</target>-->
<!--<target>lightningCommunity__Page</target>-->
<!--<target>lightningCommunity__Default</target>-->
<!--<target>lightningCommunity__Page_Layout</target>-->
<!--<target>lightningCommunity__Theme_Layout</target>-->
</targets>
</LightningComponentBundle>