Use createRecord in LWC Salesforce

Hello folks, today we will discuss How to use createRecord in LWC Salesforce. We use this UI Api to create a record. We will create a form from which we submit the record details and create a record. We also show created record Id after creation.

Also, check this: Use deleteRecord in LWC Salesforce

Key Highlights :

1. import createRecord.
2. No use of Apex for creating records.

Syntax :

import { createRecord } from 'lightning/uiRecordApi';
createRecord(recordInput: Record): Promise<Record>

Code :

createRecordLWC.HTML:

<template>
	<lightning-card title="Use createRecord in LWC Salesforce/ LDS create Record" icon-name="standard:record">
		<template if:true={showLoading}>
			<lightning-spinner alternative-text="Loading" size="medium" class="spinnerClass"></lightning-spinner>
		</template>
		<div class="slds-m-around_medium">
			<lightning-input label="Name" value='' data-field="Name" class="slds-m-bottom_x-small" required>
			</lightning-input>
			<lightning-input label="Rating" value='' data-field="Rating" class="slds-m-bottom_x-small">
			</lightning-input>
			<lightning-button label="Create Account" variant="brand" onclick={handleCreate}>
			</lightning-button>
		</div>
	</lightning-card>
</template>

createRecordLWC.JS:

import { LightningElement, track } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CreateRecordLWC extends LightningElement {
    @track showLoading = false;

    handleCreate() {
        const allValid = [...this.template.querySelectorAll('lightning-input')]
            .reduce((validSoFar, inputFields) => {
                inputFields.reportValidity();
                return validSoFar && inputFields.checkValidity();
            }, true);

        if (allValid) {
            this.showLoading = true;
            // Create the recordInput object
            var fields = { 'Name': this.template.querySelector("[data-field='Name']").value, 'Rating': this.template.querySelector("[data-field='Rating']").value };

            const recordInput = { 'apiName': 'Account', fields };
            console.log(recordInput);

            createRecord(recordInput)
                .then(() => {
                    this.showToast('Success!!', 'Account created successfully!!', 'success', 'dismissable');
                    // Display fresh data in the form
                    this.showLoading = false;
                })
                .catch(error => {
                    this.showLoading = false;
                    console.log(error);
                    this.showToast('Error!!', error.body.message, 'error', 'dismissable');
                });
        }
        else {
            // The form is not valid
            this.showToast('Error!!', 'Check your input and try again.', 'error', 'dismissable');
        }

    }

    showToast(title, message, variant, mode) {
        const evt = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: mode
        });
        this.dispatchEvent(evt);
    }
}

createRecordLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. createRecord