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 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  -

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-datatable >      </ lightning-card > </ template > cmpOpportunityRecords.js import  {  LightningElement  , api , wire , track  }  from   'lwc' ; import   getOpportunity   from   '@salesforce/apex/cmpOpportunityRecordsCls.getOpportunity' ; export   default   class   DevCmpShowRecords   extends   LightningElement  {     @ track   columns  =

LWC Life Cycle

Requirement : ‹ › LWC Life Cycle : Life Cycle is nothing but a callback method which is triggered at a specific phase of a component's lifecycle. LWC lifecycle contains the following phases: 1. constructor() 2. connectedCallback() 3. disconnectedCallback() 4. render() 5.renderedCallback() 6. errorCallback(error,stack) 1. constructor(): constructor is invoked when the component is created, it is similar to Init method in aura component. Only difference here is that, flow is from Parent to Child, and opposite to that of Init where child component Init is called first then the parent component Init gets called. First Statement must be super() with no parameters. It is required to assign the proper prototype and value to this attribute. 2. connectedCallback(): connectedCallback() is invoked when the component is inserted into DOM. 3. disconnectedCallback(): disconnectedCallback() is invoked when the component is removed from DOM. 4. render(): render(