EP-06 | Create a Record using Lightning Record Form in LWC | LWC Stack ☁️⚡️

LWC Stack is Lightning Web Component tutorial series by Salesforce MVP Kapil Batra. In this series you will find LWC tutorials from beginner to intermediate level.

So if you are working on it or planning to learn LWC then this video series is for you. Let's learn and grow together ! Please check complete code below from LWC Stack EP-06

HTML

1
2
3
4
5
6
7
8
9
<template>
    <lightning-card>
        <lightning-record-form
        object-api-name={objectApiName}
        fields={fields}
        onsuccess={handleSuccess}>
        </lightning-record-form>
    </lightning-card>
</template>

JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import { LightningElement } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';
import NAME_FIELD from '@salesforce/schema/Account.Name';
import PHONE_FIELD from '@salesforce/schema/Account.Phone';
import REVENUE_FIELD from '@salesforce/schema/Account.AnnualRevenue';

export default class CreateAccountRecord extends LightningElement {
    objectApiName=ACCOUNT_OBJECT;
    fields = [NAME_FIELD,PHONE_FIELD,REVENUE_FIELD];

    handleSuccess(event){
        const toastEvent=new ShowToastEvent({
            title:"Account has been created successfully !",
            message: "Account Created ",
            variant: "success"
        });
        this.dispatchEvent(toastEvent);
    }
}

Output


Checkout complete tutorial below

 If you have any question please leave a comment below.

If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Happy Coding :)

Post a Comment

5 Comments

  1. Can you through some more light on the error we got in video, I still not able to get it why we got that error?

    ReplyDelete
    Replies
    1. Hi I think that was a temporary issue as later on when I re-deploy the component it was not there.

      Delete
  2. Hello Kapil Ji

    An error occurred while trying to update the record. Please try again.
    Account Number is not numeric.

    I got the above mention error at the record creation time.

    ReplyDelete
  3. Hello, I have a attachment field on one of my object. I tried calling it with import like all other fields you showed but it is not displaying on my component, is there any other way for attachment field to be shown on lwc component ?

    ReplyDelete
    Replies
    1. I believe you have to add lightning-file-upload there to upload attachment.

      Delete