+ Start a Discussion
sowmyaa Yakkalasowmyaa Yakkala 

Insert record in Contact Object using Lightning Web Components

I am new to Web components and When ever i am trying to insert a record in Contact Object it was saving with only FirstName,Lastname,Physical Attributes but i am getting Input of all other fields  in Js but in debug Logs it was showing only data of FirstName,Lastname, not Physical Attributes in ApexClass why?? Can i Know the  reason Why??


    <lightning-card title="Insert Contact" icon-name="standard:contact">
            <div class="slds-p-around_x-small">
                <lightning-input label="FirstName" value={rec.FirstName} onchange={handleFirstNameChange}></lightning-input>
                <lightning-input label="LastName" value={rec.LastName} onchange={handleLastNameChange}></lightning-input>
                <lightning-input type="text" label="PhysicalAttributes" value={rec.PhysicalAttributes} onchange={handlePhysicalAttributesChange}></lightning-input><br/>
                <lightning-button label="Save" onclick={handleClick}></lightning-button>

Js File:

import { LightningElement,track } from 'lwc';
import createContact from '@salesforce/apex/insertContactApexWeb.saveContactRecord';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName__c';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName__c';
import PHYSICALATTRIBUTES_FIELD from '@salesforce/schema/Contact.Physical_Attributes__c';
export default class InsertContact extends LightningElement {
    @track firstname = FIRSTNAME_FIELD;
    @track lastname = LASTNAME_FIELD;
    @track physicalattributes = PHYSICALATTRIBUTES_FIELD;
    rec = {
        FirstName : this.firstname,
        LastName : this.lastname,
        PhysicalAttributes : this.physicalattributes
    handleFirstNameChange(event) {
        this.rec.FirstName = event.target.value;
        window.console.log("FirstName", this.rec.FirstName);
    handleLastNameChange(event) {
        this.rec.LastName = event.target.value;
        window.console.log("LastName", this.rec.LastName);
    handlePhysicalAttributesChange(event) {
        this.rec.PhysicalAttributes = event.target.value;
        window.console.log("PhysicalAttributes", this.rec.PhysicalAttributes);
    handleClick() {
        createContact({ con : this.rec })
            .then(result => {
                this.message = result;
                this.error = undefined;
                if(this.message !== undefined) {
                    this.rec.Name = '';
                    this.rec.Industry = '';
                    this.rec.Phone = '';
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Account created',
                            variant: 'success',
                window.console.log("result", this.message);
            .catch(error => {
                this.message = undefined;
                this.error = error;
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                window.console.log("error", JSON.stringify(this.error));

Apex Class:

public with sharing class insertContactApexWeb {
    public static void saveContactRecord(Contact con){
            insert con;
        catch(Exception ex) {
            throw new AuraHandledException(ex.getMessage());

ekansh parnamiekansh parnami
not clear with your issue can you please explain more
Hi Sowmya,

Give a try with below code. Below code will take input for standard FirstName,Lastname and custom Physical Attributes field.

As you are trying to input values for custom field Physical Attirbutes use the API name in the Object type variable rec. Also I see you are trying to access custom first name and last name fields if thats the case try to change your code same like physical attributes field. But make sure when you are trying to pass the object type to Apex method use API names. 

When I tested with your code though you want the fields to be saved in custom firstname__c and lastname__c fields as your object has standard firstname and last fields (FirstName, LastName) your data is saving in standard fields. In your developer console the values you are seeing is for standard fields. But if you navigate to record in UI you see there is no value in Physcial attribute field or other custom name fields. This is because you are not refering the correct API name.

Js Code
import { LightningElement,track } from 'lwc';
import createContact from '@salesforce/apex/insertContactApexWeb.saveContactRecord';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import PHYSICALATTRIBUTES_FIELD from '@salesforce/schema/Contact.Physical_Attributes__c';
export default class InsertContact extends LightningElement {
   @track  rec = {
        FirstName : FIRSTNAME_FIELD,
        LastName :LASTNAME_FIELD,
        Physical_Attributes__c: PHYSICALATTRIBUTES_FIELD
    handleFirstNameChange(event) {
        this.rec.FirstName = event.target.value;
        window.console.log("FirstName", this.rec.FirstName);
    handleLastNameChange(event) {
        this.rec.LastName = event.target.value;
        window.console.log("LastName", this.rec.LastName);
    handlePhysicalAttributesChange(event) {
        this.rec.Physical_Attributes__c = event.target.value;
        window.console.log("PhysicalAttributes", this.rec.Physical_Attributes__c);
    handleClick() {
        createContact({ con : this.rec })
            .then(result => {
                this.message = result;
                this.error = undefined;
                if(this.message !== undefined) {
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Account created',
                            variant: 'success',
                window.console.log("result", this.message);
            .catch(error => {
                this.message = undefined;
                this.error = error;
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                window.console.log("error", JSON.stringify(this.error));

Html code
    <lightning-card title="Insert Contact" icon-name="standard:contact">
            <div class="slds-p-around_x-small">
                <lightning-input label="FirstName" value={rec.FirstName} onchange={handleFirstNameChange}></lightning-input>
                <lightning-input label="LastName" value={rec.LastName} onchange={handleLastNameChange}></lightning-input>
                <lightning-input type="text" label="PhysicalAttributes" value={rec.Physical_Attributes__c} onchange={handlePhysicalAttributesChange}></lightning-input><br/>
                <lightning-button label="Save" onclick={handleClick}></lightning-button>

Hope this helps! Please mark as best if it solves your problem.

Sowmya YakkalaSowmya Yakkala
Hi Sravani,
Thank u for u r response.And i am able to successfully insert a record but when i am trying to insert a record with fields like firstName and LastName  i am getting error 

Error creating record
Upsert failed. First exception on row 0; first error: INVALID_TYPE_ON_FIELD_IN_RECORD, Physical Attributes: value not of required type: : [Physical_Attributes__c]

can u plz help me 
Thanks in advance.
Hi Sowmya,

In the above code FirstName and LastNames fields are standard contact fields where LastName is the required field. I guess this error will occur when you are trying to input records without giving the required fields like LastName and giving custom field values (PhysicalAttributes__c). Record will not be created if the required fields are missing and gives error. If you are trying to input both Standard name fields and Custom name fields you have to first import them like with API name in addition to eixsting import statements like below and change entire code to accpet the values like PhysicalAttributes__c.
import FIRSTNAME_CUSTOM_FIELD from '@salesforce/schema/Contact.FirstName__c';
import LASTNAME_CUSTOM_FIELD from '@salesforce/schema/Contact.LastName__c';
Hope this helps!