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
suji srinivasansuji srinivasan 

Hi, my lWC component for trailhead is not working in record page. It keeps on loading.can anyone guide me what i missed out?

LWC- Use Lightning Data Service to Work with Data
HTML
<template>
    <lightning-card>
        <lightning-record-form
            object-api-name={contact}
            fields={fields}
            onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

JS
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import CONTACT_OBJECT from '@salesforce/schema/contact';
import getContacts from '@salesforce/apex/ContactController.getContacts';
import NAME_FIELD from '@salesforce/schema/contact.Name';
import EMAIL_FIELD from '@salesforce/schema/contact.Email';
export default class ContactCreator extends LightningElement {
    objectApiName = CONTACT_OBJECT;
    fields = [NAME_FIELD, EMAIL_FIELD];
    handleSuccess(event) {
        const toastEvent = new ShowToastEvent({
            title: "Contact created",
            message: "Record ID: " + event.detail.id,
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

meta XML
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>
Thanks in Advance
Best Answer chosen by suji srinivasan
edralphedralph
In your JS, you set the variable objectApiName to the CONTACT_OBJECT
In the HTML, in object-api-name you set it to contact.  It should be the objectApiName variable you set in the JS.

i.e. object-api-name={contact} should be object-api-name={objectApiName}

Ed

Creator of: SuperRoundRobin - automating record assignment in Salesforce (https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FR4MkUAL)

All Answers

SwethaSwetha (Salesforce Developers) 
HI Suji,

Please note that Questions about how to pass Trailhead challenges are not on topic, because these challenges are intended to be independent demonstrations of your abilities.

Trailhead Help (https://trailhead.salesforce.com/en/help?support=home)can provide assistance for situations where Trailhead does not appear to be functioning correctly. You can reach out to them if this is the case.

Please close the thread by selecting as best answer so that we can keep our community clean. Thank you
edralphedralph
In your JS, you set the variable objectApiName to the CONTACT_OBJECT
In the HTML, in object-api-name you set it to contact.  It should be the objectApiName variable you set in the JS.

i.e. object-api-name={contact} should be object-api-name={objectApiName}

Ed

Creator of: SuperRoundRobin - automating record assignment in Salesforce (https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000FR4MkUAL)
This was selected as the best answer
suji srinivasansuji srinivasan
Thank you edralph.