Skip to main content

LWC Create Record

Requirement :



Create a LWC which will take information like Name, Phone and Industry and on click of Save button , record should be saved to the org as Account.

or in other words

Create account record LWC.

cmpAccountRecord.html

<template>
    <lightning-card title="New Account" icon-name="standard:account">
        <lightning-input 
            label"Name" 
            value={objAccount.Name} 
            onchange={handleNameChange}>           
        </lightning-input>
        <lightning-input         
            label="Phone" 
            value={objAccount.Phone} 
            onchange={handlePhoneChange}>
        </lightning-input>
        <lightning-input 
            label="Industry" 
            value={objAccount.Industry} 
            onchange={handleIndustryChange}>
        </lightning-input>
        <br>
<lightning-button label="Save" onclick={handleSaveRecord}></lightning-button>
    </lightning-card>
</template>


cmpAccountRecord.js

import createAccount from '@salesforce/apex/cmpAccountRecordCls.createAccount';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { LightningElement,track } from 'lwc';
export default class DevCmpCreateRecord extends LightningElement {
    @track objAccount = {
        Name : '',
        Industry : '',
        Phone : ''
    }
    handleNameChange(event){
        this.objAccount.Name = event.target.value;
    }
    handleIndustryChange(event){
        this.objAccount.Industry = event.target.value;
    }
    handlePhoneChange(event){
        this.objAccount.Phone = event.target.value;
    }
    handleSaveRecord(){
        createAccount({objAccount : this.objAccount})
            .then(result => {
                this.message = result;
                this.objAccount = {};
                this.error = undefined;
                if(this.message !== undefined){
                    this.objAccount.Name = '';
                    this.objAccount.Industry = '';
                    this.objAccount.Phone = '';
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Account created',
                            variant: 'success',
                        }),                        
                    );
                }
                console.log(JSON.stringify(result));
                console.log("result"this.message);
            })
            .catch(error => {
                this.message = undefined;
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
                console.log("error"JSON.stringify(this.error));
            });
    }
}

cmpAccountRecord.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
      </targets>
</LightningComponentBundle>

cmpAccountRecordCls.cls

public with sharing class cmpAccountRecordCls {    
    @AuraEnabled
    public static Account createAccount(Account objAccount){
        insert objAccount;    
        return objAccount;
    }
}

Output:



Other Useful Blog

Lightning Component

Happy Learning !!

Comments

  1. Very nice knowledgefull post... you have explained in very detail..

    ReplyDelete

Post a Comment

Popular posts from this blog

LWC Show Records In Table

Requirement : ‹ › Create a LWC component which will show the most recently created 10 Opportunity from the org and show them in table having Name , Close Date , Stage Name , Type and Create . or in other words Show Opportunity data in table format. cmpOpportunityRecords.html < template >      < lightning-card   title = "Opportunity Records"   icon-name = "standard:opportunity" >                  < lightning-datatable                            data = {data}                columns = {columns}                key-field = "Id" >          </ lightning-...

LWC Update Single Record Datatable

Requirement : ‹ › Create a LWC in which get the contact records in Datatable and Update single record. Or in other words Update Single Record through Datatable. cmpDatatableUpdateSingleRecord.html < template >           < lightning-card   title = "Update Contact Record"   icon-name = "custom:custom63" >          < div   class = "slds-m-around_medium" >              < template   if:true = {contact.data} >                  < lightning-datatable                      key-field = "Id"                    ...

LWC Decorators

Decorators : ‹ › In LWC decorators are used to add functionality to a property or function. There are three types of decorators : 1. @track 2. @api 3. @wire @track : It is used to make properties or methods in LWC is private. This properties is not accessible outside the LWC in which it is declared. @api : It is used to make properties or methods in LWC is public. This way they are accessible outside of the component in which they are declared. For ex : parent component can set the value of the properties in the child component. @wire : It is used to read the Salesforce data from apex class into LWC. It is generally used while making the server call to apex class. LWC Properties : There are two type of LWC properties. 1. Reactive Properties 2. Non-Reactive Properties Reactive Properties : In case of reactive properties , value of the properties change when the component re-render. There are two types of Reactive Properties. 1. Public properties...