Unable to show salesforce id in Toast Message

Question

I am trying to create a record in an object and on record creation I want to display the salesforce id of that particular record on the toast message. If I comment out the "message: "New School Salesforce ID: "+this.event.id," line from .js file, the toast message is coming up as expected but if I include that line trying to display the id, I face the below outcome:

My code is as shown below:

HTML ->

<template>
<lightning-card title="SCHOOL RECORD CREATION FORM">
<lightning-record-form 
object-api-name={objectApiName}
fields={fields}
onsuccess={handleSuccess}>
</lightning-record-form>
</lightning-card>
</template>

JS ->

import { LightningElement } from 'lwc';
import SCHOOL_OBJECT from '@salesforce/schema/School__c';
import NAME_FIELD from '@salesforce/schema/School__c.Name';
import PHONE_FIELD from '@salesforce/schema/School__c.School_Phone__c';
import EMAIL_FIELD from '@salesforce/schema/School__c.School_Email__c';
import FEES_FIELD from '@salesforce/schema/School__c.Fees__c';
import ADDRESS_FIELD from '@salesforce/schema/School__c.School_Address__c';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CreateSchoolRecord extends LightningElement {

objectApiName = SCHOOL_OBJECT;
fields =[NAME_FIELD, PHONE_FIELD, EMAIL_FIELD, FEES_FIELD, ADDRESS_FIELD];

handleSuccess(event){
    const evt = new ShowToastEvent({
    title: "School record has been created",
    message: "New School Salesforce ID: "+this.event.id,
    variant: "success"
});
this.dispatchEvent(evt);   

}
}

XML ->

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
</targets>
</LightningComponentBundle>

Answer 1

Are you sure your event.id represents the Salesforce ID? In any case - you want to remove "this" (because your event variable is local):

message: "New School Salesforce ID: " + event.id,

Update in answering your comment:

Have a look at the documentation... - ops, is your code based on just this documentation? This is what I can read there:

message: 'Record ID: ' + event.detail.id,

Still doesn't work?

Answer 2

JavaScript has template literals you can use for this.

message: `New School Salesforce ID: ${event.id}`,

Also you create a link to the record in the toast message as well. See Displaying Links in Toasts section here.

Answer 3

Use : message: "New School Salesforce ID: "+ event.detail.id instead of event.detail.Id ( small letter "i" for id)

Worked for me.