Lesson: 22 | Create a Record I

First Way: Creating New Record

HTML

<template>
    <lightning-record-edit-form object-api-name="Contact"
                                onsuccess={handleSuccess}>
        <lightning-input-field field-name='AccountId'></lightning-input-field>
        <lightning-input-field field-name='FirstName'></lightning-input-field>
        <lightning-input-field field-name='LastName'></lightning-input-field>
        <lightning-input-field field-name='Email'></lightning-input-field>
        <lightning-input-field field-name='Phone'></lightning-input-field>
        <lightning-button class="slds-m-top_small" type="submit" label="Create Contact">
        </lightning-button>
    </lightning-record-edit-form>

    <div style="color:green;">{successMessage}</div>
</template>

JavaScript

import { LightningElement} from 'lwc';
export default class CreateContactforAccount extends LightningElement {

    successMessage;
    contactDetails;
    handleSuccess(event) { 
        this.successMessage ='New Contact has been created. ID: ' + event.detail.id;
    }
}

Second Way: Creating New Record

HTML

<template>
    <lightning-card title="Create Contact">
        <lightning-layout>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-card>
                    <lightning-input name="Name " label="Name" onchange={nameHandler}></lightning-input>
                    <lightning-input name="Email " label="Email" onchange={emailHandler}></lightning-input> 
                    <br>
                    <lightning-button label="Create Contact " onclick={createContact} ></lightning-button> 
                </lightning-card>               

                <div style="color:green"><b>{message}</b></div>

            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>

JavaScript

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

export default class CreateContactLDS extends LightningElement {
    @track Name;
    @track Email;
    message;
    
    nameHandler(event)
    {
        this.Name=event.target.value;
    }

    emailHandler(event)
    {
        this.Email=event.target.value;
    }
    createContact()
    {
        const fields={'LastName':this.Name,'Email':this.Email};
        const recordInput={apiName:'Contact',fields};
        createRecord(recordInput).then(response=>{
            this.message='Contact has been created successfully.';
        }).catch(error=>{
            this.message=('An error occured while creating a contact.');
        });
    }
}

Create and view the record using lightning-record-edit-form component

HTML

<template>
    <lightning-card title="Create and View Contact Record">
        <lightning-layout>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-card title="Create A New Contact Record">
                    <lightning-record-edit-form object-api-name="Contact" onsuccess={createContact}>
                        <p><lightning-input-field field-name="Name"></lightning-input-field></p>
                        <p><lightning-input-field field-name="Phone"></lightning-input-field></p>
                        <p><lightning-input-field field-name="Email"></lightning-input-field></p>
                        <p><lightning-button type="submit" variant="brand" name="save" label="Create Contact"></lightning-button></p>
                    </lightning-record-edit-form>
                </lightning-card>
            </lightning-layout-item>
            <lightning-layout-item size="6" padding="around-small">
                <lightning-card title="View Contact Record">
                    <lightning-record-view-form record-id={recordId} object-api-name="Contact">
                        <div class="slds-box">
                            <p><lightning-output-field field-name="Name"></lightning-output-field></p>
                            <p><lightning-output-field field-name="Phone"></lightning-output-field></p>
                            <p><lightning-output-field field-name="Email"></lightning-output-field></p>

                        </div>


                    </lightning-record-view-form>


                </lightning-card>


            </lightning-layout-item>



        </lightning-layout>


    </lightning-card>
</template>

JavaScript

import { LightningElement ,track} from 'lwc';

export default class CreateContactEdView extends LightningElement {
    @track recordId;
    createContact(event)
    {
        this.recordId=event.detail.id;
    }
}

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

Mastered by 15 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

Lesson: 22 | Create a Record I

First Way: Creating New Record

HTML

JavaScript

Video

Second Way: Creating New Record

HTML

JavaScript

Video

Create and view the record using lightning-record-edit-form component

HTML

JavaScript

Video

Lightning Web Components

Login to your account

Lesson: 22 | Create a Record I

First Way: Creating New Record

HTML

Second Way: Creating New Record

HTML

Create and view the record using lightning-record-edit-form component

HTML

Lightning Web Components