Hey guys, today in this post we are going to learn about how to create a record in Contact Object and Redirect to detail page simply Using with ‘@salesforce/schema/Contact‘ in Salesforce Lightning Web Component (LWC)
Files we used in this post example:-
| insertContactRecordLwc.html | Lightning Web Component HTML | Templae HTML file used to write HTML element for build user interface. |
|
insertContactRecordLwc.js |
Lightning Web Component JavaScript | It is hold click function and business logic to save input field value into database. |
|
insertContactRecordLwc.js-meta.xml |
XML Meta | It is used for where this lightning web component should be exposed. |
Live Demo
Other related post that would you like to learn in LWC
Step 1:- Create Lightning Web Component : insertContactRecordLwc.html
SFDX:Lightning Web Component >> New >> insertContactRecordLwc.html
insertContactRecordLwc.html [Lightning Web Component HTML]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<template> <lightning-card> <div slot="title"> <h3> <lightning-icon icon-name="standard:contact" size="small"></lightning-icon> Insert a Contact Record in LWC </h3> </div> <div class="slds-grid slds-wrap"> <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <lightning-input label="First Name" value={firstName} onchange={contactChangeVal}></lightning-input> </div> </div> <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <lightning-input label="Last Name" value={lastName} onchange={contactChangeVal}></lightning-input> </div> </div> <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <lightning-input label="Phone" value={phoneNo} onchange={contactChangeVal}></lightning-input> </div> </div> <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <lightning-input label="Email" value={emailId} onchange={contactChangeVal} ></lightning-input> </div> </div> <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <lightning-input label="Department" value={departmentVal} onchange={contactChangeVal} ></lightning-input> </div> </div> <div class="slds-p-horizontal--small slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <lightning-input label="Description" value={descriptionVal} onchange={contactChangeVal}></lightning-input> </div> </div> </div> <div slot="footer"> <lightning-button label="Create Contact Record" variant="brand" onclick={insertContactAction}></lightning-button> </div> </lightning-card> </template> |
Step 2:- Create Lightning Web Component : insertContactRecordLwc.js
SFDX:Lightning Web Component >> New >> insertContactRecordLwc.js
insertContactRecordLwc.js [JavaScript Controller]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { LightningElement} from 'lwc'; import { createRecord } from 'lightning/uiRecordApi'; import conMainObject from '@salesforce/schema/Contact'; import conFirstName from '@salesforce/schema/Contact.FirstName'; import conLastName from '@salesforce/schema/Contact.LastName'; import conPhone from '@salesforce/schema/Contact.Phone'; import conEmail from '@salesforce/schema/Contact.Email'; import conDepartment from '@salesforce/schema/Contact.Department'; import conDescription from '@salesforce/schema/Contact.Description'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; import { NavigationMixin } from 'lightning/navigation'; export default class InsertContactRecordLwc extends NavigationMixin(LightningElement) { firstName = ''; lastName = ''; phoneNo= ''; emailId=''; departmentVal=''; descriptionVal=''; contactChangeVal(event) { console.log(event.target.label); console.log(event.target.value); if(event.target.label=='First Name'){ this.firstName = event.target.value; } if(event.target.label=='Last Name'){ this.lastName = event.target.value; } if(event.target.label=='Phone'){ this.phoneNo = event.target.value; } if(event.target.label=='Email'){ this.emailId = event.target.value; } if(event.target.label=='Department'){ this.departmentVal = event.target.value; } if(event.target.label=='Description'){ this.descriptionVal = event.target.value; } } insertContactAction(){ console.log(this.selectedAccountId); const fields = {}; fields[conFirstName.fieldApiName] = this.firstName; fields[conLastName.fieldApiName] = this.lastName; fields[conPhone.fieldApiName] = this.phoneNo; fields[conEmail.fieldApiName] = this.emailId; fields[conDepartment.fieldApiName] = this.departmentVal; fields[conDescription.fieldApiName] = this.descriptionVal; const recordInput = { apiName: conMainObject.objectApiName, fields }; createRecord(recordInput) .then(contactobj=> { this.contactId = contactobj.id; this.dispatchEvent( new ShowToastEvent({ title: 'Success', message: 'Contact record has been created', variant: 'success', }), ); this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: contactobj.id, objectApiName: 'Contact', actionName: 'view' }, }); }) .catch(error => { this.dispatchEvent( new ShowToastEvent({ title: 'Error creating record', message: error.body.message, variant: 'error', }), ); }); } } |
Step 3:- Create Lightning Web Component : insertContactRecordLwc.js-meta.xml
SFDX:Lightning Web Component >> New >> insertContactRecordLwc.js-meta.xml
insertContactRecordLwc.js-meta.xml [LWC Meta Data XML]
|
1 2 3 4 5 6 7 8 9 10 |
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> </LightningComponentBundle> |
Further post that would you like to learn in LWC
Related Topics
Create a Contact Record With Re-Usable Dynamic Custom Lookup Field in Lightning Web Component – LWC
How to Insert New Record in Account Object and Navigate to the Record Detail Page without Apex class using Lightning Data Service in Lightning Web Component — LWC
How to Insert a Record of Account Object Using Apex Class in Salesforce Lightning Web Component-LWC
Insert New Record in Custom Object and Navigate to the Record on Detail Page Using Apex class method in Lightning Web Component — LWC
Realy very helpful article
You’re a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.