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.

Go to top

Login to your account

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

HTML