Use Case:- We are using lightning-record-edit-form to create Contact record associated to an Account. We need to populate the account id in Contact form placed on Account record page in Lightning Experience.
Solution:- We have our Lightning Web Component which uses the lightning-record-edit-form to create contact record form to create a record.
myRecordEditForm.html
<template> <lightning-card title={cardTitle} icon-name="custom:custom85"> <div class="slds-m-around_medium"> <lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}> <lightning-messages> </lightning-messages> <lightning-input-field field-name="Name"> </lightning-input-field> <lightning-input-field field-name="AccountId" value={recordId}> </lightning-input-field> <lightning-input-field field-name="Title"> </lightning-input-field> <lightning-button class="slds-m-top_small" type="submit" label="Create new"> </lightning-button> </lightning-record-edit-form> </div> </lightning-card> </template>
Highlights:- We are using value attribute of lightning-input-field to bind it with current account record id using recordId property.
myRecordEditForm.js
import { LightningElement,track,api } from 'lwc'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class MyRecordEditForm extends LightningElement { @api recordId; @track cardTitle='New Contact'; handleSuccess (){ const evt = new ShowToastEvent({ title: "Success!", message: "The Contact's record has been successfully saved.", variant: "success", }); this.dispatchEvent(evt); } }
Highlights:- We are using track and api decorators to bind the properties we have used in html markup. Also, We are firing a toast message after record gets saved successfully.
myRecordEditForm.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myRecordEditForm"> <apiVersion>46.0</apiVersion> <isExposed>true</isExposed> <masterLabel>Contact Card</masterLabel> <description>This component shows the new contact record form.</description> <targets> <target>lightning__RecordPage</target> </targets> <targetConfigs> <targetConfig targets="lightning__RecordPage"> <objects> <object>Account</object> </objects> </targetConfig> </targetConfigs> </LightningComponentBundle>
Highlights:- We are exposing component only to account record page so that functionality works properly.
Demo
