Lesson: 28 | Build Custom UI to Create and Edit Records

If the lightning-record-*-form components don’t provide enough flexibility for your use case, use the JavaScript API to build UI that creates and edits records.

The component’s JavaScript imports createRecord from the lightning/uiRecordApi module. To display notifications for error handling, it imports ShowToastEvent from lightning/platformShowToastEvent. It then imports references to the Account object and Account name field.

Pass the account name to createRecord(recordInput), which creates an account record based on the name you provide.

Next, provide a handler that creates an account record using createRecord(recordInput). In this example, the handleNameChange(event) method handles a change event from the component HTML file when a user enters an account name.

HTML

<template>
    <lightning-card title="LdsCreateRecord" icon-name="standard:record">
       <div class="slds-m-around_medium">
           <lightning-input label="Id" disabled value={accountId}></lightning-input>
           <lightning-input label="Name" onchange={handleNameChange} class="slds-m-bottom_x-small"></lightning-input>
           <lightning-button label="Create Account" variant="brand" onclick={createAccount}></lightning-button>
       </div>
    </lightning-card>
</template>

Java Script

import { LightningElement } from 'lwc';
import { createRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';

export default class LdsCreateRecord extends LightningElement {
    accountId;
    name = '';

    handleNameChange(event) {
        this.accountId = undefined;
        this.name = event.target.value;
    }
    createAccount() {
        const fields = {};
        fields[NAME_FIELD.fieldApiName] = this.name;
        const recordInput = { apiName: ACCOUNT_OBJECT.objectApiName, fields };
        createRecord(recordInput)
            .then(account => {
                this.accountId = account.id;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Account created',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
    }
}

Prev You need to login to have access to the quizzes. Next

Mastered by 12 users.

Lightning Web Components

A. Component Reference (27 lessons)

B. Lightning Web Components | Utilities (11 lessons)

C. Lightning Web Component Guide (41 lessons)

D. Java Script Methods for LWC (23 lessons)

E. HTML (18 lessons)

F. JavaScript (19 lessons)

Go to top

Login to your account

Lesson: 28 | Build Custom UI to Create and Edit Records

HTML

Lightning Web Components